Mongolian Gold Rush
Website Design & Development
Project Summary
I redesigned this NPR story page for a class during the fall semester of my senior year. This assignment included photo editing, creating a map, and building a navigation bar that updates as you scroll through the sections of the page.
All content used in this project is copyrighted to NPR. This project was created for educational use only.
My Role
Designer, Developer
Tools Used
HTML, CSS, JavaScript, Bootstrap, Mapbox
Notes & Sketches
To start this project, I took notes on the requirements and preliminary ideas that I had. Then I sketched out a couple of layout ideas for the page.
After I had an idea of how the layout of the page would look, I went through the 70+ photos that were provided and picture edited them down to about 15. From there, I tried out different pictures at different points of the story to see where they fit best.
Live Site
After determining the content and layout of the page, I coded the site using Bootstrap HTML and CSS.
Features
Interactive Map
I included an interactive map in this project to show the locations of the mining areas from the story. I used Mapbox to create and style this map.
Navigation Bar
The fixed navigation bar on this site can be used to jump to different sections of the story on the page. The navigation will also automatically update the highlighted tab based on the section of the story you are currently on. The navigation also features a smooth scrolling effect when jumping between sections.
