English:Web Development with HTML, CSS, and JavaScript
Web Development with HTML, CSS, and JavaScript
Introduction
Web development is the process of creating websites and web applications that people can open in a browser. In this aiMOOC, you will learn the three core technologies of front-end web development: HTML, CSS, and JavaScript. HTML gives a page its structure and meaning, CSS controls its visual presentation and layout, and JavaScript adds behavior and interactivity.
This course is designed for Grades 9–10. You do not need previous programming experience, but you should be comfortable creating files and folders, using a browser, and editing plain text. By the end of the course, you will plan, build, test, and improve a small multi-section website.
Learning goals:
- Explain the different roles of HTML, CSS, and JavaScript.
- Build a valid page structure with meaningful HTML elements.
- Style content with selectors, properties, the box model, and responsive layout techniques.
- Use JavaScript variables, conditions, functions, events, and the Document Object Model to create interaction.
- Test a website for usability, accessibility, and different screen sizes.
- Organize a small web project and reflect on design decisions.
How the Web Works
When you enter a web address, a browser acts as a client. It sends a request across a network to a server, and the server returns resources such as HTML documents, style sheets, JavaScript files, images, and other media. The browser interprets those resources and turns them into the page you see and use. This request-and-response pattern is a basic part of the client-server model.
A web page can be stored locally while you develop it, but published websites are usually hosted on a web server. The browser uses a URL to identify a resource and commonly uses HTTP or HTTPS to request it. HTTPS adds encryption to protect data while it travels between the browser and server.
Front end usually refers to the part of a website that runs in the browser and that users can see or interact with. Back end refers to server-side systems such as application logic, databases, authentication, and APIs. This course focuses on front-end foundations.
A Simple Project Structure
A beginner project might contain an HTML document, a CSS file, a JavaScript file, and an images folder. Keeping files organized makes a project easier to understand and maintain.
my-site/
index.html
styles.css
app.js
images/Use simple lowercase file names, avoid unnecessary spaces, and choose names that describe the content. Relative file paths describe where one project file is located in relation to another.
HTML: Structure and Meaning
HyperText Markup Language is a markup language used to structure web content. HTML uses elements to describe what content means: a heading is marked as a heading, a paragraph as a paragraph, and navigation as navigation. Many elements contain an opening tag, content, and a closing tag. Attributes add information to elements.
A basic document includes a doctype, the root HTML element, metadata in the head, and visible page content in the body. Correct nesting matters because elements form a tree-like structure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My First Site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<p>Created for a school project.</p>
</footer>
</body>
</html>
Semantic HTML
Semantic HTML means choosing elements according to their purpose rather than only according to appearance. Elements such as <header>, <nav>, <main>, <article>, <section>, and <footer> communicate the structure of a document to browsers, developers, search systems, and assistive technologies.
Headings should form a logical outline. Use paragraph elements for paragraphs, list elements for lists, and buttons for actions. Avoid using a generic container when a more meaningful element exists.
Links, Images, Lists, and Forms
Links connect documents and resources. Images need useful alternative text when the image communicates information. Lists group related items. Forms let users enter and submit data.
<nav aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="projects.html">Projects</a>
</nav>
<img src="images/garden.jpg" alt="Students planting herbs in a school garden">
<label for="topic">Project topic</label>
<input id="topic" name="topic" type="text">
<button type="button">Save idea</button>The alt attribute should describe the important purpose or content of an informative image. A form label should be programmatically connected to its input. Clear link text such as "View science projects" is more informative than vague text such as "click here."
CSS: Presentation and Layout
Cascading Style Sheets controls how HTML content is presented. A CSS rule usually contains a selector and one or more property-value declarations. The selector chooses elements; the declarations describe how those elements should look.
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
}
h1 {
font-size: 2rem;
}
.card {
border: 2px solid currentColor;
padding: 1rem;
border-radius: 0.5rem;
}The cascade decides which declarations apply when multiple rules target the same element. Specificity, source order, and inheritance all affect the final result. For beginners, clear class-based styling is often easier to maintain than deeply nested selectors.
The CSS Box Model
Every visible element can be considered a rectangular box. The box model describes the relationship between content, padding, border, and margin. Padding sits around the content, the border surrounds the padding, and margin creates space outside the border.
A useful rule for many projects is:
* {
box-sizing: border-box;
}With border-box, declared width and height include the content, padding, and border. This often makes sizing easier to reason about.
Flexbox, Grid, and Responsive Design
Modern CSS provides powerful layout systems. Flexbox is useful for arranging items mainly along one dimension, such as a row of navigation links. Grid is useful for two-dimensional rows and columns.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}A responsive design adapts to different screen sizes and user settings. Relative units, flexible images, Grid, Flexbox, and media queries can help. Do not design only for one laptop width; resize the browser and test narrow screens.
JavaScript: Behavior and Interaction
JavaScript is a programming language used in browsers to create dynamic behavior. A program can store values in variables, make decisions with conditions, repeat work, call functions, and respond to events.
const userName = "Alex";
const points = 7;
if (points >= 5) {
console.log(userName + " unlocked the next challenge.");
}Use const when a variable binding should not be reassigned and let when reassignment is needed. Choose descriptive variable and function names so that another reader can understand the intention of the code.
Functions
A function groups instructions that perform a task. Functions can receive input through parameters and can return a result.
function calculateTotal(price, quantity) {
return price * quantity;
}
const total = calculateTotal(4, 3);
console.log(total);Breaking a larger problem into small functions can make code easier to test and reuse.
The DOM and Events
The browser represents the HTML document as a hierarchy of objects called the DOM. JavaScript can select elements in this structure, read or change their content, create new nodes, and react to user actions.
An event is a signal that something happened, such as a click, keyboard input, or form submission. Event listeners connect an event to a function.
const button = document.querySelector("#themeButton");
const statusText = document.querySelector("#status");
button.addEventListener("click", function () {
statusText.textContent = "You changed the page state.";
});When you change content with JavaScript, make sure the result remains understandable with a keyboard and assistive technology. Interaction should improve the experience rather than hide important content.
Accessibility and Inclusive Design
Web accessibility means designing and building websites so that people with different abilities and ways of using technology can perceive, understand, navigate, and interact with them. Accessibility is not an optional decoration added at the end; it should guide your choices from the beginning.
Important practices for a beginner project include:
- Use semantic HTML and logical heading levels.
- Give informative images meaningful alternative text.
- Associate each form input with a clear label.
- Make interactive controls usable with a keyboard.
- Keep visible focus indicators.
- Use sufficient contrast and readable text sizes.
- Do not rely on color alone to communicate meaning.
- Test zoom and narrow screen layouts.
A native HTML button already has keyboard behavior that a generic container does not automatically provide. Choosing the correct element often gives you useful accessibility features for free.
Debugging and Testing
Debugging means finding and fixing problems in your code. When a page does not behave as expected, test one assumption at a time.
Use the browser's developer tools to inspect HTML, review applied CSS, read console messages, and experiment with layout. A useful debugging cycle is: reproduce the problem, isolate the smallest relevant part, form a hypothesis, test a change, and verify that the fix did not create another problem.
Check your project in more than one viewport size. Test every link and control. Look for missing files, spelling differences in file names, invalid selectors, and JavaScript errors. Ask a classmate to use the page without instructions; their questions can reveal usability problems that the author did not notice.
Planning a Small Website Project
Before coding, define the purpose, audience, and required content. Sketch the structure with a simple wireframe. Decide which information belongs in the header, navigation, main content, and footer. Then build the HTML structure before spending too much time on decoration.
A practical workflow is:
- Project planning: Define the audience, purpose, pages, and success criteria.
- Wireframe: Sketch the main layout and content hierarchy.
- Semantic HTML: Build the document structure and content.
- CSS: Add readable typography, spacing, color, and responsive layout.
- JavaScript: Add one or two interactions that support the purpose.
- Testing: Check accessibility, usability, links, layout, and console errors.
- Iteration: Improve the project based on evidence and feedback.
Interactive Tasks
Quiz: Test Your Knowledge
Which technology gives a web page its basic structure and meaning? (HTML) (!CSS) (!JavaScript) (!HTTP)
What is the main role of CSS in a front-end project? (Control presentation and layout) (!Store website passwords) (!Create server databases) (!Register domain names)
Which HTML choice is most semantic for the main navigation links? (nav) (!div) (!span) (!b)
Which part of the CSS box model sits outside the border? (Margin) (!Padding) (!Content) (!Selector)
Which CSS layout system is designed for rows and columns? (Grid) (!Console) (!DOM) (!HTTPS)
Which JavaScript keyword is suitable for a binding that will not be reassigned? (const) (!repeat) (!style) (!markup)
What does the DOM represent in a browser? (The document as a hierarchy of objects) (!A password storage system) (!A network cable standard) (!A graphic file format)
What is an event listener used for in JavaScript? (Run code when a specified event occurs) (!Compress images) (!Choose a domain name) (!Replace all HTML headings)
Which practice directly improves form accessibility? (Connect each input to a clear label) (!Remove keyboard focus styles) (!Use color as the only instruction) (!Replace buttons with plain text)
What is the best first response to a reproducible coding bug? (Isolate the problem and test an explanation) (!Rewrite the entire project immediately) (!Ignore console messages) (!Add random code until it changes)
Memory Game
| HTML | Structures and gives meaning to web content |
| CSS | Controls presentation and layout |
| JavaScript | Adds programmable behavior and interaction |
| DOM | Browser representation of the document as objects |
| Selector | Chooses which elements a CSS rule targets |
| Event | Signal that something happened in the browser |
Drag and Drop
| Match the correct terms. | Topic |
|---|---|
| Semantic element | Describes the purpose of content |
| Padding | Space between content and border |
| Media query | Applies CSS based on device or viewport conditions |
| Function | Reusable block of JavaScript instructions |
| Developer tools | Browser features for inspecting and debugging a page |
...
Crossword Puzzle
| Browser | Which program requests, interprets, and displays web pages? |
| Selector | What CSS feature chooses the elements to style? |
| Padding | What space sits between content and border in the box model? |
| Function | What reusable JavaScript block can receive parameters? |
| Semantic | What word describes HTML chosen according to meaning? |
| Debugging | What process finds and fixes problems in code? |
LearningApps
Cloze Text
Open-Ended Tasks
Easy
- Page anatomy poster: Create a one-page poster that labels the roles of HTML, CSS, and JavaScript and includes one example of each.
- Semantic profile page: Build a simple profile or hobby page using headings, paragraphs, links, an image with alternative text, and at least three semantic structural elements.
- Box model experiment: Create one styled card and change its padding, border, and margin. Record what changes visually and explain why.
- Accessibility check: Choose a simple webpage you created and test headings, image text alternatives, labels, keyboard navigation, and visible focus. Write down three improvements.
Standard
- Responsive card gallery: Build a gallery that uses CSS Grid or Flexbox and adapts from a narrow screen to a wide screen without horizontal scrolling.
- Interactive theme control: Add a button that uses JavaScript and an event listener to change a visible page state such as a theme class or status message.
- Peer usability interview: Ask a classmate to use your website for five minutes without instructions. Interview them afterward and turn their feedback into at least three concrete revisions.
- Web project walkthrough video: Record a short screen video in which you show your file structure, explain one HTML decision, one CSS decision, one JavaScript interaction, and one accessibility improvement.
Advanced
- Multi-section information site: Plan and build a polished information website for a school or community topic with semantic HTML, responsive CSS, accessible media, and purposeful JavaScript.
- DOM data interface: Create a small interface that reads user input and uses the DOM to add, update, or remove items while keeping controls keyboard accessible.
- Cross-device test report: Test one project at several viewport sizes and, if possible, in more than one browser. Document problems, likely causes, fixes, and evidence that the fixes worked.
- Design system mini-project: Create a small reusable set of CSS classes or custom properties for typography, spacing, buttons, and cards. Apply it consistently and justify your design choices.
Learning Assessment
- Architecture explanation: Explain how a browser, server, HTML file, CSS file, and JavaScript file work together when a user opens and interacts with a webpage.
- Code reasoning: Given a small page with one structural, one styling, and one interaction problem, identify the likely cause of each and describe a justified fix.
- Responsive redesign: Take a fixed-width page and redesign it for narrow and wide screens, then explain which CSS techniques made the layout more flexible.
- Accessibility transfer: Evaluate a page that was not created in this course and recommend improvements to semantics, keyboard use, labels, image alternatives, and contrast.
- Project defense: Present your final website and defend at least five design or coding decisions with reference to purpose, audience, maintainability, responsiveness, accessibility, or usability.
- Debugging demonstration: Reproduce one real bug in your project, show how you isolated it, and provide evidence that your final fix solved the problem without breaking another feature.
Evidence of Learning
Important evidence of learning can include:
- Knowledge: You can explain the roles of HTML, CSS, JavaScript, browsers, servers, the DOM, events, and the CSS box model.
- Skills: You can structure content semantically, style a responsive layout, write and debug simple JavaScript, inspect a page with developer tools, and test basic accessibility.
- Products: You can produce a working website, a wireframe, readable source files, a test record, and a short reflection on design decisions.
- Reasoning: You can connect a visible problem to a likely cause in markup, styling, scripting, file paths, or browser behavior and test your explanation.
- Transfer: You can apply the same principles to a new topic, a new page design, or a website you did not originally create.
- Collaboration: You can use peer feedback constructively and explain which suggestions you accepted, modified, or rejected and why.
OERs on the Topic
For reference and further study, explore the English Wikipedia overview of web development:
You can also continue with HTML, CSS, JavaScript, Document Object Model, Responsive web design, Web accessibility, HTTP, and Web browser.
Linked Learning Areas
This topic connects Computer science, Information technology, Digital literacy, Media literacy, Graphic design, User experience design, and Software engineering. It also supports communication skills because you must organize information for a real audience, write clear interface text, explain decisions, and respond to feedback.
aiMOOC Projects
MOOCwiki · Deutsch
Nach dem Lernen ist vor dem Lernen
Entdecke direkt den nächsten Lernkurs. Weitere Inhalte erscheinen, wenn Du weiter nach unten scrollst.
Zur MOOCwiki-HauptseiteMediathek
Mediathek
Mediathek wird aus dem Wiki geladen ...
Keine passenden Inhalte gefunden. Bitte ändere Suche oder Filter.