Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

I took on the challenge the build the meet landing page for mobile, tablet and desktop. In building this project I decided to bulid the website mobile-first rather then desktop-first.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://fem-meets-landing-page.netlify.app/

My process

1. Review project brief
2. Have a look at design files
3. Plan how I will action the coding challenege
4. Set up the project files
5. Set up basic styles and HTML Markup
6. Styling with Sass
7. Made website responsive

Built with

• Semantic HTML5 markup
• CSS custom properties
• Sass
• Flexbox
• Mobile-first workflow
• BEM (Block Elements Modifier)

Useful resources

• Bennett Feely - I found this website very useful as it help me to create the rounder corners around the images.

• w3schools (PX - EM) - This site was really helpful when converting PX's to EM's units.

Author

• Github - JulianJ44
• Frontend Mentor - @JulianJ44