Responsive intro section

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Desktop

Mobile

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links.
• View the optimal layout for the content depending on their device's screen size.
• See hover states for all interactive elements on the page.

Links

• Live Demo: Demo

My process

Built with

• Semantic HTML5 markup
• BEM naming convention
• JavaScript (+ES6)
• Flexbox
• CSS Grid
• Stylus-lang
• Mobile-first workflow
• BEM naming convention

What I learned

This challenge was great to put in practice CSS and JavaScript and how to handle responsive design with these two.

I set up a script on package.json to compile and watch the stylus files:

"scripts": {
    "stylus": "stylus -w ./styles/main.styl -o ./public/css/main.css"
},
// 👇 Usage on terminal
// npm run stylus

To add icons on the features dropdown I used this cool trick:

// With the list-style property you can change the default bullet point of unordered list with a custom image
&__item
    cursor: pointer     
    &--todo
      list-style: url('../images/icon-todo.svg')

The intended way of implementing the dropdown arrow, was to add one picture of two depending if is opened or not. I found a better solution, use just one image and rotate it depending on the state.

.turn-up
  transform: rotate(180deg)

title.addEventListener('click', ({target}) => {
  const ulSibling = target.nextSibling.nextSibling
  arrowImg.classList.toggle('turn-up')
}

The most tricky part was to make work the navbar in both in mobile and on desktop, but with mobile-first workflow and some media queries the job was done.

// A cool thing about stylus is how clean it looks
@media (min-width: 800px)
  .navbar
    display: flex;
    align-items: center
    justify-content: start
    gap: 1em
    padding-inline: 2em

Author

• Frontend Mentor - @cacosted
• Twitter - @cacosted