Advanced Web Design – SS3 Digital Technologies Lesson Note (Second Term)

JavaScript is a programming language that makes a website dynamic, so that it reacts to what the user does. Responsive design makes a website look good on any screen size, using fluid grids, flexible images and media queries. This note covers JavaScript events, responsive design, media queries, mobile-first design and the hamburger menu.

Behavioural objectives

By the end of the lesson, students should be able to:

• explain what JavaScript is and state three things it can do;
• name common JavaScript events and say when each one happens;
• describe responsive design, fluid grids and flexible images;
• explain what a media query does;
• describe mobile-first design and the hamburger menu.

What is JavaScript?

Up until now, our websites have been “static”. They just sit there like a poster on a wall. To make a website “dynamic”, we use JavaScript (JS).

JavaScript is a programming language that lets a website react to what the user does. Without it, buttons wouldn’t click, maps wouldn’t move, and search bars wouldn’t suggest words as you type.

What can JavaScript do?

• Change content: Show a “Good Morning” message if it’s 8:00 AM and “Good Evening” if it’s 8:00 PM.
• Validation: Tell a user “This password is too short” before they even hit the submit button.
• Animations: Make menus slide out or images fade in.

What are JavaScript events?

JavaScript doesn’t just run all the time. It waits for an event. An event is something that happens to the webpage.

Think of a doorbell. The bell (the code) stays silent until someone presses the button (the event).

Common JavaScript events

• onclick: When a user clicks a button or an image.
• onmouseover: When a user’s mouse hovers over a specific area.
• onkeydown: When the user presses a key on the keyboard.
• onsubmit: When a user tries to send a form.

Simple example

Instead of a boring link, we can make a button that says: onclick=”alert(‘Thanks for subscribing!’)”

What is responsive design?

Years ago, people only browsed the internet on big desktop monitors. Today, most people use phones, tablets or even smartwatches.

Responsive design is the art of making your website look good on any screen size. A responsive website is like water. If you pour it into a cup, it becomes the cup. If you pour it into a bowl, it becomes the bowl. This is why it is also called the “liquid layout”.

How do we make a website responsive?

1. Fluid grids: We stop using fixed measurements like “500 pixels wide” and start using percentages like “50% of the screen”.
2. Flexible images: We tell images never to grow bigger than the screen they are on.

What are media queries?

The most powerful tool for responsive design is the media query. Think of it as a set of “If/Then” rules for your CSS.

You can tell the browser: “If the screen is smaller than a phone, hide the big sidebar and stack the menu buttons on top of each other.”

Example in plain English

• Desktop view: Show three columns of pictures.
• Tablet view: Show two columns of pictures.
• Phone view: Show one big picture at a time so it’s easy to see.

What is mobile-first design?

In the old days, designers built the desktop version first and then tried to “shrink” it for phones. This usually made the mobile version messy.

Modern designers use mobile-first design. We design for the smallest screen first (the hardest part) and then add more features as the screen gets bigger.

What is the hamburger menu?

On a big screen, we have plenty of space for a long menu (Home, About, Services, Contact). On a phone, this would take up the whole screen. We use JavaScript to hide that menu behind a small icon with three lines, called the hamburger menu. When you click it, the menu slides out.

Key points

• JavaScript: Adds interactivity and logic.
• Events: The triggers (clicks, hovers) that make JS run.
• Responsive design: Making the site look good on phones and PCs.
• Media queries: The CSS code that detects screen size.

Evaluation

1. What is JavaScript, and what does it let a website do?
2. State three things JavaScript can do on a webpage.
3. What is an event? Name two common JavaScript events.
4. What is the difference between a fluid grid and a fixed measurement?
5. What is a media query used for?

Assignment

In your notebook, explain responsive design in your own words. Describe how a page of pictures should look on a desktop, a tablet and a phone. Then say why the hamburger menu is useful on a phone.