Frontend Mentor - Huddle landing page with single introductory section solution
This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor.
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the page depending on their device's screen size
- See hover states for all interactive elements on the page
Screenshot
Screenshots
Links
- Solution URL: FrontEnd Mentor: My Solution
- Live Site URL: GitHub Page: Single Price Grid Component
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
What I learned
I learned a lesson to give a size to images, paragraphs etc. Because I didn't at first, so everytime I would upload my solutino to Frontend Mentor, it would look messed up.
I also learned that I need to add aria-labels to my social media icon links.
Continued development
In the future, I want to size my elements better & stick to single CSS selectors.
Useful resources
- Font Awesome - I used icons from here.
- Font Awesome: Sizing Icons - This helped understand how to size the icons.
Author
- Website - Anosha Ahmed - Not up at the moment, but will be soon.
- Frontend Mentor - @anoshaahmed
- Twitter - @anosha1ahmed