Components and Layout
Components
HTML and CSS codes are reusable. For example, once you develop code for a button, you can use the code of the button in other web pages like you are managing the code as a component. The idea of components is also widely used in frontend libraries or frameworks such as Bootstrap and React.js. In this course, we don't use frameworks or libraries; however, handling some sets of code as components improves your productivity of website or web application development.
As using Bootstrap or other CSS libraries may be easier and faster in the end, you can skip this chapter and start learning them instead; however, practicing component development using basic HTML and CSS will help you expand your ability in design flexibility.
Layout
Once you have components (reusable sets of code), you can use them as elements of a web page. What you need to do is to define the position (layout) of each component. You'll need to fully utilize the techniques you have learned in the previous chapters:
- Chapter 10. CSS: Sizing and Spacing
- Chapter 14. CSS: Layout – Key Concepts and Display Property
- Chapter 15. CSS: Layout – Flex Box
In this chapter, we focus on how to create and style components. How to set the positions of components on a web page will be covered in the next chapter.
You can also learn this topic offline. Click 
.