Your First Steps in Front-End Development: A Beginner's Roadmap

• <header> is like the masthead at the top of the page
• <nav> holds your navigation menu
• <main> contains your primary content
• <h1> to <h6> are your headlines of different sizes
• <footer> is like the publication info at the bottom

<header>
  <h1>The Daily News</h1>
  <nav>
    <a href="home.html">Home</a>
    <a href="breaking-news.html">Breaking News</a>
    <a href="sports.html">Sports</a>
  </nav>
</header>
<main>
  <h2>Top Story</h2>
  <p>The top story for today is ...</p>
</main>
<footer>
  <p>Copyright The Daily News</p>
</footer>

• <form> - The container for all form elements
• <label> - Text description for an input
• <input> - The field where users enter data
• <button> - Clickable button to submit the form

<form>
    <label for="name">Your Name:</label>
    <input type="text" id="name" placeholder="John Doe">

    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="john@example.com">

    <button type="submit">Send</button>
</form>

• <ul> - Unordered list (bullet points)
• <ol> - Ordered list (numbers or letters)
• <li> - List item

<h2>Shopping list</h2>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Bread</li>
</ul>

<h2>Recipe steps</h2>
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

• <table> - The container for your entire table
• <thead> - The header section
• <tbody> - The main content of your table
• <tr> - A table row
• <th> - A header cell
• <td> - A regular data cell

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Created</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>1991</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
    </tr>
  </tbody>
</table>

• <img> - For displaying images
• <video> - For video content
• <source> - Specifies multiple media resources

<img src="dog.jpg">

<video controls>
  <source src="dog-park.mp4" type="video/mp4">
</video>

<img src= "dog.jpg" alt= "A happy golden retriever playing with a ball">

• Start with a 'selector', which targets specific HTML element(s)
• We use curly braces {} to contain our style declarations
• Each declaration has a property and a value, separated by a colon :
• Each declaration ends with a semicolon ;

<p class="my-class" id="my-id">
Hello world!
</p>

p {
    color: green;
}

.my-class {
    color: green;
}

.my-id {
    color: green;
}

• Where your content - text, images, etc. - lives
• The innermost part of the box

• Space between your content and the border
• Can be set on each side - top, right, bottom, left - independently
• Transparent, shows the background color of the element

• The line around the padding and content
• Can have different styles - solid, dashed, dotted
• It can have different widths and colors

• The space outside the border
• Useful to create gaps between elements
• Always transparent

<div class="my-class">
  <p>Hello world!</p>
</div>

.my-class {
    padding: 20px; /* Space inside the box */
    border: 2px solid black; /* The box itself */
    margin: 10px; /* Space around the box */
}

let username = "Alan Turing";
Or use control flow to make decisions:
if (score > 50) {
    console.log("You won!");
} else {
    console.log("Try again!");
}

function sayHello(name) { 
  return "Hello, " + name + "!";
}

<button id="show-message-button">Show The Message</button>
<p class="hidden" id="secret-message">The secret message</p>

.hidden {
    display: none;
}

// Getting an element
let button = document.querySelector('#show-message-button');
let secretMessage = document.querySelector('#secret-message');

// Making something happen when the button is clicked
button.addEventListener('click', function() {
    secretMessage.classList.remove("hidden")
});