Skip to content

05. HTML & CSS Crash Course.md

Latest commit

 

History

History
136 lines (105 loc) · 2.79 KB

05. HTML & CSS Crash Course.md

File metadata and controls

136 lines (105 loc) · 2.79 KB
Raw

🎨 05. HTML & CSS Crash Course

Topic: Web Basics A quick primer on HTML structure, CSS styling, and the box model.

📑 Table of Contents

Basic HTML Structure and Elements and Attributes, Classes and IDs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="style.css" rel="stylesheet" />

    <title>Learning HTML & CSS</title>
  </head>
  <body>
    <h1>JavaScript is fun, but so is HTML & CSS!</h1>
    <p class="first">
      You can learn JavaScript without HTML and CSS, but for DOM manipulation
      it's useful to have some basic ideas of HTML & CSS. You can learn more
      about it
      <a href="https://www.udemy.com/user/jonasschmedtmann/">on Udemy</a>.
    </p>

    <h2>Another heading</h2>
    <p class="second">
      Just another paragraph
    </p>

    <img
      id="course-image"
      src="https://img-a.udemycdn.com/course/480x270/437398_46c3_9.jpg"
    />

    <form id="your-name">
      <h2>Your name here</h2>
      <p class="first">Please fill in this form :)</p>

      <input type="text" placeholder="Your name" />
      <button>OK!</button>
    </form>
  </body>
</html>

Basic Styling with CSS & Introduction to the CSS Box Model

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(255, 247, 201);
  font-family: Arial;
  font-size: 20px;
  padding: 50px;
}

h1 {
  font-size: 35px;
  margin-bottom: 25px;
}

h2 {
  margin-bottom: 20px;
  text-align: center;
}

p {
  margin-bottom: 20px;
}

.first {
  color: red;
}

#your-name {
  background-color: rgb(255, 220, 105);
  border: 5px solid #444;
  width: 400px;
  padding: 25px;
  margin-top: 30px;
}

input,
button {
  padding: 10px;
  font-size: 16px;
}

a {
  background-color: yellowgreen;
}

#course-image {
  width: 300px;
}

##your-name h2 {
  color: olivedrab;
}

📋 Cheat Sheet

Concept Syntax
Class selector .className
ID selector #idName
Box model content → padding → border → margin
Flex center display: flex; justify-content: center; align-items: center;

💡 Best Practice: Use classes for reusable styles. Reserve IDs for unique elements or JavaScript hooks.

🧭 Navigation

← 📄 04. Developer Skills & Editor Setup | 🏠 Home | 📄 06. DOM and Events Fundamentals →

Happy Coding! 🚀