Frontend Mentor - Bookmark landing page solution

This is a solution to the Bookmark landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

The challenge

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
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Live Site URL: Github Pages

My process

Built with

• CSS custom properties
• Flexbox
• Grid
• Mobile-first workflow

What I learned

Continued development

• Better Semantics.
• Web Accessibility.
• Using row-reverse could be avoided by showing and hiding duplicate html content. When refreshing, you can see the content moving.
• Putting 'position: relative' on the first-section::before prevents the hamburger from working.
• Using ::before for the background image with absolute positioning means all viewport sizes must be accounted for.
• Made the mobile nav fixed.

Useful resources

• Stack Overflow - Embedding SVGs
• W3 - Heading hierarchy
• W3 schools - Border image
• Stack Overflow - Border image
• CSS Tricks - Border image property
• Geeks for Geeks - Image resizing
• Free Code Camp - Hamburger Menu
• Geeks for Geeks - Stop Scrolling
• Codepen - FAQ Accordion
• Codepen - Tabs matched with ids and hrefs
• MDN - Form Validation
• Stack Overflow - Filter to change svg img tag
• Codepen - CSS filter generator
• W3 Schools - Colors Converter
• Geeks for Geeks - Stop Scrolling