This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the section depending on their device's screen size
- Figma Measurements: https://www.figma.com/file/ucdnJXn9hQDCZxuNCthZDV/Frontend-Mentor---Social-proof-section?node-id=0%3A1
- Live Site URL: Add live site URL here
In this challenge, I started by measuring the layout and identifying what section to be made. Then, I coded the sections in my HTML script. Last, I worked with the styling in CSS while tweaking the HTML for necessary changes. All done in vanilla HTML and CSS.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
In this challenge, I learned that the height of <body> element depends on its first content-containing descendant. I also learned that text elements can be very taxing, I needed to tweak some of the elements line-height and font-size to match the design example.
I'm considering to learn and use SCSS in my next work. I've tried using SCSS in my past work and I've found it helped me organizing my stylesheet.
- W3Schools' articles on line-height - For my reference using line-height.
- CSS-Tricks' articles on using SVG - This helped me understanding how to work with SVG.
- Frontend Mentor - @hattami98 Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.