Web Development for Beginners: HTML, CSS & JavaScript

Explore HTML basics by creating an index.html, using VSCode with live server or live preview, and understanding doctype HTML, html5, and the head and body structure.

Learn to structure a web page with HTML basics: set language, include charset and viewport metadata, and use headings and paragraphs to organize content.

Learn how HTML attributes add information to elements, appear in the start tag, and use name-value pairs. Explore examples with anchor tags and images, noting src, alt, and href attributes.

Learn to distinguish block and inline elements in HTML and how they shape page layout, from full-width blocks to inline content like div, p, span, a, br, img.

Master HTML list structures by using unordered lists (ul), ordered lists (ol), and list items (li), while reinforcing headings (h1–h3) and paragraphs to organize content.

Learn to create links with the anchor tag (href, target) that open in a new tab, and embed images with the img tag (alt, width, height).

Create and structure HTML forms using labels, inputs, text areas, and a submit button; learn input types, placeholders, IDs, and basic email validation.

Build a personal profile page using HTML by adding a name header, image, bio, skills list, and a contact form, then preview, customize, and share your profile with the class.

Create an about me page with a heading, paragraph, and image, then add a contact form for sending messages, and submit the HTML file for review.

Create and style HTML tables by using table, tr, th, and td elements, add borders, and populate rows with name, subject, and grid data.

Create a HTML signup form with username, email, password, date of birth, gender, and bio, using labels, inputs, a select, and a textarea, with required fields and a submit button.

Learn how to embed video and audio in HTML using the video and audio tags, define sources and types, and enable controls for playback and fallback text.

Learn to embed external content with iframes using the src attribute, including forms, maps, or other sites, and customize border, width, and height.

Explore semantic elements in HTML to improve structure, readability, accessibility, and SEO. See header, nav, main, article, section, aside, footer, and figure usage in live coding examples.

Learn to build a simple blog layout using semantic elements—header, nav, main, section, article, aside, and footer—featuring h1, h2, and h3 headings and a comment form.

Learn basic HTML5 form validation with HTML and JavaScript, including required fields, minlength, email, password length, and age min/max ranges for a registration form.

Explore advanced HTML5 form validation by applying pattern rules and custom messages for username and ten-digit phone inputs.

Explore HTML meta tags and SEO basics, including UTF-8 charset, the viewport for responsive design, and meta descriptions, keywords, and author tags to boost your site's visibility on Google.

Explore how to use progress bar and meter elements in HTML to visualize data, and set id, value, min, max, and labels like score and user score with practical examples.

Learn css basics by understanding how css styles html elements with color, fonts, layout, and animations, and discover the three ways to add css: inline, internal, and external.

Learn CSS selectors, including id and class selectors using hash and dot, apply styles to paragraphs, div containers, and descendant selectors to target only nested paragraphs.

Learn how to style borders in CSS by setting style, width, and color, and experiment with borders styled as dot, solid, dashed, double, inset, outset, or none on sample paragraphs.

Explore how to color text and set backgrounds in HTML/CSS, using color names, hexadecimal, RGB, and HSL, and control background images and background size with cover.

Explore CSS backgrounds by applying background color and background image to elements, using a URL for the image, and controlling repetition and positioning with background-repeat and background-position.

Learn how to change font families and access Google fonts, then apply text alignment, decoration, and transforms such as capitalize and uppercase to improve readability and design.

Explore how CSS text properties control color, alignment, decoration, and spacing. Learn to apply color to body or specific elements, and use text transform, indent, and spacing adjustments for typography.

Explore the CSS box model by building a div, applying a border, adjusting width, and using margin and padding to control space inside and outside the element.

Explore CSS positioning concepts by comparing static, relative, absolute, and fixed placements. Learn how each mode affects element position, scrolling behavior, and their relation to parent containers.

Learn to build modern responsive designs with flexbox by creating a flex container, centering items with justify-content and align-items, and spacing boxes with space-around.

Learn how to use CSS grid to design responsive page layouts, create a three-column grid with grid-template-columns and gaps, and style grid items with padding, centering, and font-size.

Learn the css grid layout model to structure web pages with a grid system, creating a grid container and grid items, defining columns and styling with padding, borders, and alignment.

Learn how css overflow controls content that doesn't fit in an element, using visible, hidden, scroll, and auto to clip or scroll, with a 200px div example.

Create a page layout with CSS grid by defining header, sidebar, content, and footer, using grid template areas and columns, and applying padding and colors.

Explore how CSS transitions and animations create smooth background color changes on hover. Set durations such as 0.5 seconds to control timing and watch the hover effect animate.

Learn to create CSS animations using keyframes, transforms, and translate to move a box in continuous, infinite sequences, adjusting duration for speed.

Explains CSS media queries for mobile-friendly design by changing styles based on screen size. Demonstrates a simple example where the background switches to pink at 600 pixels.

Create a responsive landing page with a hero section and a call to action button, using grid layouts and media queries in HTML and CSS.

Learn how JavaScript adds interactivity to websites by updating content, responding to clicks, validating forms, and creating animations, with inline, internal, and external integration in HTML.

Explore JavaScript variables and data types by declaring with var, let, and const, storing strings and integers, and viewing results with console.log in the browser console.

