I'm not sure margin-left: 1rem; on the mobile ol is correct, when I use list-style-position: outside; but it works.
I don't know if it was necessary to use "span" for a label element. Maybe there is another way to make horizontal padding works while being flexbox item.
I don't know what can I do more to make my solution better. Let's jump to the next one.
Ability to build a responsive website that prioritises mobile
What challenges did you encounter, and how did you overcome them?-Developing a responsive website. -I overcame the difficulty by watching a YouTube tutorial on mobile-first design.
What specific areas of your project would you like help with?I would value any suggestions on how to make improvements.
Hello @G-Gakii, congratulations for completing challenge. Good work. I like your usage of the custom properties and html structure. I've got few suggestions to make your solution even better.
1.) HTML structure - add another class to the div "container", for example "container product-card"
2.) CSS - "product-card" class - you should try put the flexbox or grid on it, so you can use properties like "gap", "margin', "padding" for general spacing and "border-radius" instead of using all of that seperately on every children.
3.) Dev Tools - if you don't use it actively, try to use Dev Tools on the Google Chrome/ Firefox (hit F12 in the browser) to visualize and check your structure, spacing and which classes have more specifity.
4.) Flexbox by deafult have "flex direction: row", but grid by default put children in the column, so remeber about it. You can use less code, if you want easy column just put display:grid on the parent
5.) Typography - try to set "line-height: 1.5" on your paragraph. It will give your text more space to breath.
6.) Width of the container - should be locked by "max-width" with the REM units (eventually px) on the container. Take margins and padding from the "container" and put it into "product-card". Your container wille be still responsive on the smaller screens.
7.) Responsive units - try to avoid pixels. Use REM for the font-sizes, width etc. Use EM for the margins and padding and media queries. Em is relative to the REM.
8.) Semantic HTML - use "article" instead of the "div" on the container with class "product-card"
Recommended resource: you definitetly should check Kevin Powell free course "Conquering Responsive Layouts". There is good explanation and when use max-width, clamp function, rem & em, percents, vh etc. :) Good luck and have fun!
Hello, Congratulations, good work. Your solution is very close to the design, but I have few suggestion to make your code (CSS) even better.
1.) Use flexbox (column directory) with gap property on the .social-card instead of margins on the .card-bio & h2
2.) Use gap property (in addition to the flexbox) on the .card-btn instead of margin-botton on the links
3.) Try to use property "line-height: 1.5" on the "body". It should help with spacing.
4.) Add property "transition: all 0.3s ease-in-out;" to the "
.card-btn a:hover, .card-btn a:active" to make smooth transition
I was able to do lots without checking online.
What specific areas of your project would you like help with?I still struggle with being able to match the design pixel for pixel. I can get the layout but matching exact font-size, width, spacing, is hard.
Hello. If you struggle with pixel-perfect design you should try to use Figma file, where you have all information about spacing, sizes and so on. I like that you use clamp function for responsivness, but sizes of the fonts unfortunatetly don't match design. Overally good work, I see you're now more experienced than before, you have more challenges done, so maybe consider making this one pixel-perfect? Good luck & have fun
Hello. Overall solution is good, but not perfect yet. You forgot to change font-size of the title to the 22px which makes your card component too high. The paragraph below is perfect. Padding seems to be ok everywhere. Try add some box-shadow to the .card, on the bottom especially. Code is readable and well-structured, but if the project will be bigger than this one it would be good practise to use more detailed class names. Good work and keep it going.
