@kalihari90
@G-Gakii
Submitted
What are you most proud of, and what would you do differently next time?
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!
@ownedbyanonymous
Submitted
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;
@frontpro
Submitted
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
@tchananet
Submitted
What are you most proud of, and what would you do differently next time?
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
@RSGames2019
Submitted
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.
