This is a solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
This challenge was on a junior level. I had completed it earlier but I decided to redo it, given my whole new css confidence
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Live Site URL: Netlify
- Github Repo:
I have been practicing with Mobile first workflow, for some time now, so as always my process:
- Analyse the design visually
- Figure out how the mobile design will be achieved
- Figure out how the desktop design will be achieved
- Understand how they'll all interact
- Build out the mobile design
- Build out the desktop design
- Add addition features like active states and hover pseudo classes
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Well for starters, design is not as easy as it looks. I am also continuing to improve on mobile first work-flow
I want to continue improing on mobile first work-flow. I also want to work on measurement units, to understand better how Rem and Em work
- Github -
- Frontend Mentor - @munyite001
- Twitter - @emunyite