Web Development Basics Online Course

Web Development Basics Online Course

This comprehensive web development course guides you from the basics to advanced skills, starting with HTML, CSS, and JavaScript to build interactive and visually appealing webpages. Gain hands-on experience creating websites from scratch, using GitHub for version control, Bootstrap 5 for responsive design, and Visual Studio Code to streamline your coding workflow. Learn to integrate JavaScript frameworks like jQuery, deploy projects with Netlify, and master troubleshooting and debugging. By the end, you'll be able to confidently design, build, and launch professional, fully functional websites.

Who should take this course?

This course is ideal for beginners, students, and aspiring developers who want to learn the fundamentals of web development, including HTML, CSS, and basic JavaScript, to build interactive websites.

What you will learn

• Create multi-page websites using HTML, CSS, JavaScript, and Bootstrap
• Integrate JavaScript and jQuery for dynamic user experiences
• Learn efficient coding and debugging in a professional environment
• Understand version control, collaboration, and repository management
• Publish websites effortlessly to the internet
• Grasp DNS, SSL, and CDN concepts for secure, efficient websites

Course Outline

Introduction

• Introduction
• Why Learn Web Development?

Environment Setup

• Web Development Tools
• Install Visual Studio Code
• Recommended Development Extensions
• Set Up Git and GitHub
• Set Up Website Project Workspace

Basic HTML

• Explore HTML
• Write Your First HTML Document
• Adding Text and Links
• Multiple HTML Pages
• Adding Images
• Adding Ordered and Unordered Lists
• Adding an HTML Table
• Adding an HTML Form - Part 1
• Adding an HTML Form - Part 2
• Embedding External Content
• Embedding Media Content (Video and Audio)
• Comments and Styling
• Add to GitHub

Cascading Style Sheets

• What Is CSS (Cascading Style Sheets)
• Inline CSS
• Internal CSS
• External Stylesheets
• HTML Semantics
• HTML Non-Semantic Layout - Part 1
• HTML Non-Semantic Layout - Part 2
• Consistent Webpage Layout and Design
• Using Classes
• Add to GitHub

JavaScript

• What Is JavaScript?
• Explore JavaScript and the Browser Console
• JavaScript Statements and Variable Declarations
• JavaScript Arithmetic Operations
• JavaScript Decision Statements
• JavaScript Repetition Statements
• JavaScript Functions
• JavaScript Variables and Scope
• JavaScript and HTML DOM
• JavaScript in HTML Syntax
• Adding JavaScript to HTML - Part 1
• Adding JavaScript to HTML - Part 2
• What Is jQuery?
• Adding jQuery to a Website
• jQuery Versus JavaScript
• Add to GitHub

Web Development with the Bootstrap Framework

• What Is Bootstrap?
• Explore Bootstrap's Documentation
• Adding Bootstrap to Your Website
• Adding Bootstrap Navbar and Layout - Part 1
• Adding Bootstrap Navbar and Layout - Part 2
• Bootstrap Tables
• Bootstrap Forms
• Bootstrap Buttons
• Bootstrap Carousel
• Bootstrap Cards and Grid
• Bootstrap Accordion
• Clean Up Website
• Tracking Active Page - CSS + JavaScript
• Add to GitHub
• Publishing Your Website
•  down icon
• Website Hosting Principles
• What Is Netlify?
• Publish Website Using Manual Deploy on Netlify
• Publish Website Using GitHub and Netlify (CI/CD Pipeline)
• Additional Netlify Features

Conclusion

• Course Recap
• Recommendations