🚀 Alec's Test Prep HQ

Master HTML & CSS

Hey Alec! Your personal study guide for acing the test. Learn, practice, and quiz yourself on web fundamentals.

12 Lessons

30 Flashcards

25 Quiz Questions

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>I'm learning code</p>
  </body>
</html>

📅 Alec's Study Plan

1

Learn the Basics

Go through all 12 lessons on HTML structure and CSS styling

2

Practice in Playground

Write your own code and see it come to life instantly

3

Study Flashcards

Memorize key terms and concepts with interactive cards

4

Take the Quiz

Test yourself and aim for 100% before Friday!

📚 Lessons

Master HTML & CSS fundamentals one lesson at a time

HTML Fundamentals

CSS Fundamentals

💻 Code Playground

Write HTML & CSS and see your results live!

<!DOCTYPE html>
<html>
<head>
  <title>My Practice Page</title>
</head>
<body>
  <h1>Welcome to My Page!</h1>
  <p>Start editing to see your changes live.</p>
  
  <h2>My Favorite Things</h2>
  <ul>
    <li>Coding</li>
    <li>Gaming</li>
    <li>Music</li>
  </ul>

  <a href="https://example.com">Visit Example</a>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  color: #333;
  padding: 40px;
}

h1 {
  color: #6c5ce7;
  border-bottom: 3px solid #6c5ce7;
  padding-bottom: 10px;
}

h2 {
  color: #00b894;
}

ul {
  background: white;
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

li {
  padding: 5px 0;
}

a {
  display: inline-block;
  margin-top: 20px;
  color: white;
  background: #6c5ce7;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}

a:hover {
  background: #5a4bd1;
}

Live Preview

🃏 Flashcards

Click cards to flip them. Master all 30 concepts!

0 / 30 mastered

1 / 30

📝 Practice Quiz

Test your knowledge before the real thing!

🎯

Ready to Test Yourself?

25 questions covering HTML & CSS basics

Shuffle Questions

📋 Cheat Sheet

Quick reference for HTML & CSS — bookmark this!

📄 Document Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

📝 Text Elements

<h1> to <h6>  — Headings
<p>            — Paragraph
<br>           — Line break
<hr>           — Horizontal rule
<strong>       — Bold text
<em>           — Italic text
<span>         — Inline container

🔗 Links & Images

<a href="url">Link Text</a>

<img src="image.jpg" 
     alt="description">

<a href="page.html" 
   target="_blank">
  Opens in new tab
</a>

📋 Lists

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

📊 Tables

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

📝 Forms

<form action="/submit">
  <label for="name">
    Name:
  </label>
  <input type="text" 
         id="name">
  
  <input type="email">
  <input type="password">
  <input type="checkbox">
  <input type="radio">
  
  <textarea></textarea>
  <button type="submit">
    Send
  </button>
</form>

🏗️ Semantic HTML

<header>  — Top of page
<nav>     — Navigation
<main>    — Main content
<section> — Thematic group
<article> — Self-contained
<aside>   — Side content
<footer>  — Bottom of page
<div>     — Generic block
<span>    — Generic inline

⚡ Common Attributes

id="unique-name"
class="style-name"
style="color: red;"
src="file-path"
href="url"
alt="description"
type="text"
placeholder="hint"
required
disabled

🎯 Selectors

element     { }  — By tag name
.class      { }  — By class
#id         { }  — By ID
*           { }  — Everything
p, h1       { }  — Multiple
div p       { }  — Descendant
div > p     { }  — Direct child

🔗 Three Ways to Add CSS

/* 1. Inline */
<p style="color: red;">

/* 2. Internal (in <head>) */
<style>
  p { color: red; }
</style>

/* 3. External (best!) */
<link rel="stylesheet" 
      href="style.css">

🎨 Colors

color: red;
color: #ff0000;
color: #f00;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

background-color: blue;
opacity: 0.8;

✍️ Typography

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 2px;

📦 Box Model

/* Content → Padding → 
   Border → Margin */

width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;

/* Shorthand: top right 
   bottom left */
margin: 10px 20px 10px 20px;
padding: 10px 20px;

🖼️ Backgrounds

background-color: #f0f0f0;
background-image: 
  url("bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Shorthand */
background: #f0f0f0 
  url("bg.jpg") 
  center/cover 
  no-repeat;

📐 Display & Position

display: block;
display: inline;
display: inline-block;
display: none;

position: static;
position: relative;
position: absolute;
position: fixed;

top, right, bottom, left

🔲 Borders

border: 1px solid black;
border-width: 2px;
border-style: solid;
  /* solid, dashed, dotted, 
     double, none */
border-color: #333;
border-radius: 8px;
  /* Makes rounded corners */
border-radius: 50%;
  /* Makes a circle */