Mega Web Development Course: Full stack web application 2023

Explore self closing tags that require no closing tags because they have no content, with examples like br and hr that add space or create a page separator.

Use HTML comments to organize large HTML files, adding notes like header, main content, and category, so you remember sections, help others understand, and locate code faster.

Practice creating a product card with an image, a title, and a description using the image from lesson resources and the code zip.

Learn the differences between classes and IDs in web pages; classes can be reused across elements, while IDs are unique to a single element, guiding CSS usage.

Learn how to write comments in CSS files to remind yourself of past work, help others understand your code, and keep large stylesheets clean and navigable.

Apply a universal font-family to all page content using the body selector, and add a solid border with rounded corners to the product-image class via a class selector.

Start projects you don't know all the steps for, go deep, practice, and search for solutions online when you hit unknown parts, until you complete the task.

Learn to embed a video on a web page with the video and source tags, enable controls, and adjust width. Explore formats and playback attributes for HTML video.

Explore HTML forms and their daily uses, including sign-up and contact us forms. Learn about inputs, data types, and how CSS shapes their look as you build your first form.

Build a signup form with email and password inputs, labeled via for and id, using required, email type validation, password masking, and a default submit button.

Create a complete signup form using HTML forms, including full name, email, phone, gender, birth date, password, profile image upload, terms checkbox, and a sign-up button.

Build a sign up form with labeled full name, email, phone, birth date, password, and file input for profile image, plus gender options radio or select and a terms checkbox.

Explore CSS intermediate topics and add a favicon by creating a five icon, linking it in the head, choosing type and address, and integrating it with the box model.

Style the signup form by removing unused fields and keeping name, email, password, and terms. Adjust the form and input styling with width 400px, padding, outline, and a sign-up button.

Style the signup form using a dedicated sign up css file and in-page edits. Remove unused fields, set inputs to full width, apply borders, colors, padding, and a full-width button.

Explore how to create hover effects and focus states with css, changing link colors and button icons, adding smooth transitions and pointer cursors on navigation, sign up, and form inputs.

Master the display property and how block, inline, and inline-block shape layout. See how to place a title next to an image, adjust margins, and hide elements with display none.

Learn how to center elements using the display property, margin auto, and text-align, with block vs inline behavior and practical examples like videos and divs.

Explore the CSS position property, including static, absolute, fixed, and relative, and learn how transform translate and z-index control layout, overlap, and screen-fixed elements like headers.

Explore flexbox, a one-dimensional layout model that places and aligns items using a flex container and flex items, as shown with a header containing a logo and navigation bar.

Explore flex container fundamentals with flexbox, learn flex direction, wrap, justify content, align items, align content, and gap, and apply them to product cards and a navigation bar design.

Style the navigation bar with flexbox, placing the logo on the left and the menu on the right, using space-between and gaps between links.

Improve the intro section by creating a two-column layout with a left column for the title, text, and become a member link, and a right column for the video.

Improve the product section by styling product cards with a flex container, adding a view product link, and using reusable classes with hover effects.

Explore how to control layout with flex items inside a flex container by adjusting order, using flex grow and flex shrink, and applying per-item properties to reposition elements.

Explore building a grid-based product gallery by turning eight product cards into a CSS grid with a 70% width container and 900px height, using grid template columns and repeat.

Explore grid template areas to design page layouts by defining header, main, sidebar, and footer regions, assigning grid-area names, and using grid-row/grid-column for positioning, with gap controls.

Learn to build a responsive product grid page for suits using images, adjust grid columns and gaps, apply vertical and square variants, and refine layout with CSS grid concepts.

Learn to implement box-shadow effects for headers and interactive elements, using x/y position, blur, color, hover shadows, transitions, and cursor changes to improve readability and clickability.

Explore how to apply image filters and hover effects, including grayscale and blur, to web elements, and experiment with color transitions and filter intensity.

Learn how to build CSS animations with keyframes, creating a slide-up effect using transform and opacity, applying it to elements, and refining with display and responsiveness.

Learn how to create a responsive web page with CSS, using max-width rules to adjust font sizes and layout for desktop, tablet, and mobile displays.

Learn the three ways to write JavaScript: inline in element attributes, internal within the HTML, and external via linked script files; understand where to place each and how to link.

Explore how JavaScript variables store values in a price box, use the var keyword, and print results with console.log to the browser console.

Compare var and const by creating, printing, and updating variables; see how const stays fixed while var changes. Learn naming multi-word variables and when to use const for birth year.

Learn how to name multi-word variables using camel casing, avoid spaces, dots, dashes, and underscores, and use all capital letters for costs to prevent confusion.

Practice converting the shoe information into JavaScript variables, color as a string, size as a number, price as a float, and a boolean isBestSeller; then display all values with console.log.

Declare two numbers, assign ten and five, and use equality and not-equality operators to check if they match, showing true or false in the console.

Explore adding, subtracting, multiplying, and dividing with variables like cash, saving, and cost to compute results. See how the plus operator concatenates strings and numbers, preparing you for string operators.

Learn how strings interact with arithmetic and concatenation, showing when plus joins text and numbers and how other operators treat strings as numbers or as text.

