Introduction to Web Development (+ bonus module)

By Konstant EduTech

Course Title: Introduction to Web Development for Absolute

Beginners
Section 1: Getting Started with Websites
Milestone Project: Personal Portfolio Website - Part 1 (Building the Basic Web Page Structure)
Description: In this section, students will learn the basic structure of a web page and how to create
their personal portfolio website. They will understand the building blocks of the web: HTML and
CSS.

Part 1.1: Understanding Web Pages

Module 1.1.1: What is a Website?
Submodules:
1. How the Web Works: Introduction to how websites are made, accessed, and displayed in a
browser.
Example: Show a simple web page and explain the components.
Concepts Learnt: Web servers, browsers, and how websites are delivered over the internet.
2. What is HTML? - The building blocks of a web page.
Example: Create a simple HTML page with a title, heading, and paragraph.
Concepts Learnt: The purpose of HTML, structure of an HTML document (opening and
closing tags), and common tags.
3. How to Open and Edit an HTML File: Understanding how to create and edit HTML files.
Example: Open a text editor, create a new file, and save it with the .html extension.
Concepts Learnt: Using a text editor, file structure, saving files as .html, and previewing them
in a browser.
Small Project: Create Your First Web Page (Task 1: Create a Heading, Task 2: Add Some Text)
Description: Build a basic webpage with headings and text.

Part 1.2: Making Your Web Page Look Good with CSS
Module 1.2.1: What is CSS?
Submodules:
1. What is CSS? - Introduction to how CSS is used to style HTML pages.
Example: Change the color of text on your HTML page.
Concepts Learnt: Linking CSS to HTML, understanding the separation of content (HTML) and
design (CSS).
2. Basic CSS Styling - Changing fonts, colors, and text alignment.
 Example: Apply colors, font-size changes, and center-align text on the page.
Concepts Learnt: Basic CSS properties (color, font-size, text-align), writing CSS rules
(selectors, properties, and values).
3. CSS for Layout - How to arrange content using margins, padding, and borders.
Example: Center a div on the page using CSS.
Concepts Learnt: CSS box model (content, padding, borders, margin), and layout control.
Small Project: Style Your Web Page (Task 1: Change Text Colors, Task 2: Add Spacing and Borders)
Description: Style your webpage using CSS to change the appearance of the text and layout.

Part 1.3: Structuring Your Web Page with HTML

Module 1.3.1: Adding More Content with HTML
Submodules:
1. Working with Lists: Learn how to create ordered and unordered lists.
Example: Create a list of your hobbies.
Concepts Learnt: <ul> , <ol> , and <li> tags, structuring lists in HTML.
2. Adding Images and Links: Learn how to insert images and create hyperlinks.
Example: Add an image and link to an external website.
Concepts Learnt: <img> tag (src, alt attributes), <a> tag (href attribute), and absolute
vs relative URLs.
Small Project: Add More Features to Your Web Page (Task 1: Create a List, Task 2: Add an Image)
Description: Expand the basic webpage by adding a list and embedding an image.

Part 1.4: Organizing the Page with Divs and Spans

Module 1.4.1: Grouping Elements
Submodules:
1. Understanding <div> and <span> : Learn to group and style elements.
Example: Use <div> to wrap different sections of your webpage.
Concepts Learnt: Differences between block-level ( <div> ) and inline-level ( <span> )
elements, organizing HTML content.
Small Project: Organize Your Web Page (Task 1: Group Sections with Divs, Task 2: Style Specific Text
with Spans)
Description: Use divs and spans to group and style content on your webpage.

Section 2: Bringing Style and Structure Together

Milestone Project: Personal Portfolio Website - Part 2 (Designing a Homepage)
Description: Create a homepage for your personal portfolio by combining HTML structure and CSS
styling.

Part 2.1: Creating a Homepage Layout

 Module 2.1.1: Structuring the Page with Sections
Submodules:
1. Using the <header> , <nav> , <footer> Tags: Organize your page into different
sections.
Example: Add a header at the top, a navigation menu, and a footer at the bottom.
Concepts Learnt: Semantic HTML, structuring a webpage using header, nav, and footer tags.
2. Creating a Navigation Menu: Build a navigation bar with links to different sections.
Example: Create a menu that links to “Home”, “About”, and “Contact” sections.
Concepts Learnt: Creating a navigation menu using lists, styling navigation links with CSS.
Small Project: Build a Homepage Layout (Task 1: Create Sections, Task 2: Add a Navigation Bar)
Description: Create a basic homepage layout with a header, footer, and navigation.

Part 2.2: Designing with CSS

Module 2.2.1: Applying Colors and Fonts
Submodules:
1. Choosing Colors for Your Website: Use CSS to style the page with a consistent color scheme.
Example: Apply different background colors to the header, footer, and main content areas.
Concepts Learnt: CSS color properties, creating a color scheme, applying background and
text colors.
2. Working with Fonts: Change the font style, size, and weight on the page.
Example: Use different fonts for headings and paragraphs.
Concepts Learnt: CSS font-family, font-size, font-weight, and best practices for readability.
Small Project: Design the Homepage (Task 1: Pick Colors, Task 2: Style Text)
Description: Apply styles to the homepage using colors, fonts, and spacing for a clean design.

Section 3: Making Your Website Interactive

Milestone Project: Personal Portfolio Website - Part 3 (Adding Simple Interactivity)
Description: Add interactivity to your personal portfolio website using JavaScript. Youʼll make
buttons, image sliders, and interactive elements.

Part 3.1: Introduction to JavaScript

