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 @ownedbyanonymous Congratulations on your solution. Good work! I like that you used tables and some semantic HTML. I've got few suggestion to improve your project.
1.) HTML structure - try to put all content below the picture into one div, so you can add display:flexbox; flex-direction: column; gap: 32px; od display:grid; gap: 32px; instead of using margins on all elements seperately
2.) Main heading needs to be bigger font-size: 40px;
3.) Instruction section - there should be ordered list <ol> instead of unordered <ul>
4.) You should add somehow white spaces at the top & the bottom of the page to make it look visually better and to make it easier to check [solution <=> design] comparison
5.) Card width - card is to narrow. In the design cotainer have max-width: 736px;
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.
