RBS CODE - HTML 2

START HERE

Your toolbox so far

HTML 1 <html> <head> <body> <title> <style> <h1> <p> <button>

CSS 1 tag · #id · .class
color · background-color · width · height
font-size · font-weight · font-family
border-width · border-style · border-color
border-radius · border: none

1

<div> makes a container

A div is a box that groups part of your page together.

Start a game card

<div>
    <h2>Road Racer</h2>
    <p>Race through the city!</p>
    <button>Play</button>
</div>

Change itChange the title, description and button text to invent your own game.

2

id and class label things

Add labels to HTML

<div id="roadRacer" class="gameCard">
    <h2 class="gameTitle">Road Racer</h2>
</div>

id	class
Usually one unique thing.	A reusable group. Many things can share it.
`id="player"`	`class="enemy"`
CSS: `#player`	CSS: `.enemy`

Same labels, two superpowers: CSS can style them and JavaScript can find them.

Quick checkOne player = id or class?
Ten enemies that should share the same style = id or class?

3

<img> adds an image

src = where the image is. alt = what the image is.

Use an RBS Code image

<img
    src="https://rbscode.com/Student-Portal/images/8.png"
    alt="Sports car at night"
>

Two ways to set image width

1. HTML width attribute

<img
    src="https://rbscode.com/Student-Portal/images/8.png"
    alt="Sports car at night"
    width="300"
>

Notice: width="300" has no px. In this HTML attribute, the number is treated as pixels.

2. CSS style

<img
    src="https://rbscode.com/Student-Portal/images/8.png"
    alt="Sports car at night"
    style="width: 300px;"
>

In CSS, write the unit: width: 300px;. For real projects, CSS is usually the better place for styling.

Even better: reuse a class

<style>
.gameImage {
    width: 300px;
    border-radius: 14px;
}
</style>

<img
    class="gameImage"
    src="https://rbscode.com/Student-Portal/images/8.png"
    alt="Sports car at night"
>

Tiny bonus · not required yet

width: 100%; means: fill 100% of the width of the parent container.

.gameImage {
    width: 100%;
}

This is extremely useful for cards. We will use percentages properly again in CSS 2. Usually set the image width and let the browser keep its natural height so the image does not get squashed.

4

Use CSS 1 to make the div into a card

No new CSS needed. This is practice with CSS 1.

HTML 1 + HTML 2 + CSS 1

<style>
.gameCard {
    width: 300px;
    background-color: #111827;
    color: white;
    border-width: 3px;
    border-style: solid;
    border-color: #536dfe;
    border-radius: 16px;
}

.gameImage {
    width: 300px;
    border-radius: 12px;
}

.gameTitle {
    font-size: 28px;
    font-weight: bold;
    font-family: Arial;
}
</style>

<div class="gameCard">

    <img
        class="gameImage"
        src="https://rbscode.com/Student-Portal/images/8.png"
        alt="Road Racer car"
    >

    <h2 class="gameTitle">Road Racer</h2>

    <p>Race through the city and beat your score!</p>

    <button>PLAY</button>

</div>

Make it yours

Copy the card, then change at least 5 things.

Try the background color, border color, border radius, title font size, title font family, card width or image width.

The card is still deliberately simple. CSS 2 adds spacing and layout tools that make cards much more polished.

5

<a> makes a link

href = where the link should go.

Link to another page

<a href="game.html">Play Road Racer</a>

Open a website in a new tab

target="_blank"

<a href="https://rbscode.com" target="_blank">
    Open RBS Code
</a>

Great trick: link to a place on the SAME page

href="#id"

<a href="#games">Jump to Games</a>

...

<div id="games">
    <h2>Games</h2>
</div>

href="#games" searches this page for id="games" and jumps there.

You already used this lesson's real version: Jump to the final build.

Try itGive one section id="highScores", then create a link that jumps to it.

6

<br> makes a line break

Use <br> when text should continue on the next line.

Game stats

<p>
Lives: 3<br>
Coins: 12<br>
Level: 2
</p>

ReplicatePut Speed: 80, Score: 1200 and Best: 3000 on separate lines.

7

<input> lets the player enter something

Player name

<p>Player name:</p>
<input type="text" placeholder="Type your name">

placeholderA hint shown when the input is empty.
It disappears when the user types.

valueThe actual starting content already inside the input.
The user can edit it.

Compare placeholder and value

<input
    type="text"
    placeholder="Type your name"
>

<br><br>

<input
    type="text"
    value="Player 1"
>

Tomorrow's JavaScript can read what is really inside an input using input.value.

Quick buildMake one text input for a player name and one number input for a player's level.

Need the number input?

<input type="number" placeholder="Level">

MAIN BUILD

Build the Road Racer card

This is the important part. Try to build it from the target first. Look back and copy tags or CSS only when you need them.

Requirements

Use all of these:

div · id · class · img · src · alt · a · href · br · input · placeholder

Also use CSS 1 to style the card, image and title.

Need the basic page shell?

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Road Racer</title>

    <style>
        /* CSS here */
    </style>
</head>

<body>

    <!-- Build here -->

</body>

</html>

IF YOU NEED MORE PRACTICE

Short drills

1. Fix itWhat is wrong?
<img href="8.png">

2. Fill the gap<a ____="game.html">Play</a>

3. Same-page linkLink to id="scores".

4. ChooseTwenty enemies sharing one style: id or class?

5. ExplainWhat is the difference between placeholder and value?

6. StyleGive a div a width, background color, border and rounded corners.

HTML 2 CHECKPOINT

Can you actually use it?

Group a game card using <div>.

Use id for one unique element and class for a reusable group.

Add an image with src and useful alt text.

Set image width using HTML width="300" or CSS width: 300px;.

Style a simple card using CSS 1.

Create a normal link using href.

Create a same-page link using href="#id".

Use <br> for a line break.

Create an input and explain placeholder vs value.

Build the final card with minimal help.

Recognition is not mastery. The checkpoint is passed when you can build with the skill.

FAST TRACK · EXPERIENCED CODERS

Know it already? Prove it, then build.

Complete the checkpoint without notes. If it is easy, skip the repetition and build the larger challenge.

Game Gallery Challenge

Create three game cards using the same reusable classes.

Each card needs an image, title, description and play link. Give every game its own unique id.

At the top, create three same-page links that jump directly to each game. Add a player-name input too.

Use CSS 1 to make the three cards visibly consistent.

Finish cleanly and independently? Move on to CSS 2 or begin connecting the card to JavaScript.