> For the complete documentation index, see [llms.txt](https://marcylabschool.gitbook.io/swe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marcylabschool.gitbook.io/swe/mod-3-html-css/overview.md).

# Overview

In this module, we'll learn how to scaffold and design a websites using HTML and CSS. We'll learn about:

* **HTML** — The markup language used to create the structure and content for websites.
* **CSS** — The styling language used to define the layout, spacing, colors, fonts, and more for websites.
* **Accessible Design** — Designing for users with a wide range of abilities and disabilities, focusing on removing barriers to access and ensuring usability for everyone.

**External Resources for Learning**

* [\[CSS Tricks\] Design Principles for Developers: Processes and CSS Tips for Better Web Design](https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/)
* [\[CSS Tricks\] A guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* [\[Youtube\] Learn flexbox the easy way (Kevin Powell)](https://www.youtube.com/watch?v=u044iM9xsWU\&ab_channel=KevinPowell)

## Chapters

* [1. HTML](/swe/mod-3-html-css/1-html.md)
* [2. CSS](/swe/mod-3-html-css/2-css.md)
* [3. The Box Model and Positioning](/swe/mod-3-html-css/3-box-model.md)
* [4. Flexbox](/swe/mod-3-html-css/4-flexbox.md)
* [5. Grid & Media Queries](/swe/mod-3-html-css/5-grid-media-queries.md)
* [6. Forms](/swe/mod-3-html-css/6-forms.md)
* [7. Accessibility (a11y)](/swe/mod-3-html-css/7-accessibility.md)
* [Personal Portfolio Project](/swe/mod-3-html-css/8-personal-portfolio-project.md)
* [Cheatsheet](/swe/mod-3-html-css/cheatsheet.md)