Latest solutions
Testimonial grids section solution
Submitted 16 days agoThere were a lot of points in the design where I had to eyeball and I tried my best on getting the coloring and shadows accurate.
I wasn't 100% satisfied with how the cards look under certain viewpoints, for example if the window was too small but just enough to hit breakpoint, some desktop view cards would be extremely elongated vertically. There are also other times where the cards have a lot of whitespace for the smaller ones.
I also noted that the style guide said to use 500/600 font weight, but I don't think the design actually used 500/600, some of the text had lesser weight to it.
Any suggestions on how to fix any of these issues and if there are any structural, refactoring, or standard practices that I should apply to my HTML/CSS would be greatly welcomed!
Four card feature section solution
Submitted 21 days agoSpecifically would like any suggestions if needed in regards to how I wrote out the svgs in my HTML. I'm aware there is an svg element but was unsure if it was necessary for this project. Would like more clarity on that. Would also like any suggestions to make my box-shadow a little closer to design.
Any refactoring or structuring suggestions to both my HTML and my CSS is gladly welcomed!
Product preview card component - Mobile first, desktop responsive
Submitted about 1 month agoAny optimizations or suggestions whether it's to my code structuring or naming conventions would be greatly appreciated!
Recipe page solution
Submitted about 2 months agoNothing much for this solution, just wanted to get through this to get to the next section. Feedback would be greatly appreciated still but I definitely could have used better CSS class naming instead of just using generic elements for styling.
Social link profile card with HTML & CSS
Submitted 8 months agoAs usual, would like to know if I can improve any readability or code structuring parts. Always can use help on following coding standards.
Blog preview card using HTML & CSS
Submitted 8 months agoAs always, want to make sure my code follows professional standards such as placement, class names, and modularity.
Latest comments
- @jarthurofvSubmitted 16 days ago@code269Posted 16 days ago
The testimonial cards look great and I can see the attention to detail.
On the mobile and tablet views, there appears to be too much spacing from the top to bottom. Not sure if done purposefully but it does defer from the original design.
Other than that nitpicky detail, this was really well done! Your code is structured very well and easy to read!
0 - P@aokoyeSubmitted 21 days agoWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to make all three layouts (desktop, tablet and mobile).
What specific areas of your project would you like help with?Next time I'd like to do this with grid instead of flexbox.
@code269Posted 21 days agoGreat job! Looks very close to design with just slight differences in spacing.
I would recommend reading into semantic HTML naming. Your HTML could have been sectioned off with semantic names such as header and main.
Also would recommend using "em and rem" for units instead of full-on "px" for best practices.
0 - @JoacoDvSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm proud to use flex and make it responsive. Also from the media query
What challenges did you encounter, and how did you overcome them?The biggest challenge was on two sides, first in adapting the image to its size and then in adapting it with the query for mobile. And I solved both of them by reading the resources they left at the beginning
What specific areas of your project would you like help with?Now I can't think of what to ask for help, but if you see something to correct, let me know, thank you
@code269Posted about 1 month agoTypography looks perfect! Card is properly responsive. Image on desktop view is elongated vertically compared to the design due to image flexbox. The mobile view would look better / more standard if card was centered in middle.
Great attention to detail otherwise!
0 - @DucriaSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I was very proud of the overall result, I thought it was pretty similar, what I would do differently I think would improve my organization a little
What challenges did you encounter, and how did you overcome them?My biggest challenge was in the responsiveness part, I managed to overcome it with the help of sites like MDN Web Docs.
What specific areas of your project would you like help with?I believe in the responsiveness part and a little in the positioning of the elements on the screen
@code269Posted about 2 months agoDesign and solution look very similar! I would watch for the padding cutoff towards the bottom of the Nutrition section. Great work!
Marked as helpful0 - @Jhonatanjacome07Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Realizar que sea responsivo porque no sabia como hacerlo, empezar por lo revisar que sea responsivo porque luego tengo problemas al tratar de hacer que me coincida todo
What challenges did you encounter, and how did you overcome them?Me olvide de aplicar flexbox para centrar el contenido y no sabia porque mi contenido estaba ubicado arriba a la derecha
@code269Posted 8 months agoLooks good! Some colors were swapped around but I'd like to think this developer did it purposefully.
Some of the code could use a little cleanup for delivery, saw a lot of commented out code and a comment on every line of the CSS which made the file a bit convoluted.
Marked as helpful0 - @vknirSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I was able to get most of the spaces, gaps, margins, paddings as close as possible to the intended design file.
What challenges did you encounter, and how did you overcome them?This was a fairly easy challenge for me, as all the resources were provided.
What specific areas of your project would you like help with?I would like get help to include fonts in my projects that I further do
@code269Posted 8 months agoBorders are slightly off in design, but otherwise looks very similar to design.
Would have liked to see more em usage over px for some CSS properties. Using "main" for the container instead of "div" would improve HTML semantics.
Great job!
Marked as helpful1