Design comparison
Solution retrospective
Although I have been learning HTML and CSS for a while, I felt most of my coding experience was through tutorials. I wanted to escape tutorial hell, so this is one of the first times that I have built a project from scratch. I chose a simple challenge first so as to not get demoralized and over-confident, but I still ran into some challenges that I had to google search while building this. More specifically:
- How do you center an image in a div (I found myself calculating the values manually for the padding-top so the spacing looks even all around the 4 edges of the image, so maybe there is an easier way to resolve this)
- How do I check what fonts/colour codes are used in the final solution preview? I ended up using colour hunt to get the rough colour but I am slightly colour deficient LOL
Overall, good challenge and I am excited to try more challenges in the future and escape tutorial hell!!!
Community feedback
- @IryDevPosted about 1 year ago
Hey @ucolinmee well done for completing this challenge 😄
I will try to answer your questions:
-
Centering an Image in a Div: You're on the right track by looking for a better way to center an image within a div. Instead of manually calculating padding values, you can use CSS Flexbox or Grid. For Flexbox, you could set the parent div's display property to flex and use justify-content: center; and align-items: center;. For Grid, you can set the parent div's display property to grid and use place-items: center;.
-
Font and Color Codes: If you're curious about the fonts and colors used in a webpage, you can use browser developer tools. Right-click on an element and select "Inspect" or "Inspect Element" to open the dev tools. There, you can explore the CSS applied to different elements, including fonts and colors. You can also use browser extensions like "WhatFont" to identify fonts and color picker extensions to get color codes.
I hope you'll find this helpful😄
1 -
- @AdditionAddictPosted about 1 year ago
For 2 you can use the provided figma files (not sure about sketch). Figma has added a developer view so you can inspect the css. The style guide has the font details.
0 - @shafni50Posted about 1 year ago
center a image in a div :
justify-content : center; align-items: center;
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord