HTML, CSS & JavaScript lessons

Basic elements

Common elements include headings, paragraphs, and links.

<h1> is the largest heading, <p> is for text, and <a> creates a link.

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<a href="https://uni-sine.com">This is a link</a>

Elements tell the browser what kind of content is being displayed.

Practice: Create a H2 tag

Practice: create a H2 tag in some pre-made html with a single line text box for the user to code in

Nested elements

Elements can go inside each other, this is called nesting.

For example, a <div> can hold text, images, and links together.

<div>
    <p>This is a paragraph</p>
    <a href="https://uni-sine.com">This is a link</a>
</div>

Proper nesting makes your HTML structured and easier to style.

Practice: Nest elements

Drag HTML elements into the correct nested order to build a navbar.

CSS Syntax

CSS styles elements by selecting them and applying rules.

A rule has a selector, a property, and a value.

p {
    color: red;
}

The color can be of different types for more customization, such as HSL, Hex and RGB values as you see above.

Box Model

Every element is a box made of content, padding, border, and margin.

Padding adds space inside the element, margin adds space outside.

Borders sit between padding and margin.

Practice: Box model

Adjust each box model property to match the target using the correct CSS unit.

Display flex options

Flexbox arranges elements along a row or column.

display: flex; makes children line up in one direction.

Options like justify-content and align-items control spacing.

Display block options

Block elements take the full width of the page.

Examples are <div> and <p>.

Inline elements, like <span>, only take the space they need.

Practice: Organise elements

Pick the correct CSS property to arrange elements using flexbox.

JavaScript: purpose

JavaScript makes web pages interactive.

It can change HTML, update styles, and respond to user actions.

Without JavaScript, most websites would be static.

Example code snippet

A function groups code that runs when called.

It has a name, parentheses (), and curly braces {}.

Inside, you write actions like showing text or changing elements.

function greet() {
    document.getElementById("demo").innerHTML = "Hello!";
}

Example loop function

Loops repeat actions multiple times.

A for loop runs until a condition is no longer true.

Loops can be used to create or change many elements at once.

for (let i = 0; i < 5; i++) {
    console.log("Count: " + i);
}

Practice: Complete the code

Drag code snippets into the function to produce the target output.