@mersadze
Latest solutions
Product Review Card Solution
Submitted 3 months agoI meticulously got the layout, sizing, and spacing to almost exactly as the design preview, although there is probably an easier way to do it or there's something in my markup that needs to be tweaked.
Social Links Profile
Submitted 4 months agoContinue practicing and working on responsive design. I feel like I'm improving more and more with each challenge. As always, tips and advice are very welcomed!
Semantic HTML and CSS
Submitted 4 months agoMedia queries to add responsiveness when screen sizes change. Right now it's at a fixed width that I had to measure using an image editing app. I'm sure there's an easier way to find out pixel sizes.
Latest comments
- @vanbyu22
Great job! The responsive layout is working as well.
- P@vadims3103What are you most proud of, and what would you do differently next time?
Used semantic tags for HTML structure, hopefully in the right way.
What challenges did you encounter, and how did you overcome them?The most challenging in this project for me was lists with bullets (numbers), and spacing between bullet and text. For now realised that there are several ways how to solve this and in plans to test different solutions for getting best result.
What specific areas of your project would you like help with?It would be nice if HTML structure would be checked is it not too complicated?
According variables in css, is it good to name color with color name?
:root { --white: #FFFFFF; }It is easy to understand what colors hides under the variable, but if in future we will decide that all elements that are now are white should be green. We cannot rewrite it as:
:root { --white: #33d47c; }The only way is to create a new variable --green and rewrite from --white to --green.
@vanbyu22Well done! I too had trouble with the spaces between the bullets and texts, but I found a solution. I like how yours is almost the same size as the design preview, whereas mine is a little longer (I could've probably dialed the paddings and margins down a bit ^^;;)
Not familiar with CSS variables yet, but overall good job!
- @Anita-Liberatore@vanbyu22
Colors and layout look great, as well as color change when hovered. The main container could use some more padding and spacing between texts and buttons. And instead of using all divs, try using semantic elements like < main > for the main container. But seeing as this was done almost a year ago, I think you've probably improved on your coding since then.
Marked as helpful - @AndreBestWhat are you most proud of, and what would you do differently next time?
that I can read figma values
What challenges did you encounter, and how did you overcome them?I didn't know the sizes of elements and paddings/margins and I checked figma and set them right
What specific areas of your project would you like help with?fonts
@vanbyu22Looks great, exactly like the design preview. I've not worked with Figma myself, but it seems to be a useful tool.
- @tanadolMo@vanbyu22
Design is pretty much identical to original design. It could use some semantic elements such as <main> (in addition to the divs already there) to help with accessibility. The CSS style code could be on a separate file but given that the HTML skeleton is very small, it's passable to leave it all on one page and is still readable.
