arfarobs/meet-landing-page

A landing page project solution from Frontend Mentor.

Meet landing page solution

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
• Author

Overview

I tried to get this as pixel perfect as possible. This will be the last pure HTML and CSS front end project that I do.

I have a few questions if any of you have the time:

• For the

  element in the

  . I used a element with a white-space: nowrap; rule to stop the hyphenated text from wrapping. Does anyone know a better way to do this?
• How about my roles? Would you recommend doing something different?
• Should I have added any aria-labels?
• Any advise on accessibility would be great.

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://github.com/arfarobs/meet-landing-page
• Live Site URL: https://arfarobs.github.io/meet-landing-page/

My process

1. Write the HTML.
2. Download and add the fonts.
3. Style for mobile.
4. Style for tablet.
5. Style for desktop.
6. Refactored code to fix any errors when it comes to responsiveness.
7. I made the mistake of calling the footer an article so I changed that.
8. Added hover and focus effects.
9. Added accessibility roles.
10. Tweaked the code in accordance with lighthouse suggestions.

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Mobile-first workflow

Continued development

AS I said above, this is the last pure HTML and CSS project that I intend to do. From now on I'm going to focus on projects with JS.

Author

• Frontend Mentor - @arfarobs