You’ve spent plenty of time building up a great base of knowledge of HTML and CSS and even design. But it’s still a pain in the butt to lay out everything manually and keep repeating yourself all the time when writing your code. If only there was a way to save yourself all kinds of effort…
Frameworks to the rescue! Frameworks like Twitter Bootstrap and Zurb Foundation have done all the heavy lifting of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you. All you have to do is understand how they expect you to lay out your site and which classes they use to designate particular batches of styles.
Frameworks let you focus more on building great sites and less on how they are actually coded up on the front end. They are great for learning and great for rapidly producing sites. Once you’ve taken a tour through Bootstrap, you’ll start looking at every site you see (especially startup ones) and notice an awful lot of similarities… one of the downsides of the frameworks.
- What are CSS frameworks?
- How do frameworks actually work?
- How do you interact with the framework to get the look you want?
- What is Twitter Bootstrap?
- What is Zurb Foundation?
- What is TailwindCSS?
- What other frameworks can you find out there?
- What are the disadvantages of using frameworks?
Watch this next video on Bootstrap 5 and learn all about the framework and its practical uses:
Duration: 85 minutes
Browse through Getting Started with Foundation for an idea of how that framework operates. Observe the similarities and differences between that and Bootstrap.
Take a brief look at TailwindCSS for a more unique and modern approach to CSS frameworks.
Download this HTML template and try to make it look like the screenshot below, just by using Bootstrap 5 classes.
Once finished, upload the code in a private GitHub repository named sha-quiz-css-bootstrap5 and submit the URL in the Quiz below.
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
- 30.10.2020: Added Bootstrap 5 Tutorial – Crash Course for beginners in 1.5h (Oct 2020)
- 30.10.2020: Added Bootstrap 5 Quiz