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.
If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.
In addition, here are some of my fiddles with brief jQuery examples:
Don’t forget — the perfect place to look up a jQuery function is the official jQuery site.
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!
This “Live Fact Check” site from National Public Radio is highly responsive and very well designed. You should check it out on desktop, phone and tablet, and compare how it adapts to all sizes. The NPR Visuals team is well known for producing excellent online and mobile apps. The site was also embeddable by NPR member stations.
Update (Sept. 28): This behind-the-scenes article explains how NPR managed the process of live fact checking through this app, using a Google Doc (!) — so creative!
How NPR factchecked the first presidential debate in realtime, on top of a live transcript
Note that 6 million people used the app, and “people coming from mobile actually stayed four minutes longer than people coming from desktop,” according to the article.
This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.
NPR’s Book Concierge
Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.
Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.
At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.
The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.
Here is a wonderful example of page design that:
- Enhances the story.
- Does not use flashy gimmicks.
- Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
- Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).
Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.
The design itself helps to tell the story more clearly.
Here is another New York Times feature story that uses all kinds of cool code tricks to add interactivity:
You can even find some code you will recognize if you view source: