Skip to content

Latest commit

 

History

History
60 lines (40 loc) · 4.72 KB

tutorial-bootstrap.md

File metadata and controls

60 lines (40 loc) · 4.72 KB
Raw

Welcome to Tutorial 1.2: Bootstrap

Bootstrap is a popular framework for developing responsive, mobile-first web sites.

What is a reponsive site

A responsive site “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop or a 4-inch smartphone screen. With responsive design, we don't need to create different versions of the same website to make it look good on different screen sizes.

Read this article for more information: http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html

For Example...

The site that you've made using raw HTML in Tutorial 1 would look the same whether it's viewed on a mobile screen or on a desktop computer. Depending on your layout, it might be difficult to read some of the contents or text for your website unless you zoom in on your phone.

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come. - Jeffrey Veen

Almost all modern websites are responsive sites, and you've probably noticed this too. For example, the layout for the Vancouver Sun and the UBC website looks different depending on whether you're looking at it on a mobile screen or on a full-sized monitor. Here are some more examples of responsive design: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

1. Intro to Bootstrap

As mentioned, Bootstrap provides a framework for creating responsive sites. You don't need to use a framework to make a website, you can always write raw HTML code as you've done in Tutorial 1, but there are plenty of good reasons to use one:

  • Prevent repetition between projects
  • Utilize responsive design to allow your website to adapt to various screen sizes – mobile, desktop, and everything in between
  • Add consistency to design and code between projects and between developers
  • Quickly and easily prototype new designs
  • Ensure cross-browser compatibility

Source: https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/

2. Working with Bootstrap

  1. Watch this 15-minute video for an excellent intro to Bootstrap and a tutorial on making your first Boostrap site: https://www.youtube.com/watch?v=no-Ntkc836w
  2. Take a look at this article too for some further examples: https://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

3. Project: Create a page using Bootstrap on your site

  1. Select a Bootstrap theme that you like (or from any other website, just Google for free Bootstrap themes) from the list below. If you prefer, you can also code a Bootstrap page from scratch, based on what you've learned in Step 2.

  2. Create another page with the Bootstrap theme (call it anything you want, i.e. bootstrap.html) and link to it from your main page (i.e. index.html). If you prefer, you can also overwrite your index.html page with the Bootstrap page.

Resources and Tips

  1. Familiarize yourself with the Bootstrap components you can use: http://getbootstrap.com/components/
  2. You can use Font Awesome for some nice icons: http://fontawesome.io/
  3. Figure out what is a favicon and how to add it to your site: http://www.webdesignerdepot.com/2012/11/whats-the-point-of-favicons/
  4. More design tips: http://news.bootswatch.com/post/81584163618/5-simple-design-tips-to-improve-your-bootstrap

Further Reading

Bootstrap is very powerful and useful for a lot of cases, but might not always be the best solution for every website. Bootstrap files are relatively large, and it might be overkill to use it for simple sites, depending on what you're trying to achieve.

There is also a risk that you'll end up recycling code in Bootstrap themes instead of spending time understanding what it does, like you would do with raw HTML.

There is a risk that by using Bootstrap, you will simply recycle existing code without understanding it. However, if you spend time understanding it and tweaking it, you can use it to accelerate your learning instead.

http://blog.careerfoundry.com/web-development/what-is-bootstrap-a-beginners-guide

Important

If you haven't yet, make sure that you read the Learn Enough Git tutorial. By now you should be comfortable with concepts such as forks, pull requests and other commands such as git commit, git pull and git push.

Next Tutorial

Once you're done with the Bootstrap page, try the Javascript tutorial (Tutorial 2): https://github.com/ubcchemecar/beginners-tutorial/blob/master/tutorial-2.md