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.
View live site
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 went best.
After determining the content and layout of the page, I coded the site using Bootstrap HTML and CSS.
View live siteI 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.
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.
