Web Design II: How to Create Simple Websites Using HTML, CSS, and JavaScript
INTRODUCTION
Think about the last time you visited a website — maybe it was checking your school's result portal, reading news on Vanguard, or watching a video on a Nigerian entertainment platform. Someone built that website. And that someone once sat exactly where you are right now, learning the basics.
Web Design II is your opportunity to move beyond simply knowing what a website looks like and actually start building one yourself. In today's Nigeria, where digital skills are increasingly valued by employers, tech startups, and even government agencies, knowing how to design a functional website is no longer just a bonus — it is fast becoming a necessity.
This lesson builds on everything you covered in Web Design I. Here in SSS 2, you will go deeper into HTML, start controlling how pages look with CSS, and get your first real taste of interactivity through JavaScript. Whether you dream of becoming a software developer, a digital entrepreneur, or simply want to build a personal portfolio page someday, this topic is one of the most practical and exciting things you will study in Computer Studies this term.
Let us get started.
LEARNING OBJECTIVES
By the end of this lesson, students should be able to:
- Define and explain the roles of HTML, CSS, and JavaScript in web development
- Create a simple, structured webpage using deeper HTML elements and attributes
- Apply CSS styles to control the appearance of a webpage including fonts, colors, and layout
- Write basic JavaScript code to add simple interactivity to a webpage
- Identify best practices for building clean, accessible, and user-friendly websites
- Demonstrate an understanding of how these web technologies work together in a real browser
WHAT IS WEB DESIGN II?
In Web Design I, you were introduced to the idea that websites are built using code. You learned that HTML (HyperText Markup Language) is the foundation of every webpage. You explored tags like headings, paragraphs, images, and links.
Web Design II takes things further. Here, the focus shifts to three questions:
— How do we make a webpage more complete and structured using deeper HTML? — How do we make it look attractive using CSS? — How do we make it do things when a user clicks or types using JavaScript?
These three technologies — HTML, CSS, and JavaScript — are the building blocks of almost every website you visit today. Web developers in Lagos, Abuja, Port Harcourt, and around the world use these same tools professionally.
BUILDING A STRONGER FOUNDATION
Basic HTML taught you to use tags like h1, p, img, and a. Deeper HTML means understanding more tags, using attributes properly, and organizing your page in a way that makes sense — both to the browser and to the reader.
Here are some important HTML elements you will work with at this level:
Semantic HTML Elements
Semantic elements are tags that describe the meaning of the content inside them. Instead of putting everything in a div tag, semantic HTML uses tags that tell the browser and search engines exactly what each section is about.
— header: Contains the top section of a page, usually a logo and navigation — nav: Holds the navigation menu (links to other pages) — main: Contains the primary content of the page — section: Groups related content together — article: Used for independent content like a blog post or news story — footer: Sits at the bottom of the page — contact info, copyright, links — aside: Used for sidebars or content that supports the main page
Real-Life Nigerian Example: Imagine you are building a website for your school — let us call it Greenfield Secondary School, Enugu. Your page would have a header with the school name and logo, a nav bar with links to About, Departments, and Contact pages, a main section showing news and upcoming events, and a footer with the school's address and phone number. Each of these would use the semantic tags listed above.
HTML Forms and Inputs
Forms allow users to type and submit information. You see them every day on sites like JAMB's portal or WAEC's result checker.
Key form elements include:
— form: The container for the entire form — input: Text boxes, radio buttons, checkboxes, submit buttons — label: Describes what an input field is for — textarea: A larger box for longer messages — button: A clickable button to submit or trigger an action — select and option: Creates a dropdown list
Example: A simple contact form on a school website would use input fields for the student's name, email address, a textarea for their message, and a submit button.
HTML Tables
Tables organize data into rows and columns. They are useful for displaying timetables, results, or price lists.
Key table tags:
— table: The main container — tr: A table row — th: A header cell (usually bold) — td: A regular data cell
CSS — MAKING YOUR WEBSITE LOOK GOOD
What Is CSS?
CSS stands for Cascading Style Sheets. While HTML builds the structure of a page, CSS controls how it looks — colors, fonts, spacing, layout, and more. Without CSS, websites would just be plain black text on a white background.
Think of HTML as the bricks and walls of a building, and CSS as the paint, tiles, and decoration.
Three Ways to Add CSS
There are three ways to add CSS to an HTML page:
- Inline CSS — Written directly inside an HTML tag using the style attribute. Example: style="color: red;"
- Internal CSS — Written inside a style tag in the head section of the HTML file. Best for single pages.
- External CSS — Written in a separate .css file and linked to the HTML file. This is the professional and recommended method for larger websites.
Common CSS Properties Every SSS 2 Student Should Know
Color and Background: — color: changes the text color — background-color: changes the background of an element — background-image: sets an image as a background
Text Styling: — font-family: changes the font (e.g., Arial, Georgia) — font-size: controls how large the text appears — font-weight: makes text bold or lighter — text-align: aligns text to the left, right, or center
Spacing and Size: — margin: space outside an element — padding: space inside an element, between content and border — width and height: sets the size of an element — border: adds a border around an element
Layout Basics: — display: controls how elements appear (block, inline, flex) — position: places elements in specific spots — float: allows text to wrap around images
CSS and Nigerian Web Context
When building a website for a Nigerian audience, CSS choices matter. For example:
— Many users browse on mobile phones with smaller screens. CSS helps you adjust layout for different screen sizes (this is called responsive design). — Using readable font sizes (at least 16px) ensures elderly users and people on small screens can read comfortably. — Bright, high-contrast colors help visibility in outdoor environments where screens are viewed under sunlight.
Introduction to Responsive Design
Responsive design means your website automatically adjusts its layout depending on whether it is viewed on a phone, tablet, or computer. In Nigeria, where mobile internet usage is very high, this is extremely important.
You achieve this using CSS media queries. A media query tells the browser: "If the screen is smaller than a certain width, apply these styles instead."
Example concept: On a wide computer screen, a school website might show a three-column layout. On a phone screen, the same page would stack everything into a single column for easy scrolling. This adjustment happens automatically because of CSS.
JAVASCRIPT — BRINGING YOUR WEBSITE TO LIFE
What Is JavaScript?
JavaScript is a programming language that runs in the browser and makes webpages interactive. While HTML provides content and CSS provides style, JavaScript adds behavior.
Examples of what JavaScript can do: — Show a pop-up message when a user clicks a button — Validate a form before it is submitted (e.g., checking that an email address looks correct) — Change content on a page without reloading it — Build simple calculators, quizzes, and image sliders
Basic JavaScript Concepts
Variables: A variable stores a piece of information. You declare it using the word let or var. Example: let studentName = "Amaka";
Functions: A function is a block of code that performs a specific task. You define it once and call it whenever you need it.
Events: Events are things that happen on a page — a click, a key press, or a page loading. JavaScript listens for these events and responds to them.
The Document Object Model (DOM): The DOM is how JavaScript sees and controls the HTML page. JavaScript can find any element on a page and change it.
Output Methods: JavaScript can display results in different ways: — alert(): shows a pop-up box — console.log(): prints a message to the browser's developer console (very useful for testing) — innerHTML: changes the text inside an HTML element
A Simple JavaScript Example (Conceptual)
Imagine a button on your school's homepage that says "Click to See Today's Quote." When a student clicks that button, a motivational message appears below it. This is JavaScript at work — the button has a click event attached to it, and the event triggers a function that changes the text on the page.
This kind of simple interactivity is exactly what SSS 2 students are expected to understand and create.
PRACTICAL APPLICATIONS IN NIGERIA
How Web Design Skills Are Used in Real Life in Nigeria
-
School and University Portals: Institutions like the University of Lagos, LASU, and many federal polytechnics run their own web portals for student registration and results. These are built with the exact technologies you are learning.
-
Small Business Websites: A trader at Alaba International Market or a fashion designer in Aba can use a simple website to attract customers nationwide. Many small business owners in Nigeria are now hiring web designers or building basic sites themselves.
-
NGO and Community Websites: Non-governmental organizations working in areas like education, health, and agriculture in states like Borno, Kogi, and Rivers need simple websites to publish information and attract donors.
-
Personal Portfolio Pages: Students studying Computer Science, Graphics Design, or Media at Nigerian universities often build personal portfolio websites to show their work to potential employers.
-
Government Information Sites: Federal and state government agencies use websites to publish policies, budgets, and public notices. Web designers help maintain these platforms.
ADVANTAGES AND DISADVANTAGES OF WEB DESIGN SKILLS
Advantages
— High Employability: Web design is one of the most in-demand digital skills in Nigeria today, with companies constantly seeking qualified developers. — Low Startup Cost: You can start building websites using just a laptop and a free text editor. No expensive equipment is required. — Freelance Opportunities: Web designers can work independently, taking on projects from clients across Nigeria and internationally on platforms like Upwork and Fiverr. — Creative Expression: Web design combines technical skill with creativity, giving students a platform to express themselves. — Foundation for Advanced Learning: Learning HTML, CSS, and JavaScript opens the door to frameworks like React, backend development, and mobile app development.
H2: Disadvantages
— Constant Learning Required: Web technologies change rapidly. Designers must keep updating their skills to stay relevant. — Time-Consuming Projects: Building a well-designed website takes significant time and attention to detail. — Browser Compatibility Issues: Websites may display differently across browsers like Chrome, Firefox, and Safari, requiring extra testing and adjustments. — Requires Consistent Internet Access: Learning and testing web design sometimes requires internet access, which can be a challenge in some parts of Nigeria.
SAFETY AND ETHICAL CONSIDERATIONS IN WEB DESIGN
H2: Responsible Web Design — What Every Student Must Know
As a web designer, you have the power to create content that reaches thousands of people. With that power comes responsibility.
Copyright and Originality: Never copy another person's code, images, or written content and present it as your own. Always use images that are free for use (royalty-free) or create your own. Platforms like Unsplash and Pixabay offer free images.
Privacy: If your website collects personal data — such as names, email addresses, or phone numbers — you are responsible for keeping that data safe. Never share users' information without their permission.
Accessibility: Design websites that can be used by everyone, including people with disabilities. This means using descriptive text for images (alt text), maintaining good contrast between text and background colors, and using clear, readable fonts.
Cybersecurity Awareness: Even as a student, understand that poorly built websites can be exploited by hackers. Never include real sensitive information in practice websites, and be aware of basic web security principles as you advance.
Avoiding Misinformation: If you build a website that publishes news or opinions, ensure the information is accurate and responsible. Spreading false information online has serious social consequences, particularly in Nigeria where misinformation has been linked to real community tensions.
CLASSROOM AND HOME ACTIVITIES
Try These Yourself
Activity 1 — Build a Personal Profile Page: Using HTML and CSS, create a simple webpage about yourself. Include your name in a large heading, a short paragraph about your interests, a list of your favorite subjects, and style the page with at least three different CSS properties (background color, font size, and text alignment).
Activity 2 — Style a School Timetable: Create an HTML table that represents your class timetable for the week. Use CSS to add borders, alternate the row background colors, and center the table on the page.
Activity 3 — JavaScript Alert Button: Add a button to your HTML page with the label "Welcome." Write a JavaScript function so that when the button is clicked, a pop-up message appears that says "Welcome to [Your School Name]!"
Activity 4 — Responsive Layout Practice: Build a two-column webpage layout using CSS. Then write a simple media query so that on smaller screen sizes (below 600px), the two columns stack into a single column. Preview your page on a mobile phone or using your browser's developer tools to confirm it works.
ASSESSMENT QUESTIONS
Test Your Understanding
PART A — Objective Questions (Circle or write the correct answer):
-
Which HTML tag is used to define the navigation section of a webpage? a) section b) nav c) aside d) header
-
Which CSS property is used to change the text color of an element? a) background-color b) font-size c) color d) text-align
-
What does CSS stand for? a) Computer Style Sheets b) Cascading Style Sheets c) Creative Style System d) Central Style Syntax
-
Which JavaScript method is used to display a pop-up message in the browser? a) console.log() b) innerHTML c) alert() d) document.write()
-
What is responsive web design? a) A design that uses many colors b) A design that automatically adjusts for different screen sizes c) A design that only works on desktop computers d) A design that requires JavaScript to function
PART B — Theory Questions (Answer in full sentences):
-
Explain the difference between HTML, CSS, and JavaScript. Use a real-life Nigerian example in your answer.
-
What is semantic HTML? List four semantic HTML elements and explain what each one is used for.
-
A student in your class says, "JavaScript is not important because HTML is enough to build a website." Do you agree or disagree? Give three reasons to support your answer.
SUMMARY
Key Points From This Lesson
— Web Design II focuses on three core technologies: deeper HTML for structure, CSS for styling, and JavaScript for interactivity. — Deeper HTML includes semantic elements (header, nav, footer, section), forms, tables, and more meaningful content organization. — CSS allows you to control colors, fonts, spacing, layout, and even make pages respond to different screen sizes using media queries. — JavaScript adds behavior to webpages through variables, functions, events, and DOM manipulation. — Responsive design is critical in Nigeria, where millions of people access the internet primarily through mobile phones. — Ethical web design involves respecting copyright, protecting user privacy, designing for accessibility, and avoiding the spread of false information. — These skills have real practical value in Nigeria, from building school portals to freelancing for small businesses.
CONCLUSION
Every great website you have ever visited started as lines of code written by someone who once learned exactly what you are learning right now. Web Design II gives you the tools to move from being a passive user of the internet to an active creator of it.
Nigeria's digital economy is growing rapidly. From fintech to e-commerce, from government services to education platforms, every sector needs people who can build and maintain quality websites. By mastering HTML, CSS, and JavaScript at this stage, you are not just completing a school subject — you are building a foundation for a future where your ideas can reach millions of people with just a web browser and an internet connection.
Keep practicing, stay curious, and do not be afraid to experiment. Great web designers are not born — they are built one line of code at a time.
FAQ SECTION
H2: Frequently Asked Questions About Web Design for SSS 2 Students
Q1: Do I need an internet connection to practice web design? A: Not necessarily. You can write HTML, CSS, and JavaScript code using a free text editor like Notepad (on Windows) or any code editor and view the result directly in your browser offline. You only need internet access when you want to publish your website online or look up tutorials.
Q2: What is the difference between a web designer and a web developer? A: A web designer focuses primarily on the visual appearance and user experience of a website — how it looks and feels. A web developer focuses more on the technical side — how it works, how data is stored, and how the site functions. In practice, many professionals do both, and learning HTML, CSS, and JavaScript prepares you for both paths.
Q3: Can I become a professional web designer after SSS? A: Absolutely. Many successful Nigerian web developers and designers began exactly where you are. After SSS, you can study Computer Science or related courses at university, attend coding bootcamps, or learn independently through platforms like freeCodeCamp and Odin Project — both of which are free.
Q4: Is JavaScript difficult to learn for a secondary school student? A: JavaScript can seem challenging at first, but the basics covered in SSS 2 — variables, simple functions, and click events — are very manageable with regular practice. The more you experiment and test your code, the easier it becomes.
Q5: Why is responsive design important for Nigerian websites? A: Nigeria has one of the highest rates of mobile internet usage in Africa. Most Nigerians access the web using smartphones rather than computers. A website that is not mobile-friendly will be difficult to use for the majority of Nigerian visitors, which means fewer people will use it. Responsive design ensures your website works well for everyone, regardless of what device they are using.
Q6: What free tools can Nigerian students use to start practicing web design? A: You can start with Notepad (pre-installed on Windows) or download VS Code, which is a free and professional code editor used by developers worldwide. For practice and experimentation online, platforms like CodePen and Replit allow you to write and test HTML, CSS, and JavaScript directly in your browser without installing anything.
.jpg)
0 Comments