Module 3.1.1: Understanding JavaScript Basics
Submodules:
1. What is JavaScript? - How JavaScript makes websites interactive.
Example: Create a button that changes the background color when clicked.
Concepts Learnt: What JavaScript does, how it interacts with HTML, basic JavaScript syntax.
2. Linking JavaScript to Your Web Page: Adding JavaScript to your HTML file.
Example: Include a script tag and link an external JavaScript file.
 Concepts Learnt: How to use <script> tags, linking external JavaScript files to HTML.
Small Project: Add Interaction to Your Website (Task 1: Create a Button, Task 2: Write JavaScript to
Change Colors)
Description: Make the website interactive by adding a clickable button that changes the
background color.

Part 3.2: Interacting with Web Page Elements

Module 3.2.1: Introduction to the DOM (Document Object Model)
Submodules:
1. What is the DOM? - How JavaScript interacts with HTML elements.
Example: Use JavaScript to change the content of a heading when a button is clicked.
Concepts Learnt: Understanding the DOM, selecting HTML elements using JavaScript
(document.getElementById, querySelector).
2. Handling Events: Learn how to respond to user interactions (clicks, hovers, etc.).
Example: Add an event listener to a button that triggers a JavaScript function.
Concepts Learnt: Event handling in JavaScript, addEventListener for different types of
events.
Small Project: Add Interactive Features (Task 1: Change Text with JS, Task 2: Handle Button Clicks)
Description: Add interactivity to your website by responding to user actions such as button
clicks or changing text dynamically.

Part 3.3: Creating Basic Animations

Module 3.3.1: Adding Simple Animations with JavaScript
Submodules:
1. Animating Elements with JavaScript: Learn how to create basic animations such as fading or
moving elements.
Example: Create an animation that fades in a section when the page loads.
Concepts Learnt: Basic animations using JavaScript, manipulating element styles
(style.opacity, style.transform).
2. Adding Transitions with CSS and JavaScript: Combine CSS transitions with JavaScript to create
smooth effects.
Example: Add hover effects on buttons and transition animations that trigger when elements
are clicked.
Concepts Learnt: Combining JavaScript and CSS transitions for enhanced user experience,
how to use transition properties in CSS.
Small Project: Add Animations to Your Website (Task 1: Animate a Section, Task 2: Create Hover
Effects)
Description: Add dynamic animations to your portfolio to make it more visually engaging.

Part 3.4: Enhancing User Interaction with Forms

Module 3.4.1: Creating Forms with HTML
 Submodules:
1. Building Basic HTML Forms: Learn how to create simple forms that collect user input.
Example: Create a “Contact Me” form with input fields for name, email, and message.
Concepts Learnt: Using form elements like <input> , <textarea> , and <button> ,
creating basic forms with action and method attributes.
2. Form Validation with JavaScript: Ensure users fill out the form correctly by validating their
input with JavaScript.
Example: Add validation to check if the name and email fields are filled out before
submitting the form.
Concepts Learnt: Form validation using JavaScript, handling form submission events, basic
error handling.
Small Project: Create and Validate a Form (Task 1: Build a Contact Form, Task 2: Add Validation with
JavaScript)
Description: Create a functional “Contact Me” form for your portfolio and ensure all required
fields are filled out properly.

Section 4: Wrapping It All Up

Milestone Project: Personal Portfolio Website - Final Version (Putting Everything Together)
Description: In this section, students will complete their personal portfolio website by applying all
the skills theyʼve learned throughout the course. They will ensure that the website is fully
functional, visually appealing, and interactive.

Part 4.1: Refining the Website’s Design

Module 4.1.1: Improving Layout and Responsiveness
Submodules:
1. Making the Website Responsive: Ensure the website looks good on mobile, tablet, and desktop.
Example: Use CSS media queries to adjust the layout for smaller screens.
Concepts Learnt: Responsive design principles, using media queries to apply different styles
for different screen sizes.
2. Enhancing Visual Design: Final touches on fonts, colors, and spacing to create a professional
look.
Example: Refine the typography and color scheme to create a consistent and visually
pleasing design.
Concepts Learnt: Typography best practices, refining color choices, spacing for better
readability and design.
Small Project: Final Design Touches (Task 1: Add Media Queries, Task 2: Improve Font and Color
Choices)
Description: Ensure that the portfolio is visually appealing across different devices and has a
polished, professional look.
Part 4.2: Testing and Publishing
Module 4.2.1: Testing the Website
Submodules:
1. Testing for Bugs and Errors: Learn how to test your website for broken links, layout issues, and
JavaScript errors.
Example: Check the navigation and form functionality on different devices and browsers.
Concepts Learnt: Debugging techniques, testing across browsers, and tools for
troubleshooting (like browser developer tools).
2. Preparing to Publish Your Website: Learn how to host your website on the internet.
Example: Set up free web hosting using services like GitHub Pages or Netlify.
Concepts Learnt: Basics of web hosting, uploading files to a server, and understanding
domain names and URLs.
Small Project: Test and Publish Your Website (Task 1: Test for Errors, Task 2: Host Your Website
Online)
Description: Thoroughly test your website for functionality and then host it on a live server.

Final Course Recap

By the end of this course, learners will have created a fully functional, responsive, and interactive personal
portfolio website. They will have learned the essential skills of web development, including:

HTML: Structuring web pages using headings, paragraphs, lists, images, links, and forms.
CSS: Styling and designing web pages, creating layouts, and making sites responsive.
JavaScript: Adding interactivity, handling user input, and manipulating web page elements.
Website Publishing: Testing and deploying websites to be accessible to the public.

Bonus Module: Deploying your site for free

Weʼll show you how to deploy your website online for free for the whole world to see, and have a shareable
url.