@mechitouaSubmitted 4 months ago
Majdi Neji
@majdi-nejiAll comments
- @majdi-nejiPosted 3 months ago
Well Done ! your solution is incredibly close to the design i like it a lot can you tell me what technologies did you use for your solution? i noticed tailwind css i need to learn that for sure ! Great work
0 - @belchiorgomesSubmitted 3 months ago@majdi-nejiPosted 3 months ago
hi @belchiorgomes i was asked to review your solution and to be honest i think your solution is considerably different from the design so here are a few things i recommend doing to improve 1-learn and practice more on your css skills here is a list of some usefull resources that can help you gain the knowledge you need MDN web docs == https://developer.mozilla.org/en-US/ w3schools == https://www.w3schools.com/ web dev == https://web.dev/ 2-learn css grid it is a powerful tool when it comes to layout and you can combine it with flexbox to achieve even the most complicated designs https://learncssgrid.com/ 3-train your eye to replicate designs accuratly by practicing and styling elements accordingly
Marked as helpful0 - @danielseverianSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I used fixed heights and widths for testing. Both designs.
What challenges did you encounter, and how did you overcome them?This time it was more easy.
What specific areas of your project would you like help with?none
@majdi-nejiPosted 3 months agoHi @danielseverian well Done i think your solution looks great for the most part it's just the layout needs a little of adjustments on the mobile view like changing the width and height to percentages so it becomes more responsive and the horizontal scroll disappear,maybe adding one more break-point for small phones decreasing font sizes.. also i think it's better to use the img tag in html instead of using it as a background on css when the image serves a purpose as content and use it as a background when it's only for decorative purposes i hope this was helpful.
0 - @Lunarix09Submitted 3 months ago@majdi-nejiPosted 3 months ago
Hi @Lunarix09 Good job working on your solution but i think there are some areas that need improvementi noticed a few differences between the design and your solution that i want to point out and tell you how you can fix them 1.Adding the right fonts: the fonts for this design are Young serif and Outfit there are different ways to link them either import them from your assets folder by using
font-family: "Outfit"; src: url("../assets/fonts/outfit/Outfit-VariableFont_wght.ttf"); } @font-face { font-family: "Young Serif"; src: url("../assets/fonts/young-serif/YoungSerif-Regular.ttf"); }``` or import directly from google fonts @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap"); 2.Adding a margin top to your column element. increase the padding to 40px so it matches the design. using the right color for the instruction list. i recommend learning more about flexbox and css grids for layouts trying to train your eyes for details by converting designs into code remmember practice makes perfect. 3. Try to not make a habit of overusing Divs instead use Semantic HTML Tags It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content. because semantic elements provide meaning and structure here is an article that explain it more in depth i really recommend looking into it [Semantic HTMLArticle](https://web.dev/learn/html/semantic-html?hl=en) i hope i didn't overwhelm you with the long feedback ! :D good luck learning and improving you got this.0 - P@loki-pepeSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I learned how to make initially inert elements tabbable.
@majdi-nejiPosted 3 months agoGreat Work @loki-pepe! i like how you used semantic html tags . your code is very organized and readable. the layout looks good and responsive. the only minor thing i will add is cursor: pointer; to the li:hover effect it helps makes the user feel like it's clickable and interactive.
Marked as helpful0 - @ccorley23Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I think I did a fairly good job of using the correct semantic tags. I had to learn about a few new ones to do so.
What challenges did you encounter, and how did you overcome them?I had a little trouble writing the HTML for this challenge because I wasn't sure which tags to use for which portion of the blog preview card. It took a bit of searching on google to figure out that the tag was best for the date and the tags were best for the texts that weren't paragraphs.
I was also not sure how to approach the responsiveness, so after trying a few things I ended up using media queries to add margins to the left and right.
What specific areas of your project would you like help with?Did I handle the responsiveness correctly? I used a media query to add margins and adjust the font-size, I am not sure if there is a better way.
Also, is my HTML well-structured and efficient? Any semantic tags that I missed?
@majdi-nejiPosted 3 months agoGreat job your code is very well structured and readable . the layout is responsive and it's very similar to the design well done :D
0 - @chiscookeke11Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I understood how to apply min-width and min-height to maintain the width and height.
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?I think i still need to work more on my fonts.
@majdi-nejiPosted 3 months agohi chiscookeke11 i think your solution is really great however there are a couple of things that could use some improvements i will list them down below and point out how you can fix them
- the proportions of the card are a little off i know it can be tricky replicating a design dimensions accuratly that's why i recommend you look into the design in the figma file and see the dimensions like widths,heights,paddings border radius etc and you can even see fonts used with their sizes and weights which will make your solution very close to the design *the second thing i noticed was the fonts and you have mentioned that you need to work more on them well here is how you can implement them on your code first look at the fonts being used on the design on our case it is a font called Outfit "you used poppins" it is a google font so that makes it easier to add it to our website just copy the embeded link and add it to the head tag on your html file like this
Marked as helpful0