Explore JavaScript data types, including strings, numbers, booleans, arrays, objects, null, and undefined, with practical examples of quotes and key-value pairs.

Explore the five basic arithmetic operators in JavaScript—addition, subtraction, multiplication, division, and modulus—and print results with console.log in script tags.

Learn string concatenation in JavaScript by joining first name and last name with the plus sign, inserting a space to create a full name, and printing it to the console.

Learn how to create basic user interactions in JavaScript using alert popups, prompts for input, and console logs to the developer console.

Explore how JavaScript functions organize code as reusable blocks, define functions with the function keyword, pass parameters, call them, and return values using examples like add and console logs.

Build a simple calculator in JavaScript using prompt, type casting, and addition, with both built-in and user-defined functions.

Learn how to use if and else statements in JavaScript to make decisions based on conditions, with examples checking numbers and ages using prompts, alerts, and console logs.

Walks through using if, else if, and else to map a score to grid A, B, C, or F, with examples scoring 85 (B), 100 (A), and 65 (fail).

Explore logical operators in JavaScript, including and and not, and how they combine conditions. Build a simple login check using username and password to illustrate true, false, and negation.

Use a for loop and an if condition to print even numbers from 1 to 10 by checking i modulo 2 equals 0 and logging each even value with console.log.

Explore arrays in JavaScript by storing multiple values in a single variable, using zero-based indexing, accessing elements with their index, and applying methods like push, pop, map, and reduce.

Learn how to add and remove elements in arrays using JavaScript built-in methods like push (end), unshift (beginning), and pop and shift, and see how these affect the array.

Use a for loop to iterate over an array from index 0 to length-1, printing each fruit with console.log; this approach is preferred over printing without a loop.

Learn to create and manipulate objects with key-value pairs in JavaScript, including dot notation access, adding and updating properties, and looping through keys to log name, age, and student status.

Build a simple to-do list in JavaScript by prompting the user for tasks, pushing them into an array, and logging each item with a for loop.

Learn how the document object model enables JavaScript to access and modify html elements. Use methods like getElementById and querySelector to change text content and css styles on the page.

Explore how to handle browser events with addEventListener, responding to clicks and other actions, and update the page by changing header text and button content.

Learn how to handle mouse events like mouse over and mouse out by using an event listener to change a button’s background color and padding in response to user interactions.

Attach a keyboard event listener for keydown and keyup with document.addEventListener to capture user input, log the pressed key with event.key, and explore ideas like a typing game.

Build an interactive keyboard events feature that shows the pressed key in a header using event.key and updates the title element's text content with the 'pressed' label.

Build a JavaScript form validator that prevents default submission, checks for a not empty name, shows a red error when empty, and a green 'Hello {name}' when filled.

Create a color changer web app that changes the page background color to red, blue, or green by clicking corresponding buttons, using JavaScript event listeners and document object model manipulation.

Create a digital clock and stopwatch using HTML, CSS, and pure JavaScript, with a three-file setup (index.html, style.css, script.js) and controls for start, stop, and reset.

Build a functional digital clock with JavaScript by updating the display every second using a date object and padded numbers, and add a start stop reset stopwatch.

Create a web calculator with html, css, and javascript by setting up index.html, style.css, and script.js, building a display and numeric/operator buttons.

Style the calculator with CSS by centering content, applying a white card with rounded corners, and crafting a grid and hover effects for buttons and operators.

Develop a functional calculator by implementing JavaScript logic for appending input, updating the display, clearing results, and safely evaluating expressions with try-catch error handling.

Plan and build a personal portfolio by structuring a project with folders for JavaScript, CSS, and images, creating index.html, and linking offline and online assets in Visual Studio Code.

Create a practical navigation bar and sidebar by building HTML structure with divs, a brand logo, Font Awesome icons, and a menu linking to about, portfolio, and contact.

Style the navigation bar and header using style.css by fixing the nav screen, applying a black background, serif font, and logo sizing, with list-style and link hover effects for consistency.

Learn to build an about me section in HTML and CSS, structure a full page with sections, data anchors, animated backgrounds, and skill bars.

Style the navbar and sidebar by configuring container nav and nav links, centering items with auto margins, and applying color, hover effects, and background images.

Build the projects section of a web page by adding structured slides with titles, descriptions, images, and delay animations, then add a contact form and footer for a polished layout.

enhance the about me section with css by setting font size and color, centering content, refining the skill bar, and adding a bouncing scroll-down indicator.

Implement a scroll down indicator with a bouncing keyframes animation and translate transforms, and style skill bars with padding, borders, and absolute positioned percent bars.

Learn to style the projects and the contact form using HTML and CSS, including absolute positioning, typography, borders, hover effects, and form controls.

Apply final footer styling with a black background, white bold 16px text, top padding, and hover effects for social links, using CSS, JavaScript, jQuery, Ajax, and HTML.

Learn to add interactivity in web development for beginners by building a typing animation, turning a project list into a slideshow, and animating the contact form with JavaScript.

This lecture deepens JavaScript integration for a full-page scrolling site, implementing anchors and navigation, responsive width 400, tooltips, and animated progress bars with data-percent values.

Finalize a webpage by wiring on-click navigation to move to home, portfolio, about, projects, and contact with full-page movement.