About This Course
Designed for aspiring developers, this course provides a comprehensive introduction to the world of modern web development. You'll learn the core languages of the web – HTML for structure, CSS for styling, and JavaScript for interactivity. We'll cover essential concepts like responsive design using Flexbox and introduce you to server-side development with Node.js and Express, giving you a holistic view of how websites are built.
Through hands-on projects and practical exercises, you'll gain confidence in building functional web pages and understand the fundamentals of version control with Git. This course sets a strong foundation for further learning in front-end or full-stack development.
Learning Outcomes
- Understand how the web works and the roles of client/server technologies.
- Structure web content effectively using semantic HTML5.
- Style websites using CSS, including the Box Model and Flexbox for layout.
- Implement interactivity and manipulate the DOM using JavaScript.
- Write basic functions, control flow (conditionals, loops) in JavaScript.
- Understand the basics of Node.js, npm, and setting up a simple Express server.
- Grasp fundamental concepts of APIs and databases (SQL vs NoSQL).
- Utilize Git for version control and collaborate using platforms like GitHub.
Prerequisites
This course is designed for beginners with no prior web development experience required. A curious mind and a willingness to practice are key!
- Basic computer literacy (navigating files, using a web browser).
- Comfortable using a text editor.
- Problem-solving attitude and eagerness to learn coding concepts.
Curriculum Breakdown
Week 1: HTML Fundamentals & Structuring Content
Topics Covered:
- How the web works (internet vs. WWW, clients/servers, HTTP/HTTPS)
- What is HTML? Basic tags (html, head, body, headings, paragraphs, links, images)
- Setting up index & Browser dev tools
- Lists (ul, ol, li) & Tables (table, tr, th, td)
E-Tivities:
- Create your first HTML page
- Practice using "Inspect Element"
- Build a page with lists and a simple table
Week 2: Forms & Semantic HTML
Topics Covered:
- Basic Forms (form, input types, label, textarea, button)
- Introduction to Semantic HTML (header, footer, nav, main, article, section)
- HTML comments
E-Tivities:
- Build a basic contact form
- Structure a page using semantic elements
Week 3: CSS Basics & The Box Model
Topics Covered:
- What is CSS? How to include CSS (inline, internal, external)
- Basic CSS Selectors (element, class, ID)
- Common CSS Properties (color, background, font, text, width, height)
- CSS comments & The CSS Box Model (content, padding, border, margin)
E-Tivities:
- Create an external CSS file and link it
- Practice styling elements using selectors and properties
- Use dev tools to inspect the box model
Week 4: CSS Layout & JavaScript Fundamentals
Topics Covered:
- CSS display property (block, inline, inline-block, none)
- Basic layout with margin: auto & Introduction to Flexbox
- What is JavaScript? How to include JS
- Basic JS syntax (console.log(), comments), Variables (let, const)
- Basic Data Types & Operators
E-Tivities:
- Create simple layouts using Flexbox
- Create an external JS file and link it
- Practice basic JS syntax and operations in the console
Week 5: JavaScript Control Flow, Functions & DOM Interaction
Topics Covered:
- Conditional Statements (if, else if, else) & Logical operators
- Loops (for-loop basics) & Functions (declaring, calling, parameters, return)
- Basic variable scope & What is the DOM?
- Selecting HTML elements (getElementById, querySelector)
- Modifying content (textContent, innerHTML) & styles (element.style)
- Basic event handling (addEventListener for 'click')
E-Tivities:
- Write JS code with conditional statements and loops
- Create basic functions
- Write JS to manipulate HTML content and styles based on button clicks
Week 6: Back-End Intro (Node.js & Express), Git & Next Steps
Topics Covered:
- Client-side vs. server-side
- What is Node.js? What is npm? Installing Node.js & npm
- Running a simple Node.js script
- Introduction to Express.js (concept) & Setting up a basic Express server
- What is a Database? Basic SQL vs. NoSQL difference & Basic API concept
- Introduction to Git: init, add, commit & Importance of Git/GitHub
- Where to go next (JS/CSS frameworks, deeper Node.js, databases)
E-Tivities:
- Install Node.js & Run a "Hello World" script
- Initialize an npm project and install Express, setting up a minimal server
- Create a local Git repository and make commits & Sign up for GitHub
Certificate Information
Upon successful completion of the course, you will receive an IgniteSkillz Certificate in Modern Web Development. This certification validates your foundational skills in front-end and introductory back-end technologies.
Certificate Benefits:
- Industry-recognized credential
- Verification links for employers
- LinkedIn integration