/Bookmark-Landing-Page

This is a Frontend Mentor challenge.

Primary LanguageCSS

Frontend Mentor - Bookmark landing page

Design preview for the Bookmark landing page coding challenge

Table of contents

Overview

This project is built with Vanilla JS (ES6), CSS, and HTML5.

The HTML has:

  • details and summery tags for dropdown menu

The CSS has:

  • Normalize library
  • BEM convention
  • Prefers light or dark mode
  • variables
  • All typography in one section (after reset but before general styles)
  • Mobile first development

The JavaScript has:

  • onclick to hide / show nav for mobile

  • add class function - will be reused.

  • remove class function - will be reused.

  • array of objects sourced from data.js:

    • Simple Bookmarking
    • Speedy Searching
    • Easy Sharing info

  • onclick on one of the info tabs will:

    • select correct object
    • change inner text
    • add class to underline selected
    • remove selected class from non selected tabs.

  • form validation for contact us with email

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

Screenshots

screen shot of full screen webpage screen shot of mobile webpage

Links

Built with

  • Semantic HTML5 - HTML5 with clear and descriptive tags for better accessibility and search engine optimization
  • CSS - A utility-first CSS framework
  • Mobile-first workflow
  • Vanilla JavaScript - JavaScript

Author