Workit Landing Page

Table of contents

• Overview
  • The challenge
  • Links
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links

• Live Site URL: Workit Landing Page

Built with

• HTML5
• Custom CSS properties
• Mobile-first approach
• Bootstrap

What I learned

Completing this project taught me the importance and efficiency of a mobile-first approach. I started with a desk-top first approach and found it tedious to go back and re-adjust elements for smaller screen sizes versus starting with mobile designs and building up.

Continued development

I would adopt and implement this layout for a my pet project's landing page

Useful resources

• Bootstrap Docs - Reading through the Bootstrap documentation when I got stuck really helped me learn more about responsive layouts, specifically how to utilize their rows and columns, so I didn't have to rely on vanilla CSS for flexbox and grid.

• [MDN Web Docs]- Reminder on how to use emantic tags like h1-h6, nav, header, sections, and footer

Author

-Builty by Bonclairvoyante