
Semantic HTML5 markup, CSS Lists, CSS Table, Media queries.
Design comparison
Solution retrospective
*Reaching such a result after completing both HTML & CSS in around 4 months. *Being able to use responsive layout techniques correctly *Trying to finish the project with the minimum number of classes, using the semantic tags names as selectors.
-- Next time I will try to minimize the codes' lines, and write down the media queries codes in more prettier and shortened yet effective way.
What challenges did you encounter, and how did you overcome them?*Add colorful (hr) between sections. -- I found the answer on StackOverflow website, which was adding a top border with the color you want like in the following code: hr { border-top: 1px solid hsl(30, 54%, 90%); }
*How to use internal fonts after using to add fonts by it's external links. -- First mentioning the font from you project's folder:
Then adding that code in CSS: @font-face { font-family: 'Outfit'; src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf); }
*What are the standard dimensions I'm going to use for media queries as screen sizes.. -- I found the solution on Bootstrap website under the section of (Breakpoints) giving the latest dimensions of all usable screens, up to date..
What specific areas of your project would you like help with?I'd like always help with making my code looks more simple and short. Also I'd like to have more help with media queries and moving from query to another smoothly..
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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