Frontend Mentor - Intro section with dropdown navigation solution

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.

Table of contents

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

Overview

A simply website with a dropdown list and some responsive to the site itself

The challenge

Challenge list

1. create a drop down list
2. drop down arrow

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

1st day - I create the skeleton and finished the nav bar which was quite simple, but left the technical part for later as I go finish the rest.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid

What I learned

In the main element I learned that it is great to use grid properties to get an even amount of size between two elements (Article and Picture) and then use 'place-item' to center the contents which gives me almost the right side white spaces.

I get to learn a little bit of the function or object method that would help me create and add height to the featurelist and companylist that I created that makes a responsive arrow up and down whenever I open and closed, at the same time added the height in javascript. The transition is added to the main list classes for company and feature to make the animation that I want.

Continued development

I'll be using grid more often and experiment how I can size elements and placement because grid are very useful for placing each elements and it will resize itself by using grid template along with placing-items in center or arranging contents however I need to meet the client's needs

I'll continue to experiment more on dropdown and collapsing sidebars which is the most difficult problem I have ever encounter as I usually only cover simple html and css. And now I am ready to grow even more.

Useful resources

• W3school - very usefull site to have whenever I end up forgetting something and it gives a quick explanations and examples how it works.

-CSSTRICKS - very stylish, very informative, lots of tricksssss. very nice indeed. Anything CSS style related, will come here anytime for something new or cool tricks to learn, and has lost of images that shows examples.

-GreatStack - this is a youtuber that I found that created the most simplest of drop down list using toggle and classlist in javascript. In CSS I create the .show class that will be used for the toggle

-CodePen@RumitKuharSingh - good code that I found to be quite useful, but I did change some to make it work with my dropdown list.

Author

• Website - Add your name here
• Frontend Mentor - @jetskeeter1
• instagram - @jetskeeter9

Acknowledgments