Advanced Web Design SS3 Digital Technologies Lesson Note

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.

Events – When the Action Happens

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

Think of it like 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 types 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!’)”

Responsive Design (The Liquid Layout)

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 perfect 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.

How do we do it?

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.

Media Queries (The “Secret” CSS Instructions)

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.

Mobile-First Thinking & The Hamburger Menu

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.

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—the Hamburger Menu. When you click it, the menu slides out.

Summary Checklist:

• 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.