Day 5: Learn HTML by Building a Cat Photo App

June 14, 2022

Today’s Progress

Learn HTML by Building a Cat Photo App
- Heading 1 <h1>...</h1>
- Heading 2 <h2>...</h2>
- HTML Comment 
- <main>...</main>
- Nested HTML Element
- Image Element (self-closing tag) <img>
- Image Src attribute <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
- Image alt attribute <img alt="A cute orange cat lying on its back">
- Anchor HTML Element <a href="https://freecatphotoapp.com">cat photos</a>
- Anchor Target Blank to open new tabs <a target="_blank></a>"
- <section>...</section>
- Unordered List HTML Element <ul></ul> and List Item <li>...</li>
```
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
```
- Figure <figure>...</figure> HTML Element and Figcaption <figcaption></figcaption>
- Emphasis Element <em></em>
- Ordered List HTML Element <ol></ol> and List Item <li>...</li>
```
  <ol>
    <li>...</li>
    <li>...</li>
  </ol>
```
- Strong Element <strong>...</strong>
- Form Element <form></form>
- Form Action Attribute <form action="...">
- Input Element <input>
- Input Type Attribute <input type="text">
- Input Name Attribute <input name="key">
- Input Placeholder Attribute <input placeholder="hint">
- Input Required Attribute <input required>
- Button Element <button>...</button>
- Button Attribute <button type="submit">...</button>
- Input Type Radio <input type="radio"> Text
- Label Element <label><input type="radio"> Text</label>
- ID Attribute that must unique per page id="text"
- Same Name Attribute on input type radio element to only allow one option can be chosen and for checkbox to group checked value to same key when submit name="text"
- Default value for checkbox are on when selected to override use value="text" when submitted the format is name=value
- Group related inputs and labels together in a web form using <fieldset>...</fieldset>
- The legend element acts as a caption for the content in the fieldset component <legend>...</legend>
- Input Type Checkbox <input type="radio"> Text
- Other style to use label <input id="key" type="checkbox"> <label for="key"> Text</label>
- Use checked attribute to make checkbox selected by default
- Footer Element <footer>...</footer>
- Head HTML Element <head>...</head> store metadata, invisible important information
- Title HTML Element <title>...</title> what showing in title bar / browser tab for the page
- Language Attribute in HTML Element <html lang=en>...</html>
- HTML5 declaration <!DOCTYPE html> placed in first line of HTML document
Finished project CatPhotoApp

Thoughts

Project based learning makes us practice building project instead of just typing and it encourage us to try to do something based on the skill we know.

Questions

Are there any website that use this kind of learning method too? I know scrimba has it too.