English:Web Design with HTML and CSS
Web Design with HTML and CSS
Introduction
Web design with HTML and CSS is the process of planning, building, styling, testing, and improving web pages. In this aiMOOC, you will learn how HTML gives a page its structure and meaning, while CSS controls its appearance and layout. You will also learn about responsive design, accessibility, browser developer tools, and responsible publishing.
This course is designed for Grades 7–8. You do not need previous coding experience. By the end, you should be able to create a small website, explain how its code works, test it on different screen sizes, and improve it for different users.
A useful way to think about a web page is this: HTML answers questions such as “What is this content?” and CSS answers questions such as “How should this content look and be arranged?” JavaScript can add behavior and interactivity, but this course focuses on the foundation: HTML and CSS.
.svg){kind=link}
Learning Goals
After working through this aiMOOC, you can:
- HTML structure: Build a valid basic document with headings, paragraphs, links, lists, images, and semantic page sections.
- CSS styling: Use selectors, properties, values, colors, spacing, borders, and typography.
- CSS layout: Apply the box model and use Flexbox or Grid for simple layouts.
- Responsive web design: Make layouts adapt to phones, tablets, and larger screens.
- Web accessibility: Add text alternatives, useful headings, readable contrast, and keyboard-friendly structure.
- Browser developer tools: Inspect elements, test CSS changes, and investigate layout problems.
- Digital citizenship: Publish safely, respect copyright and licenses, and avoid sharing private information.
How the Web Page Fits Together
When you open a website, a browser reads files and turns them into a visual page. An HTML file describes the content and structure. A CSS file can be linked to the HTML file and used to control design. Keeping structure and presentation separate makes a project easier to understand and maintain.
A simple project can begin with two files in the same folder:
my-site/ index.html styles.css
The HTML file links to the stylesheet:
<link rel="stylesheet" href="styles.css">
If the file name or path is wrong, the browser cannot load the stylesheet. Careful file naming and folder organization are therefore part of web design.
HTML: Structure and Meaning
HTML stands for HyperText Markup Language. It is a markup language used to structure web content. HTML elements can describe headings, paragraphs, links, images, navigation areas, articles, and other parts of a document. Meaningful elements are called semantic HTML because they describe the role of the content, not just its appearance.
A Basic HTML Document
A small page can look like this:
<!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>
<a href="about.html">About this project</a>
</main>
<footer>
<p>Created for a class project.</p>
</footer>
</body>
</html>
The <!doctype html> declaration tells the browser to use modern HTML parsing. The lang="en" attribute states the language of the page. The <head> contains information about the document, while the <body> contains content shown on the page.
The viewport meta element helps a page use the device width correctly on mobile screens. It does not make a layout responsive by itself, but it supports responsive design.
Elements, Tags, and Attributes
Most HTML elements have an opening tag, content, and a closing tag:
<p>This is a paragraph.</p>
Attributes add information to an element:
<a href="https://example.org">Visit the example</a> <img src="forest.jpg" alt="A green forest beside a lake">
In the link, href gives the destination. In the image, src gives the image location and alt provides a text alternative when the image carries useful information.
Semantic Page Structure
Instead of putting every section inside a generic container, use semantic elements when their meaning fits:
- Header element: Introductory content for a page or section.
- Navigation: A major group of navigation links.
- Main element: The main content of the document.
- Article element: A self-contained piece of content.
- Section element: A thematic section of content, usually with a heading.
- Footer element: Closing information for a page or section.
Good semantic structure helps people understand a page and can improve accessibility because browsers and assistive technologies can recognize important page regions.
CSS: Style and Presentation
CSS is a style sheet language used to describe how documents are presented. A CSS rule usually contains a selector and one or more declarations. Each declaration contains a property and a value.
p {
color: navy;
font-size: 1.1rem;
}
Here, p is the selector, color and font-size are properties, and navy and 1.1rem are values.
The familiar HTML5 and CSS3 badges are useful historical symbols. Modern HTML is maintained as a living standard, and CSS is developed as a collection of modules rather than as one single “CSS3 version.”
Selectors
Selectors decide which elements receive a style.
h1 {
color: darkgreen;
}
.notice {
border: 2px solid black;
}
#main-title {
text-align: center;
}
The first rule selects every <h1>. The class selector .notice selects elements with class="notice". The ID selector #main-title selects the element whose ID is main-title. Classes are usually more reusable than IDs for styling groups of elements.
The Cascade
The word cascading matters. More than one CSS rule may apply to the same element. The browser resolves conflicts using factors that include origin, importance, specificity, and source order. At this level, a useful habit is to keep selectors simple and avoid unnecessary conflicts.
Colors and Typography
CSS can control text color, background color, font family, size, line height, and alignment. Design choices should support readability.
body {
font-family: Arial, sans-serif;
line-height: 1.5;
color: #1f2937;
background: #ffffff;
}
Do not rely on color alone to communicate important information. Make sure text and its background have enough contrast, and avoid making body text too small.
The Box Model
Every visible element is laid out as a box. The CSS box model includes:
- Content: The text, image, or other material inside the element.
- Padding: Space between the content and the border.
- Border: The line around the padding and content.
- Margin: Space outside the border.
.card {
width: 260px;
padding: 16px;
border: 2px solid #333;
margin: 20px;
}
If a layout feels too crowded, padding may help inside a component. If separate components need more space between them, margin may help.
CSS Can Transform Presentation
One strength of CSS is that the same structured content can be presented in very different visual ways.
A good redesign is not only decorative. It should make information easier to scan, read, navigate, and use.
Layout with Flexbox and Grid
Modern CSS includes powerful layout systems.
Flexbox is mainly one-dimensional: it arranges items along a row or a column and makes alignment and space distribution easier.
nav ul {
display: flex;
gap: 1rem;
list-style: none;
}
CSS Grid is two-dimensional: it is designed for arranging content in rows and columns.
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
Flexbox and Grid are not rivals. You can use Flexbox for a navigation bar or row of controls and Grid for a larger page or gallery layout.
Responsive Web Design
A responsive website adapts to different screen sizes and device conditions. A layout that works on a wide desktop should also remain readable and usable on a narrow phone.
Helpful responsive techniques include flexible layouts, flexible images, relative units, and media queries. Flexbox and Grid already support many flexible layouts.
img {
max-width: 100%;
height: auto;
}
@media (min-width: 700px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
}
}
A media query applies styles only when a condition is true. Here, the gallery changes to three columns when the viewport is at least 700 CSS pixels wide.
Mobile-First Thinking
A practical approach is to begin with a clear single-column layout that works on small screens, then add enhancements for wider screens. This is often called mobile-first design. It encourages you to focus first on essential content and simple layouts.
Do not design for only one exact phone or laptop size. Resize the browser window and test several widths. Watch for text that becomes too small, images that overflow, or navigation that no longer fits.
Accessibility: Designing for More People
Web accessibility means designing and developing websites so that people with disabilities can perceive, understand, navigate, and interact with them. Accessibility is part of good design, not an extra decoration.
For a beginner website, check these points:
- Alternative text: Give informative images useful
alttext; use empty alt text for images that are purely decorative. - Heading: Use headings in a meaningful order so the page has a clear structure.
- Color contrast: Make text readable against its background.
- Keyboard accessibility: Make sure links and controls can be reached and used with a keyboard.
- Link text: Use labels that explain the destination better than vague phrases such as “click here.”
- Form label: If you create a form, connect labels clearly with their controls.
Accessibility benefits many people, including users with temporary injuries, small screens, bright sunlight, slow connections, or different ways of interacting with technology.
Testing and Browser Developer Tools
Professional web designers do not simply write code once and hope it works. They test, inspect, and revise.
Browser developer tools let you inspect HTML, see which CSS rules apply, temporarily change styles, and examine layout problems. Temporary changes in developer tools normally do not edit your saved file, so copy useful fixes back into your project.
A useful debugging routine is:
- Reproduce the problem: Describe exactly what looks or behaves incorrectly.
- Inspect the element: Check its HTML, classes, dimensions, and active CSS rules.
- Test one change: Change one property at a time so you know what caused the result.
- Check several sizes: A fix for one screen width can create a problem at another width.
- Save the real file: Move the successful change into your HTML or CSS and reload the page.
A Safe and Responsible Web Design Workflow
Creating for the web also involves digital citizenship. Before you publish a school project:
- Privacy: Do not post private contact details, passwords, home addresses, schedules, or other sensitive information.
- Copyright: Use your own media or material you have permission to reuse, and follow the license conditions.
- Attribution: Credit creators when a license requires it.
- Accuracy: Check names, facts, links, and captions before publishing.
- Respectful design: Avoid misleading buttons, hidden traps, harmful stereotypes, and content that excludes users.
A strong workflow is plan → structure → style → test → improve → publish. Good web design grows through revision.
Mini Project: Build a Two-Section Website
Create a page about a hobby, school club, local place, book, scientific topic, or another safe topic. Your page should contain a header, navigation links, a main area with at least two sections, one image with suitable alternative text, and a footer. Add an external stylesheet and use a class selector, spacing, colors, and at least one Flexbox or Grid layout.
Then test your page at a narrow and wide width. Ask a classmate to find one piece of information and one link without help. Use the feedback to make one structural improvement and one visual improvement.
Interactive Tasks
Quiz: Test Your Knowledge
What is HTML mainly used for in a web page? (Structuring and describing content) (!Choosing only the page colors) (!Connecting a computer to Wi-Fi) (!Editing photographs)
What is CSS mainly used for? (Controlling presentation and layout) (!Storing passwords) (!Creating internet connections) (!Replacing all HTML)
Which CSS part chooses the HTML elements that will be styled? (Selector) (!Value) (!Browser tab) (!File path)
What does padding create in the CSS box model? (Space between content and border) (!Space outside the margin) (!A link to another page) (!A new HTML document)
Which layout system is mainly designed for arranging items along one row or one column? (Flexbox) (!Grid only) (!HTML headings) (!Image metadata)
What is a main goal of responsive web design? (Keeping a site usable across different screen sizes) (!Making every page exactly the same width) (!Removing all images from mobile devices) (!Using only one font size)
Why is alternative text important for informative images? (It provides a text alternative for the image purpose or information) (!It automatically makes the image smaller) (!It changes the image file type) (!It creates a CSS class)
Which HTML element represents the main content of a document? (main) (!style) (!meta) (!titlebar)
What can browser developer tools help you do? (Inspect HTML and test CSS changes) (!Publish private passwords safely) (!Replace the need for testing) (!Guarantee that every website is accessible)
Which workflow best supports careful web design? (Plan structure style test improve publish) (!Publish first and test never) (!Style without content or goals) (!Copy everything without checking licenses)
Memory Game
| HTML | Markup language used to structure web content |
| CSS | Style sheet language used to control presentation |
| Selector | Pattern that chooses elements to style |
| Property | CSS setting such as color or margin |
| Padding | Space between content and border |
| Margin | Space outside the border |
Drag and Drop
| Match the correct terms. | Topic |
|---|---|
| HTML | Page structure and meaning |
| CSS | Visual presentation and layout |
| Flexbox | One-dimensional arrangement |
| Grid | Two-dimensional arrangement |
| Alt text | Text alternative for an image |
Crossword Puzzle
| Markup | What kind of language is HTML? |
| Selector | What part of a CSS rule chooses elements? |
| Padding | What space lies between content and border? |
| Browser | What program renders a web page for a user? |
| Contrast | What visual difference helps text stand out from its background? |
| Responsive | What word describes a design that adapts to screen size? |
LearningApps
Cloze Text
Open-Ended Tasks
Easy
- Personal Web Page: Create a one-page HTML profile about a safe topic such as a hobby or favorite subject, using one heading, two paragraphs, one list, and one link.
- HTML Structure Sketch: Draw a wireframe for a page and label where the header, navigation, main content, sections, and footer would go before you write code.
- CSS Color Lab: Create three readable color combinations for text and background, test them on a short paragraph, and explain which one is easiest to read.
- Browser Inspector Hunt: Open a school-safe website, inspect one heading and one image with browser developer tools, and write down the HTML elements and CSS properties you can identify.
Standard
- Responsive Card Gallery: Build a small gallery of cards that changes its column layout between narrow and wide screens using Grid or Flexbox.
- Accessible Image Page: Create a page with three images, write purposeful alternative text for informative images, identify any decorative image, and explain your choices.
- Flexbox Navigation: Design a navigation bar with Flexbox, test it at several widths, and revise it so the links remain readable and easy to select.
- Website User Interview: Ask a classmate to use your page without instructions, interview them about what was clear or confusing, and make two changes based on the feedback.
Advanced
- Three-Page Website: Build a three-page website for a school club or imaginary organization with shared navigation, one external stylesheet, consistent design, and responsive layouts.
- CSS Design Experiment: Keep the same HTML but create two different CSS stylesheets, compare how presentation changes the reading experience, and report which design choices improve usability.
- Accessibility Field Study: Review a public or school website for headings, image alternatives, keyboard use, and contrast, record evidence, and propose three realistic improvements.
- Web Design Tutorial Video: Produce a short screen-recorded tutorial that teaches one HTML or CSS technique, shows the code, demonstrates the result, and explains one common mistake.
Learning Assessment
- Structure and Semantics Assessment: Given a page made mostly from generic containers, redesign its structure with suitable semantic HTML elements and justify each change.
- CSS Debugging Assessment: Diagnose a page whose stylesheet does not load or whose selector does not match, explain the cause, and show the smallest correction.
- Box Model Reasoning: Compare two card designs with different padding and margins, predict how each change affects spacing, and then test your prediction in the browser.
- Responsive Design Transfer: Adapt a fixed two-column desktop layout for a narrow phone screen and explain why your layout choices preserve readability and navigation.
- Accessibility Decision Task: Review an image, heading structure, color combination, and link label, decide which choices may create barriers, and propose specific improvements.
- Design Review Presentation: Present your website to a small audience, explain one HTML decision and one CSS decision, demonstrate testing at two screen widths, and defend one revision made from feedback.
Evidence of Learning
Knowledge: You can explain the different roles of HTML and CSS, describe semantic structure, identify the parts of a CSS rule, explain the box model, and distinguish Flexbox from Grid.
Skills: You can create linked HTML and CSS files, write selectors and declarations, build simple layouts, resize and test a page, inspect code with browser tools, and make basic accessibility improvements.
Products: Your evidence can include a wireframe, an HTML page, an external stylesheet, a responsive layout, an accessibility review, screenshots of tests, and a revised final website.
Transfer: You can apply the same principles to a new topic, choose suitable semantic elements, adapt a layout to a different device, explain a design decision, and improve a site after user feedback.
OERs on the Topic
You can continue learning with these reliable open educational resources:
- MDN: Your first website
- MDN: Structuring content with HTML
- MDN: CSS layout
- W3C Web Accessibility Initiative tutorials
- W3C WAI Easy Checks
Linked Learning Areas