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.
Difficulty: junior
Deployment status
To build the intro section with dropdown navigation according to the given designs as close as possible. The 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
- Solution URL: Open GitHub repository
- Live Site URL: open Netlify page
- Semantic HTML5 markup
- CSS (BEM naming convention used, see getbem.com for more information)
- Flexbox
- CSS Grid
- ES6 classes
- Mobile-first workflow
- Optimized for both Open Graph (Facebook) and Twitter Cards
- Node.js - Open source and multi platform JavaScript runtime environment
- NPM - Package Manager for Node JavaScript platform
- Browsersync - Synchronous browser testing (in collaboration with Gulp)
- Parcel - Zero configuration build tool / module bundler to automate workflow
- Sass - CSS Preprocessor (in collaboration with Parcel)
- GitHub - Technological platform based on Git
- Git - Free and open source distributed version control system
- Netlify - Free service to host static webpages and web applications
- Always use semantic compliant-standard HTML
- To keep testing the application for Web Accessibility
- To spend time looking at the details of the designs to create the application as accurately as possible
- How to work with ES6 classes
- How to work with a zero configuration build tool such as Parcel
- How to write documentation for functions
- How to implement progressive enhancement in relation to a navigation
- How to deliver JavaScript-enhanced content if applicable for the user (how to create a dropdown menu with JS)
The way I want to continue to develop myself is by focusing on laying out a proper foundation of HTML, CSS, and JavaScript. This so I can build quality websites for clients by just using the core languages of the Web. At the present, I am working on the above things by going through (interactive) articles on the MDN Web Docs (see chapter Useful resources).
Another way I want to improve my knowledge of these subjects is to do more challenges that Frontend Mentor is offering, starting at the lowest level, and building that up to the more advanced ones.
Besides the above, I want to continue to develop myself by using several tools more often to improve my workflow. and spend less time doing things that can be automated.
A few tools that I will start using more often are:
- Gulp
- Parcel
- Git
- GitHub
- Netlify (in combination with Continues Deployment)
I will learn the above points in between but do not want to focus too much on those at the moment.
As soon as I am capable of creating quality websites with the core languages of the Web, I will start to learn JavaScript libraries and frameworks. Both of these change over time, so I do not want to spend my time on those before I have a solid understanding of prior mentioned languages.
- Transfonter - Has been used to convert the downloaded font files to WOFF and WOFF2 (most recent font formats, supported in all major browsers), and generate the corresponding
@font-faceCSS rulesets - Frontend Mentor - Intro section with dropdown navigation challenge on Frontend Mentor
US.1: as a user, I want to be able to view the menu items in the drop-down menu as soon as I click on a menu item. This is so I can navigate to the necessary page without being overwhelmed by the amount of menu items.
- LinkedIn - Yari Morcus (must be logged in)
- Frontend Mentor - @YariMorcus