Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).
You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.
Each of the examples also has a README at GitHub if you’re curious about the why and how of it.
I fell in love with this web app as soon as I laid eyes on it: Monroe Work today. The site is about the research done by an American man named Monroe Nathan Work, who died in 1945. His research was about lynching in the United States. This app demonstrates a great way to tell a story.
First, I zoomed in on the map and started clicking around.
Then I wanted to find out where the data came from. I wanted to know if I could trust it. I spied a little link at the bottom that says, “Should I believe this … ?” Clicking that took me to a section that carefully documented all the sources and all the unanswered questions raised in this project. I loved this part! Too often, digital projects just stuff all their sources into a big list o’ links at the end. This, in contrast, takes the time to explain how the facts were checked and where the research originated.
Using the Chrome extension Wappalyzer, I did a quick look to see whether Bootstrap was used for the design/CSS. It wasn’t — but the producers did use another web framework, one called Ink. Looks pretty awesome. However, they could have made this app with a Bootstrap theme just as easily — it all depends what you and your teammates on a project already know. If someone is comfortable with Bootstrap, he or she will choose Bootstrap. If a person has learned another framework instead, he or she will choose that one.
Oh, and the map? Leaflet!
Look at this beautiful PDF chart you can download for free.
Chart from ft.com. This image shows only a small part of the chart.
You don’t always need an interactive chart. Sometimes a plain image of a chart is just fine.
This example from The New York Times, though, shows how interactive charts can sometimes tell the whole story.
I also encourage you to think about the page design. It is clean and simple, with nice big headings. Nothing gets in the way. A white background and simple black text can be just perfect for many kinds of information.