BWC Bootcamp Recap: Week 1
Tags: freecodecamp, html, css, webdev
Published: 2023-08-05 16:24:57

Hello learners, and congratulations on getting through the first week of the [free webdev bootcamp](https://badwebsite.club/webdev-bootcamp-2023.html)! We’ve been going through a LOT of material very quickly—when I was a teenager I spent *months* learning what we did here in a single week!—and it’s easy to get lost in all this new information. So at the end of every week, I’m going to be writing one of these posts to recap what we’ve learned together!

But I’m going to follow in Jess’s footsteps and be a bit mean to you all: Before I give you my recap, each post will start off with some *questions* to make you try to recap the lessons yourself! The purpose is to get you using a *super effective* learning strategy called active recall. It’s A-okay if you don’t remember the answers—just the act of *trying* to remember will strengthen your memory! I really encourage you to give each question an honest attempt before reading on.

## Quiz yourself!

1. What’s the difference between HTML and CSS?
2. What tag would you use to put a picture into a web page?
3. What does it mean if an HTML tag is self-closing?
4. What’s the difference between a block element and an inline element?
5. If you want to add a style to every element in the class called “large-text”, what *CSS selector* should you write?
6. What elements belong inside the `<head>` element?
7. Name one way to make your website more *accessible*.
8. What’s wrong with this code? `<input type="textarea">`

## Recap

### Key concepts

- To code a web page, we need two languages, HTML and CSS. So far our websites have been made up of two files, `index.html` and `styles.css`. The HTML file is where we put the content of our page and give it structure, while the CSS file is where we put rules that describe the visual properties of that content. Each tag in the HTML file creates an *element* in the web page. (You can also check out my [overview of some of the terms you’ll see in the lessons](https://dev.to/caesiumtea/bwc-bootcamp-recap-html-and-css-vocabulary-41e4).)


- An HTML file has two main parts, a *head* and a *body*. All the content that we want to show up on the page goes inside the body. We can also say these elements are *nested* inside the body, or are *child elements* of `<body>`. The head contains extra information used by the web browser.

- We can manipulate the appearance of our HTML elements by writing CSS rules that change their properties. The browser assigns a certain value to some of those properties by default, and these defaults can sometimes be different from one web browser to another. Different types of element have different sets of properties available.

- There’s also a way to alter our HTML elements from within the HTML file, and that’s by giving them *attributes*—additional words inside the opening tag, like the `href` in `<a href="https://example.com">`. But while CSS just changes the *appearance*, attributes usually change the *behavior* or *purpose* of the element.

- The way to create a group of elements that share the same CSS is to make a *class.* It’s like having to wear a uniform (the same *styles* as your classmates) to go to class!
    - One element can have multiple classes (write them separated by a space like `class="item blue round"`)
    - The same class can be applied to many elements, and they don’t even all have to be the same type! E.g. I can assign the class `blue` to both paragraphs and headings that I want to have `color: blue`.

### HTML elements

- `p`, `h1`, and `h2` are tags for holding text. The `a` tag turns text into a link. The `em` and `strong` tags mark a section of text as “emphasized” or “important”.
- `main`, `header`, `footer`, `section`, and `article` are *semantic tags* that provide information about the page’s structure to a web browser or assistive technology. Like `div`, they separate a page into different sections, but unlike `div`, they indicate how that section fits into the larger structure of the page and what *purpose* it serves.
- The `div` element is often used to divide the page into areas with different style properties, such as making boxes with different background colors. A `div` tag doesn’t have any *semantic meaning,* so its main purpose is just for applying styles.
- `img` adds a picture, and this can go inside a `figure` tag to associate it with a `figcaption`.
- `ol` or `ul` creates a list, and each `li` nested inside it is one list item.
- `form` creates a form where the user can send data back to the web server. Some elements you might put inside a form are `input`, `select`, `textarea`, and `button`. 
  - We also learned a *lot* of different ways to use the `input` tag inside forms. You can see an overview of these in the MDN articles “[Basic native form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls)” and “[HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)”.
    - If you want me to write a separate post reviewing what we learned about forms, please let me know by leaving a comment here on dev.to, on the week 1 recap post in the freeCodeCamp forum, or mentioning me in the [Discord](https://discord.gg/pySW9YZfYY) server by typing `@vance`.

### Layout

- Elements get arranged differently on the page depending on whether their display type is *inline,* *block*, or *inline-block*. Each type of tag defaults to a certain display type (e.g. the default for `<p>` is block), but we can use the CSS `display` property to change it to something else.
    - Block elements take up the full width of their parent element (unless you change their `width` property), even if their content is small, or if there’s no content at all. They always start on a new line, so a series of block elements will stack up on top of each other like stacking blocks. Or you could say they *block* other elements from appearing inside their line.
    - Inline elements can be *in the same line* with other elements. They’re only as big as the content inside them.
    - Inline-block elements will appear in the same line as other elements (just like inline ones), but instead of being tied to the size of their content, you can use the `width` and `height` properties to change their size.
    - Why is this helpful? Let’s say you’re making a form and you want the `input` elements to always be on a line by themselves, separate from their labels. You could accomplish this by setting the CSS rule `input {display: block;}`.
- *Margin* is the space around the *outside* of an element, like the margins along the edges of a page in a book. *Padding* is empty space *inside* an element, between its border and its content. Padding is like wrapping your content in bubble wrap. Both of these properties have the same purpose, to create open space between the elements in your page. This helps with readability.
    - Beware that browsers often add some margin or padding by default! If your elements seem to be the wrong size, this might be why.
    - If you’re having trouble working with margin and padding, don’t worry, we’re going to focus more on this on Tuesday!
- Setting `margin: auto` on a block element will center it.
- We can use the CSS properties `height`, `width`, and `max-width` to set the size of an element.
- Widths can be given in *absolute units* like pixels (e.g. `100px`), which stay the same no matter what size everything else is, or *relative units*, where the size depends on other factors. Percents like `50%` are relative to the size of the parent element, `em` and `rem` depend on the text size, and then `vh` and `vw` depend on the size of the user’s browser window.
- Use `text-align` to arrange the text within a block element, e.g. to center it.

### Getting artistic

- Use `font-size` and `font-family` to customize how text looks.
- Draw a border around an element with the `border` property. It needs a thickness, style, and color: `border: 2px solid green;` . Or use `border-left`, `border-top`, etc to make a border on just one side!
- Color in the “conceptual rectangles” of your elements with the `background` or `background-color` property. The difference is that `background-color` only accepts a color as a value, while `background` can accept either a color or an image, including a gradient generated by the `linear-gradient` function.
- We have lots of ways to set colors for things like backgrounds, borders, and text! Here are 4 different ways to make some text purple:
    - `color: purple;`
    - `color: #800080;`
    - `color: rgb(128, 0, 128);`
    - `color: hsl(300, 100%, 25.1%);`
- These color values can be modified to make them partly transparent. Add an extra two digits to the end of the hex code, like `#800080AA`, or replace the `rgb` and `hsl` functions with `rgba` and `hsla`.
- Use the `opacity` property to make an element transparent. Give it a decimal value between 0 and 1.0. This method makes all of the content inside the element transparent too, instead of just the background!
- You can create a gradient in any property that accepts an image, like `background`! Here's an example:
    - `background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));`
- `box-shadow` creates the effect of a shadow under your element or an outline around it.

---

Phew, that was a lot! But remember, you aren’t expected to memorize all these tags and properties. You just want to have a general idea of what options exist, and then you can always look up how to use them when you need them. I also want to reassure everybody that there won’t always be such a huge barrage of brand-new concepts every week—there was just a lot we had to cover in order to have the building blocks to let us get started. Next week, we’ll learn *some* new topics, but we’ll also take some of this week’s topics and examine them in more detail instead. Plus, our next class on Monday is all about the first certification project! Get excited, because this is your chance to start flexing your creativity and building something that’s really your own, instead of just following instructions! (As a preview, [here’s the web page that I made for the first project](https://caesiumtea.gitlab.io/survey/) when I took this bootcamp last year.)


And if you feel confused or uncertain about anything, please don’t hesitate to ask questions! You can ask on the [Discord](https://discord.gg/pySW9YZfYY), on the [forum](https://forum.freecodecamp.org/c/2023-webdev-bootcamp/586), or in the comments of this post. [MDN](https://developer.mozilla.org/) is also a great place to look up any HTML elements or CSS properties that you don’t remember. And don’t forget your extra homework: please be gentle with yourself! Learning to code is *hard work* and you deserve to rest as well. 


Keep up the great work, everybody! I know you can do it! 💪


PS: If you want to learn more about active recall and study strategies, check out this [great video from Ali Abdaal](https://www.youtube.com/watch?v=ukLnPbIffxE).

---

## Quiz answers

1. HTML describes the structure and content of a web page. CSS describes the visual appearance.

2. `<img>` (which you can also put inside a `<figure>`)

3. A self-closing tag doesn’t have a matching closing tag after the content.

4. A block element occupies the entire width of its parent element. An inline element is only as big as its content and it fits *in line with* other elements. Some properties, like `height`, `width`, and `background-color`, don’t work on inline elements.

5. `.large-text` (Don’t forget the period (`.`) at the beginning! That’s what makes this rule target a *class* instead of looking for some imaginary tag called `<large-text>`, which doesn’t exist.)

6. Here is an example `head` element:
    
    ```html
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Bad Website Club!</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    ```
    

7. Some ways to improve accessibility that we’ve talked about so far are to make sure all images have alt text, use semantic elements, attach labels to input fields, and use good color contrast.

8. `textarea` is actually not an `input` type, even though it’s often used in forms! It’s a separate type of tag, written like `<textarea></textarea>`. (This one trips me up alllll the time!)

Cover art by [Kiri](https://ecasticx.com/)!