2023 WebDev Bootcamp Recap of Week 1

1

(You can also read this post on dev.to.)

Congratulations on getting through the first week of the bootcamp! 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.)

  • 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” and “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 in this thread, on the dev.to post, or mentioning me in the Discord 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 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, on the forum, or in the comments of this post. MDN 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.

Leave a reply and share how you felt about this week’s lessons–what you were excited to learn, what you struggled with, or anything in between.

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

PS: If you want to learn more about active recall and study strategies, check out this great video from Ali Abdaal.

Quiz answers

(Click an answer to reveal text)

  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>
```

  1. 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.

  2. 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!)

3 Likes
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.