#100DaysofCode Chapter 6 ~ CSS Framework (Bootstrap 5)
Tags: 100daysofcode, webdev, beginners, bootstrap5
Published: 2020-11-21 13:06:48

![bootstrap-icons.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605961938524/e42bDk38C.png)
> 
The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Framework (Bootstrap 5).

**Introduction**

A **CSS framework** is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript-based functions, but are mostly design-oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

**What is Bootstrap?**

**Bootstrap** is a free and open-source CSS framework directed at **responsive, mobile-first** front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.


> 
I have completed 60 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this sixth chapter.

**Projects**

The majority of my coding for this chapter was for two main projects.

**Bootstrap Pricing Tables**


![Bootstrap Pricing Tables.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605962098106/3KK8eNDlp.png)

For this project, I created the three pricing tables using the grid system from the bootstrap documentation and giving each pricing table its unique color. You can check out this project on  [CodePen](https://codepen.io/lanrewaju/pen/eYzaEqe?editors=1000)  and  [GitHub](https://github.com/lanre-waju/Bootstrap-Pricing-Tables--100DaysofCode) 

**Bootstrap Form**


![Bootstrap Form.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605962124320/AVB0KWK8V.png)

For this project, I created a sign-up form using the code snippets from the bootstrap documentation and gave the form a dark color. As you might expect, you can also find this project on  [CodePen](https://codepen.io/lanrewaju/pen/YzWbryo)  and  [GitHub](https://github.com/lanre-waju/Bootstrap-Form--100DaysofCode) 

**Recommended Resources**


-  [Get Bootstrap](https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/) 


-  [w3schools Bootstrap 4 Tutorial](https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp) 


-  [freeCodeCamp’s Bootstrap](https://www.freecodecamp.org/learn/) 

**What’s Next?**

My plans for the next chapter are:


- Working on Mobile First Websites and building projects on them.


- Continue learning JavaScript.

**Conclusion**

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the  [#100DaysofCode](https://dev.to/lanrewaju/my-coding-journey-in-2020-100daysofcode-challenge-accepted-2efo)  challenge, follow me on Twitter  [@lanre__waju](https://twitter.com/lanre__waju)