> For the complete documentation index, see [llms.txt](https://cs4all-icm.gitbook.io/js-the-interactive-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design.md).

# Unit 1: HTML & CSS: Good vs Bad Design

- [Unit 1 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/unit-1-overview.md): How can I create well designed and accessible webpages with HTML and CSS?
- [U1LA1.1: Building with HTML](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1.1-building-with-html.md): How can I build a website using HTML?
- [U1LA1.2: Structuring Pages with Divs, Classes, IDs](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1.2-structuring-pages-with-divs-classes-ids.md): How can I use divs, classes, and IDs to create structure on a page?
- [U1LA1 Mini Project: My Fan Page Part 1](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1-lab-my-fan-page-part-1.md): How do you use HTML elements to build a webpage?
- [U1LA2.1: Styling your page with CSS](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2.1-styling-your-page-with-css.md): How can I add style to my HTML page using cascading style sheets?
- [U1LA2 Lab: My Fan Page Part 2](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2-lab-my-fan-page-part-2.md): How can I add specific styles such as color, spacing, and font to my web page?
- [U1LA3.1: Layout with CSS Grid](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.1-tbd-grid-lesson.md): How can I structure the content/elements on my HTML page using CSS grids?
- [U1LA3.1 Lab: Grid Interview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.1-lab-grid-interview.md): How can I use CSS Grid to format sections of a webpage into different sizes and orientations?
- [U1LA3.2: Layout with Flexbox](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.2-tbd-flexbox-lesson.md): How can I place container items using Flexbox?
- [U1LA3.2 Lab: Flexbox Interview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.2-lab-flexbox-interview.md): How does Flexbox offer more specific formatting than Grid?
- [U1LA4.1: Focus on Design in HTML && CSS](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2.4-focus-on-design-in-html-and-and-css.md): What elements of HTML and CSS make a well-designed page?
- [U1LA4.2: Breakpoint Lesson](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la4.2-tbd-breakpoint-lesson.md): How can I use media queries to create responsive layouts?
- [U1LA4 Lab: ChefHub Goes Mobile](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la4-lab-chefhub-goes-mobile.md): How can media queries at certain breakpoints be used to make for a responsive webpage?
- [U1LA5.1: Creating Accessible Websites](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la5.2-creating-accessible-websites.md): How can I adjust my HTML to create websites that are accessible for all?
- [U1LA5 Lab: What Do You Hear? Make it Accessible](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la5-lab-what-do-you-hear-make-it-accessible.md): What can one do to make a website more easily accessible?
- [U1LA6.1: Working with CSS Frameworks - Bulma](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la6.1-tbd-bulma-lesson.md): How can a CSS Framework help me to quickly build organized, well-designed websites?
- [U1LA6 Lab: CheeseBook Computers with Bulma](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la6-lab-cheesebook-computers-with-bulma.md): How Bulma make styling webpages easier?
- [Unit 1 Final Project: My Travel Page](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/unit-1-final-project-my-travel-page.md): How can one use HTML, CSS, and Bulma together to make an accessible and responsive website?