Development
Web Development with HTML, CSS & JavaScript
Structure a page, style it, and add the behaviour a browser can run.
Web Development with HTML, CSS & JavaScript builds a page from the three languages the browser already understands. You will structure content, lay it out, and add small interactions. By the end you can read a simple page and change it on purpose.
Course syllabus
01. HTML
- A page with meaning
Headings, paragraphs, links, images, and forms.
- The document starts with a doctype
A page the browser can read as HTML, not a mystery file.
- A heading and a paragraph
The title of the section, then the words.
- A link with a real address
The text says where it goes. The href is that place.
- An image with alt text
Words for when the picture does not load, and for someone who cannot see it.
- A list when you have a list
Bullets or numbers, not paragraphs that pretend.
- A form that asks for one thing
A label, a field, and a button.
- Look at the page without CSS
If it is nonsense now, CSS will not save it.
02. Document outline
- Sections and a document outline
Header, main, and footer so the page has a shape.
- One h1
The page has one subject.
- Header is not a heading
The banner of the site, and the heading of the article, are different.
- Main wraps the content
The thing the page is for, not the menu.
- A nav of real links
The places a person can go, in a list.
- A footer with the small print
A contact line or a copyright. Not a second article.
- A section with its own heading
A block you could move to another page and still understand.
- The outline in the headings alone
Read only h1, h2, h3. They should tell the page.
03. CSS selectors
- Selectors, colour, and type
Style the elements you already wrote.
- A rule is a selector and declarations
Who it applies to, and what changes.
- Colour and background
Text that you can still read.
- A font stack
The typeface you want, and a fallback the computer has.
- A class when the element is not enough
A name for a job, used on the elements that do that job.
- Specificity without a fight
A class beats an element. An id is rarely worth it here.
- The cascade in one example
Two rules, and which one wins, and why.
- A stylesheet linked from the head
The HTML stays the content. The CSS stays the look.
04. Layout
- A box has margin, border, and padding
Outside space, the line, and space inside.
- Block and inline
A paragraph stacks. A link sits in the line.
- Flexbox for a row
Items in a line, with a gap you choose.
- A column with flex-direction
The same idea, stacked.
- Gap instead of margins on every child
One number on the parent.
- Align the items
Centre, start, or space between. Pick the one the layout needs.
- A card as a flex column
Image, title, text, button, in that order.
- Width in a unit you understand
Percent of the parent, or a max-width so a line stays readable.
05. A phone
- Layout that fits a phone
Flexbox and a layout that does not break when the window shrinks.
- A viewport meta tag
The phone should not pretend the page is a desktop and zoom out.
- A media query
A rule that applies only when the window is narrow.
- Stack the row on a small screen
Side by side on a wide window, one under another on a phone.
- Tap targets
A button big enough to hit with a thumb.
- A picture that does not overflow
Max-width so it stays inside the column.
- Test by resizing the window
Drag it. Do not only imagine the phone.
- One layout bug you fix on purpose
The thing that stuck out of the screen, and the rule that pulled it back.
06. JavaScript values
- A script at the end of the body
The HTML exists before the script looks for it.
- A variable for a value you will reuse
A number or a string, named.
- A function for a job
A block you can run when something happens.
- If, in the page
A branch when a value is missing.
- An array of items you will show
Three strings, ready for a list.
- Console is for you
A log while you work. It is not the page.
- A syntax error stops the script
The console tells you the line. The page stays as HTML.
- Keep the script in its own file
The page links it. The logic is not pasted in the middle of a paragraph.
07. Events
- Selecting elements and events
A click that changes the page.
- querySelector
Find the button by a selector you already used in CSS.
- A click listener
The function that runs when the button is pressed.
- Change the text
textContent, so you set words, not HTML from a stranger.
- Read an input
The value of the field at the moment of the click.
- Prevent a form from reloading
If you are handling the submit, say so.
- A class to show and hide
Toggle a class. Do not rewrite the stylesheet from the script.
- Null when the element is missing
Check that you found it before you add the listener.
08. A small page
- A small interactive page
Put structure, style, and behaviour in one project.
- The HTML of the project
A heading, a field, a button, and an empty list.
- The CSS of the project
The column, the field, and the list, readable on a phone.
- Add an item to the list
The field's text becomes a new item.
- Ignore a blank item
An empty string is not an entry.
- Clear the field after a successful add
The next item starts from an empty box.
- Style the new item with the same class
The script does not invent a look.
- Explain the three files
What HTML owns, what CSS owns, and what the script is allowed to change.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.