WaveLength - News Homepage

A Modern News Homepage Design.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Toggle the mobile Menu.
• Theme should switch according to the User's device system Theme.
• See hover and focus states for all interactive elements on the page
• View the optimal layout for the interface depending on their device's screen size

Screenshot

Links

• Solution URL: Solution Link
• Live Site URL: Live Site

My process

• The first step was dividing the preview into sub-grid and then starting to construct HTML Layout.
• The second step, was styling the HTML.
• And then, Once the styling was done, added a bit of Javascript to Function Mobile Navbar.
• Last Step for me was, Cleaning up the page a little bit.
• And That's it, It took me around 2-2.5 hours to finish this one.
• It was just a practice project.

Built with

• Flexbox
• CSS Grid
• CSS custom properties
• Mobile-first workflow
• Semantic HTML5 markup

Also learned about this Media Funcition of CSS, see below:

@media (prefers-color-scheme: dark) {
      :root {
        --bg: #050412;
        --sidebar: #2F304C;
        --neutral-700: #B3B8EF;
        --svg: hsl(36, 100%, 99%);
        --hover: hsl(5, 85%, 73%);
        --accent: hsl(233, 8%, 79%);
        --primary-400: hsl(34, 84%, 57%);
        --read-hover: hsl(235, 99%, 92%);
        --neutral-900:  hsl(36, 100%, 99%);
    }
}

What I learned

• Well, didn't learn something new but definitely improved in CSS Grid and Responsive Layouts.
• And Anyway it was a practicing Project.

Continued development

• Will continue learning more about the grid and Responsive layout UI.
• Also, will use more of @Media (prefers-color-scheme).

Author

• Github - SameerJS6
• Frontend Mentor - SameerJS6

Acknowledgments

Credits to Google for helping out through the hover effect.