Explore comparators for comparing two numbers using greater than, less than, greater than or equal to, and less than or equal to, with examples like savings versus product cost.

Practice JavaScript operators by calculating the daily average minutes from a series of numbers, then print whether the average is greater than or equal to 30 using an if statement.

Master the if statement to let a website make decisions using booleans and conditions. Learn using comparators, curly brackets, and console.log in JavaScript to decide outcomes like buying shoes.

Master how booleans drive decisions with if statements to decide if you can attend a party when you're working, and whether your car is ready, using console.log messages.

Learn to create and call a JavaScript function named daily battle, perform daily profit and expense calculations with console logs, and reuse code by invoking the function with parentheses.

Learn to replace hard-coded numbers with variables, calculate daily profit by subtracting spent from made, and use a conditional to declare a win or a loss.

Learn to call JavaScript functions from HTML using the onclick attribute, triggering inline code with a button click and logging a welcome message to the console.

Explore JavaScript intermediate random concepts, using Math.random to generate numbers, convert to percentages, and create a dice from 1 to 6 with floor or ceiling methods.

Learn how to implement if, else, and else if statements to evaluate a random exam score from 0 to 100, determine pass or fail, and categorize results by ranges.

Define and call functions with parameters to pass values like money made and money spent, enabling dynamic daily battle calculations.

Define functions with outputs using return, create a sum function with parameters, and print result with console.log. See how code before return executes and how greeting function returns a message.

Learn to build the multiply function for a calculator by prompting for the first number and the second number, returning their product, and showing the result with an alert.

Learn how arrays manage a friends list in JavaScript, using includes and zero-based indexing to verify access, with a prompt-driven check that reveals content or denies access.

Update array items by index (zero-based), add new items with push, and remove from end or start with pop or shift, while printing changes with console.log.

Learn how the remainder operator computes remainders, with 20 and 10 (remainder 0), 20 and 9 (remainder 2), and 20 and 8 (remainder 4), and explore its use in JavaScript.

Learn pomodoro technique by cycling 25 minutes of work with 5-minute breaks and a 15-minute break after the fourth round; implement a function to add break times to a list.

Use a while loop to repeat code without running forever while a counter stays within bounds, incrementing the counter and filling an array of break times for final printing.

Learn how the for loop works, its three elements (start, end, change) inside the parentheses, and how it relates to a while loop, with practice in VS Code.

Write a function that iterates over list with a for loop, checks each item using remainder when divided by two to identify even numbers, and prints them to the console.

Discover how the browser builds the document object model into a navigable dom tree. Navigate the dom with firstElementChild and lastElementChild, and use methods like click to trigger actions.

Learn to place JavaScript at the bottom of the html file to access dom elements safely, using getElementById('selected'), and understand css at the top.

Explore selecting html elements with JavaScript and the dom using tag name, class name, id, and query selector methods. Understand arrays versus single objects and the use of nested selectors.

Explore how to use the DOM to style page elements, including adding a box shadow with getElementById and toggling display to none to hide a navigation bar.

Learn to use the DOM to add or replace HTML by selecting an element with getElementById, setting innerHTML, creating an a tag, and using hover to show information, updating textContent.

Learn to reveal product reviews on hover by darkening the image and fading in text using HTML, CSS, and JavaScript, with on mouse over/out handlers and smooth transitions.

Learn to control classes with the DOM and JavaScript by adding, removing, and toggling hover effects that adjust image brightness and opacity and reveal reviews, with dark mode prep.

Create a dark mode toggle in the nav bar using sun and moon SVG icons, switching the site mood and icon on click with simple JavaScript functions and display toggling.

Implement dark mode by toggling a class on the body, updating background and text colors, header and product card styles, and using JavaScript DOM to apply changes on user toggle.

Learn to replace inline JavaScript with event listeners and handle events like mouseover, mouseout, and scroll, selecting elements with querySelector and triggering show or hide actions.

Master higher order functions in JavaScript by passing a function as a parameter, using a calculate function with an operator, and switching between sum and subtract.

Build a calculator UI with HTML and CSS, using a grid layout for the display, numbers, and operators, and add hover effects. In the next lesson, implement the JavaScript functionality.

Build a JavaScript calculator by managing two numbers as strings and a boolean to switch between them. Wire operator functions for sum, subtract, multiply, and divide and update the display.

Explore JavaScript objects to model user data with properties like name, last name, and age using curly brackets. Learn object syntax, data types, and the array contrast, and preview constructors.

Define a JavaScript constructor to create user objects with name and last name properties, use this and dot notation, instantiate with new, and access values via console logs.

Create a page with a form that captures first name and last name, then submit to create an object with a constructor and display it as a title.

Learn how objects can contain methods, use this to access properties, and add methods to constructors; call object methods like user greeting and math floor, preparing for switch.

Explore the JavaScript switch statement, using an expression to match cases, execute corresponding code, and control flow with break and a default option.

Learn to use a switch statement to compute shipping costs from a distance prompt, with cases for 1, 2, and 3 kilometers (0, 3, 6) and a default 10, including converting input to a number; plus a keyboard event example for a video player using left, right, and space keys.