{"id":17288078,"url":"https://github.com/marissahuysentruyt/intro-section-with-dropdown-navigation","last_synced_at":"2026-04-15T14:03:46.615Z","repository":{"id":159533207,"uuid":"609274210","full_name":"marissahuysentruyt/intro-section-with-dropdown-navigation","owner":"marissahuysentruyt","description":"From Front End Mentor ","archived":false,"fork":false,"pushed_at":"2023-04-17T20:55:41.000Z","size":974,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-29T11:58:56.854Z","etag":null,"topics":["bootstrap","handlebars","linting","scss","webpack"],"latest_commit_sha":null,"homepage":"https://scintillating-torrone-5dc0e6.netlify.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marissahuysentruyt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-03T18:42:23.000Z","updated_at":"2023-03-06T22:15:04.000Z","dependencies_parsed_at":"2023-05-21T04:00:39.944Z","dependency_job_id":null,"html_url":"https://github.com/marissahuysentruyt/intro-section-with-dropdown-navigation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marissahuysentruyt/intro-section-with-dropdown-navigation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marissahuysentruyt%2Fintro-section-with-dropdown-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marissahuysentruyt%2Fintro-section-with-dropdown-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marissahuysentruyt%2Fintro-section-with-dropdown-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marissahuysentruyt%2Fintro-section-with-dropdown-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marissahuysentruyt","download_url":"https://codeload.github.com/marissahuysentruyt/intro-section-with-dropdown-navigation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marissahuysentruyt%2Fintro-section-with-dropdown-navigation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31844337,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","handlebars","linting","scss","webpack"],"created_at":"2024-10-15T10:07:33.764Z","updated_at":"2026-04-15T14:03:46.587Z","avatar_url":"https://github.com/marissahuysentruyt.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Intro section with dropdown navigation solution\n\nThis is a solution to the [Intro section with dropdown navigation challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n![Design preview for the Dropdown Navigation section coding challenge](./design/desktop-preview.jpg)\n\n## Table of contents\n\n- [Welcome \u0026 Overview](#welcome-👋)\n  - [The challenge](#the-challenge)\n  - [Where to find everything](#where-to-find-everything)\n  - [Running the Project](#running-the-project)\n  - [Deploying the Project](#deploying-the-project)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Welcome 👋\nThis challenge is to create a landing page for a site that has dropdown navigation. The dropdowns need to be implemented in both large and small screen devices, which also means that a small screen menu should be implemented. To get experience using Handlebars and Bootstrap, this project uses both. \n\n### The challenge\n\nBesides creating a site that looks as close to the design as possible, users should be able to:\n\n- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links\n- View the optimal layout for the content depending on their device's screen size\n- See hover states for all interactive elements on the page\n\n### Where to find everything\n\nIf you would like to see the static design files, you may find them in the `design` folder. You'll see both a mobile and a desktop version.\n\nThere is also a `style-guide.md` file containing the information regarding the designs, such as color palette and fonts. Additionally, any required assets in the `/images` folder.\n\nThe content for the `index.html` page is found within the `context` object in `template.handlebars.js` file. Each data point is incorporated into the object in some way, which will then be outputted in the `index.html` file when the project runs. \n\n### Running the Project\n1. Clone or fork this repo\n2. Run `npm install` to get all dependencies\n3. Run `npm run start` to open the Webpack server. Webpack will continue to watch for and build changes automatically when you change styles or the Handlebars template.\n4. Visit `localhost:8080` to see the dev version of the site\n5. Run `npm run lint:js` if you'd like to lint any of the JavaScript files\n6. Run `npm run lint:css` if you'd like to lint any of the SCSS files\n7. `npm run build` compiles a single instance of the site into a `dist` folder\n\n### Deploying the Project\n\nThere are many ways to host your project for free. Recommended hosts are:\n\n- [GitHub Pages](https://pages.github.com/)\n- [Vercel](https://vercel.com/)\n- [Netlify](https://www.netlify.com/)\n\nYou can see my deployed branch via Netlify [here](https://scintillating-torrone-5dc0e6.netlify.app/).\n\n### Screenshots\n\nThere are several screenshots here. The first shows the large screen version, then a small screen version, and the last shows the navigation menu open on a small screen device. \n![Project shown on a larger screen](./src/images/large-screen.png)\n![Project shown on a smaller screen](./src/images/small-screen.png)\n![Project shown with the small screen menu open](./src/images/menu-open.png)\n\n### Links\n\n- First Solution: [Code Solution](https://www.frontendmentor.io/solutions/handlebars-bootstrap-webpack-xkeEWY5owF)\n- [Live site](https://scintillating-torrone-5dc0e6.netlify.app/)\n\n## My process\n\nFor this project, I made sure to focus on my HTML markup first, getting things semantically in place, then focusing on the JavaScript. The only \"styling\" I did was when I implemented the Bootstrap dropdown, changing the hover color to a color that is incorporated in the (non-existent) hero image. As you can see, even at this late stage, there is almost no styles done, except for simple typography. \n\nIn my new job, I was informed that my next project would include Handlebars and Bootstrap.js. I hadn't worked in Handlebars in quite some time and didn't have a ton of experience with Bootstrap, so I decided to use this project to incorporate both and try to refresh my memory. The template for `index.html` houses all the data that needs to be displayed on the page. I used a previous project to get the template Handlebars file ready (although now I know more about Handlebars partials \u0026 components). \n\nFor `app.js`, I decided that the small screen menu would be a dialog, and followed the suggestions on the [Accessible Components Cheatsheet page](https://accessible-components.sparkbox.com/dialog) for dialog/modal. Most of the functionality is accessible, but the only thing I struggled capturing was the tab focus staying trapped within the menu dialog specifically when users use `shift + tab` to go backwards in the tab order (which, because of that, technically means it isn't an accessible modal). \n\nThe dropdown menus were created with Bootstrap. This was a simple process of making sure I imported the correct Bootstrap CSS \u0026 JS, then altered the custom variables to match the project design instead. \n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- [SCSS](https://sass-lang.com/documentation/)\n- [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/#:~:text=in%20some%20blanks.-,What%20is%20ITCSS%3F,namespace%2C%20cascade%20and%20selectors%20specificity)\n- [BEM naming practice](https://en.bem.info/methodology/quick-start/)\n- Flexbox\n- CSS Grid\n- Mobile-first workflow\n- [Handlebars.js](https://handlebarsjs.com/guide/)\n- [Bootstrap dropdown](https://getbootstrap.com/docs/5.3/components/dropdowns/)\n- [Webpack](https://webpack.js.org/concepts/)\n- Linters: [Stylelint](https://stylelint.io/), [ESLint](https://eslint.org/docs/latest/), [Prettier](https://github.com/prettier/eslint-plugin-prettier)\n\n### What I learned\n\nUnfortunately, the biggest thing I learned was that the Handlebars documentation leaves quite a bit to be desired. I spent much more time Googling and searching for answers about Handlebars than I spent searching the docs. \n\nI was, however, able to get Webpack and Handlebars to \"play nicely\" for the most part. The hot module replacement works really well in this project (in some of my other projects, it doesn't really work), and I was able to get a working template built for all of the content that needed to be on the page. I had to refactor the template several times in order to get the data where it needed to be, but I'm happy with the results overall. \n\n### Continued development\n\nBecause the Handlebars docs are a little hard to use, I am having trouble making sure that my image paths are correct. I can't get my Handlebars paths to match and compile properly after Webpack builds the project. \n\nI decided with this first solution to use vanilla JS to create the small screen menu, but I'd love to revisit this project and use the [Bootstrap offcanvas](https://getbootstrap.com/docs/5.3/components/offcanvas/) component, almost purely because I find the animation aesthetically pleasing. \n\nAdditionally, I left a note for myself in `app.js` to write JavaScript to determine whether or not to display the small screen navigation. If the screen resizes after a user has already interacted with the small screen nav, the hamburger SVG continues to show, blocking the large screen navigation. This only happens if interaction occurs on a small screen, then the screen increases in size. \n\n### Useful resources\n\nAlthough I still got stuck, referencing the [Handlebars.js](https://handlebarsjs.com/guide/) proved useful. I hadn't used Handlebars in quite some time, and wanted to get a little more experience with it, since I knew my next project at work would incorporated Handlebars. The documentation isn't anywhere near complete nor super clear for a newcomer, but it got me started and I was able to Google and search for the other answers I needed. \n\nIn contrast, the [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) docs are quite thorough. Everything is nicely organized and searchable. I loved having working examples of the components I wanted to use first, that way I could decide after some experimentation if that was really the component that suited the job. \n\n## Author\n\n- Website - [Marissa Huysentruyt](https://www.marissahuysentruyt.com)\n- Frontend Mentor - [@marissahuysentruyt](https://www.frontendmentor.io/profile/marissahuysentruyt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarissahuysentruyt%2Fintro-section-with-dropdown-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarissahuysentruyt%2Fintro-section-with-dropdown-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarissahuysentruyt%2Fintro-section-with-dropdown-navigation/lists"}