BOOTSTRAP MODULE
MODULE TO BE COMPLETED BETWEEN MARCH 13 AND APRIL 2
Bootstrap Module
WHAT IS BOOTSTRAP?
As you’ve read from the PDF already. Bootstrap is a free to use coding framework that uses HTML, CSS, and Javascript. You will see some new components exclusive to Bootstrap like the grid system and some of their components, but don’t let this alarm you as it’s just HTML and CSS – which you already know. Bottom line, Bootstrap has built a whole library of their own HTML, CSS and Javascript to make creating websites much easier for you. All you have to do is add in or change the things you want, or simply remove the things from templates you don’t want.
STARTING BOOTSTRAP FROM SCRATCH
This tutorial will show you where you can get Bootstrap components to help build your website. It will also show you how to link Bootstrap CSS and JS if you’re creating a website from scratch.
WORKING WITH THE CLASS TEMPLATE
This tutorial will show you where you can download our course Bootstrap template. You can use this template to play with Bootstrap and create new sections with containers, rows and columns, make your own custom CSS, and add in some Bootstrap components in the HTML.
- 1:20 – explaining the code in the template
- 6:05 – adding in a new section with container, row, and columns
- 9:12 – adding in a link in the navigation for your new section
- 10:45 – modifying your navigation
- 11:55 – container vs container-fluid
- 12:30 – adding in images and making them responsive easily
- 15:15 – making a custom.css
- 16:12 – styling the footer
- 19:23 – using inspect and changing components in your custom.css
USING OTHER TEMPLATES ONLINE
This tutorial will show you where you can download other templates from a reputable website. Students often like using these templates for Project 3 because there’s so much functionality within them. You should make sure that you’re tweaking any of these templates significantly to make it look like your own.
- 2:10 – exploring and changing the template HTML code
- 5:33 – making a new section
- 8:07 – making a custom.css and adding in styling changes
- 11:15 – making mass changes with colors
- 15:43 – making a one page template into multiple pages
USING A BOOTSTRAP SLIDER
The Carousel is a slideshow for cycling through elements. If you’re using the class template that’s listed on the course outline, you will use Bootstrap 3 Carousel. If you’re using templates from Startbootstrap.com, you will use Bootstrap 4 Carousel.
0:25 – Bootstrap 3 Carousel
7:00 – Bootstrap 4 Carousel
DON’T FORGET..
2 ARTICLES / STORIES
VIDEO EXERCISE
PHOTO CAROUSEL
DATA VISUALIZATION
AMCHARTS
A go-to library for data visualization. When you don’t have time to learn new technologies. When you need a simple yet powerful and flexible drop-in data visualization solution. Includes all basic and advanced chart types, as well as is extendable by additional plugins like Maps and TimeLine.
STORYMAP
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. StoryMap JS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
TIMELINE
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet.
HOW TO UPLOAD PROJECT 3
Uploading with Fetch
0:10
Uploading with Reclaim Hosting
5:07
QUESTIONS?