5 Useful Websites to learn Bootstrap

Bootstrap is an intuitive and popular framework that is free with an open-source collection of tools for users to develop faster and responsive web pages easily with high flexibility.

Advantages of Bootstrap

  1. Save time
  2. Have responsive designs and features
  3. Consistent design across all web pages
  4. Easy to use so anyone with basic coding knowledge can use
  5. Compatible with modern browsers
  6. Free to download and use

5 Useful Websites

  • Tutorial Republic
    • Tutorial Republic provides a very detailed step-by-step tutorial for users to learn how to use and get started with Bootstrap. I think this is a very good website to follow as they explain very clearly what each function is and they give examples for users to follow, providing a very conducive learning process.
    • They have many different tutorials that users can choose from to pace their own learning and apply to the website that they are developing.

Screen Shot 2015-10-09 at 5.28.03 am

Figure 1: Explaining what you can do with a grid system

Screen Shot 2015-10-09 at 5.28.10 am

Figure 2: Providing examples for users to follow

  • w3schools.com
    • w3schools.com consists of not only BootStrap tutorials but also tutorials for HTML/CSS, JavaScript, SQL, PHP, XML and many more. It is a very useful website for web developers to learn coding from as they contain many various examples that users can leverage and learn from.
    • w3schools also provides Quiz Test which enables users to test if they really understood what they have learnt.
    • They also provide various Bootstrap references for CSS classes, components and JavaScript plugins which enables users to be able to see how everything comes together.Screen Shot 2015-10-09 at 5.40.40 am

Figure 3: w3schools providing quiz and references

  • GetBootStrap.com
    • getbootstrap.com is a very useful site as well because they provide basic templates and examples that users can download from to suit their need.
    • They give very clear instructions on how to download and use the bootstrap as well, which is helpful to web developers of any skill level.
    • They even provide images of how using various frameworks will look like which gives the user a much better idea of what they are learning.
    • They have a blog, The Official Bootstrap Blog, to engage with their users and share useful tips and information of bootstrap with everyone.

Screen Shot 2015-10-09 at 5.49.03 am

Figure 4: Pictures of how webpages will look like with various themes

  • codecademy
    • codecademy is a useful website to learn bootstrap as well because they enable users to save and submit codes LIVE on their website where they can view how the webpage looks like with various codes. It speeds up the learning process and provides a very hands-on and interactive way of learning how to code.
    • They also give very clear instructions at the side to explain to users what each code means and how it is used.
    • CodeCademy also has a forum as well where there is a community to help and guide users that are new to Bootstrap

Screen Shot 2015-10-09 at 6.01.36 am

Figure 5: Codecademy providing clear instructions on the left, LIVE edits of codes in the center and PREVIEW of webpage on the right.

  • TermTreeHouse
    • Very detailed courses and workshops on Bootstrap that users can learn from
    • They have step by step video tutorials along with the video transcripts which may be very helpful for visual and audio learners.
    • They even indicate the amount of time needed to learn various skills which enables users to pace their own learning effectively.
    • They have different types of learning platforms like workshops that provides a more rounded learning and courses that teaches specific skills/functions and they cover a wide range of topics as well, from design to Game to iOS and many more.

Screen Shot 2015-10-09 at 6.08.34 am

Figure 6: Various video courses and workshops offered for Boostrap

Screen Shot 2015-10-09 at 6.09.01 am

Figure 7: Detailed step by step video transcript for each tutorial

References

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

http://www.w3schools.com/bootstrap/default.asp

http://getbootstrap.com/getting-started/

http://blog.getbootstrap.com/

https://www.codecademy.com/courses/web-beginner-en-yjvdd/0/8

https://www.codecademy.com/forums/web-beginner-en-yjvdd/0

http://www.shareasale.com/r.cfm?u=1016096&b=418932&m=43811&afftrack=&urllink=teamtreehouse%2Ecom%2Flibrary%2Fq%3Abootstrap

Advertisements