Full Stack Web Development Masterclass: Beginner To Advanced

Discover what a technology stack is and how front-end and back-end technologies, from HTML and CSS to Node, Express, and databases, work together to build a web application.

Install Visual Studio Code on Windows by visiting the official download page and following the setup wizard. The lecture covers downloading, installing, and launching the editor.

Install Visual Studio Code on Mac by visiting the official site and downloading the package. Open the installer, launch Visual Studio Code from the dock or Spotlight, and confirm installation.

Learn how html, a markup language, structures web pages with doctype, head, body, and title tags, and build a simple page using index.html and headings such as h1.

Discover how HTML attributes add information to elements through name-value pairs, define links with href, and style elements using the style attribute.

Learn what HTML comments are, how to write and hide them from the page, and why comments improve code readability and maintainability in large web projects.

Learn to create unordered and ordered lists with list items and bullets, and customize list style types. Explore description lists with terms and descriptions to present item details.

Learn to use images on web pages with the image tag and src, resize with width and height, add alt text, and make images clickable with links while noting rights.

Learn to build interactive HTML forms that collect user data with text, email, password, and date inputs, radio buttons, and a submit button, using get or post methods.

Explore how cascading style sheets separate structure from styling to enhance the look and feel of web pages, providing one point of control for a professional, trustworthy user experience.

Learn how to create a css file, link it to an html document in the head with a stylesheet link, and style elements using color and other css properties.

master css selectors to style web pages. use element selectors for headings, id selectors with hash, and class selectors with a dot to target divs and color individual elements.

Learn to set colors in CSS using named colors, RGB and hex values, apply background colors to the body, and explore color palettes and RGBA transparency.

Master css margin and padding to control spacing between content and border and between elements. Set side-specific values like top, left, bottom, and right with pixel measurements and see examples.

Learn to set a background image for a site using the css background-image property, sourcing from your server or an external URL, and ensure the image size is appropriate.

Learn how to enhance web interfaces with icons by using Material icons or Google icons, replacing button text with visual icons, and including icon styles for interactive, readable designs.

learn to apply CSS font-family, font-style, and font-size to site elements, switching from default fonts to themed choices, exploring pixel values and em units for responsive sizing.

Learn to style link states in CSS by differentiating normal, visited, hover, and active links, remove underlines, and make links button-like with padding, text align, display inline-block, and background color.

Learn how divs create containers to divide a web page and apply CSS to all inner elements. Discover how spans differ as inline elements that render content on one line.

Explore CSS flexbox, a one-dimensional layout model that distributes space and aligns items within a container. Learn its main axis and cross axis, and why it outperforms older methods.

Create a simple flex box and compare it with a normal container by placing three colored boxes blue, red, and green inside, then apply display:flex and flex-direction to switch layouts.

Explore how flex grow and flex shrink allocate and reduce space among flex items, using proportional values to grow to available space and shrink in case of container size changes.

Leverage the CSS flex wrap property to wrap flex items into additional rows as space runs out. Ensure a consistent, responsive layout where menu items stack on smaller screens.

Design a desktop single-page portfolio site to showcase your skills, work experience, and client testimonials, using pen-and-paper sketches to plan sections.

Create and style a top navigation menu for a portfolio site using HTML and CSS, building a flex container with menu items and font styling.

Add an image banner by creating a flex image container, inserting a banner image, and overlaying text with absolute positioning for a centered, readable title and subtitle.

Build a responsive skills container to display multiple skills with icons and labels using HTML, CSS, and flexbox, and customize with a skills heading.

Add and style portfolio items with a dedicated container, heading, image, and description using a flex layout for a polished project showcase.

Design and style a dedicated client testimonials section on a portfolio site, including headings, a container, and blocks with client name, designation, and testimonial.

Learn how Bootstrap enables responsive, mobile-friendly web design that adapts to desktops, laptops, tablets, and phones, using built-in components and classes to speed up development.

Learn how to add bootstrap to your site using the bootstrap CDN and embed the link in your index.html; observe heading styling improve and prepare for the bootstrap grid system.

Explore the bootstrap grid system by building a 12-column layout with containers and rows, creating two equal columns (md-6) and observing responsive stacking on smaller screens.

Explore Bootstrap grid classes and breakpoints from extra small to extra large, learn how columns stack or stay side by side across screen sizes, and apply responsive layouts.

Master Bootstrap grid classes to build responsive layouts that adapt from large to medium screens, using a 12-column system to create 1:1 and 2:1 column ratios.

Learn how to use Bootstrap grid column offset to create space and align a column within a 12-column layout, using offset classes to place content and control left margins.

Make images responsive by applying bootstrap's img-fluid class so they resize with the page on desktop and mobile. Use bootstrap utilities like float-right to align images left or right.

Learn to display source code on web pages with Bootstrap code tags, create single and multi-line code blocks, show variables and equations, and highlight user input using keyboard tags.

Learn how to create bootstrap tables using the table class, with thead, tr, and td elements. Apply borders and bootstrap themes like table-dark, contextual classes such as table-success and table-danger.

Learn to style buttons with Bootstrap by applying predefined classes such as primary, secondary, success, danger, warning, and dark, plus sizes like lg and sm, block layout, and disabled state.

Create Bootstrap dropdowns by building a toggle button that shows a dropdown menu with items, enabled by the Bootstrap JavaScript file and aria attributes.

Explore bootstrap input groups to combine input fields, add labels like a dollar sign, control sizing with input group sm, and create a searchable input with a button.

Learn to create a Bootstrap jumbotron with a heading, descriptive paragraph, and a call-to-action button, and customize it to showcase messages on a home page.

Discover how to build and customize bootstrap cards to display images, text, headings, and buttons, using card bodies and layouts that resemble YouTube thumbnails for e-commerce and more.

Create a card by adding a title with the heading tag and card-title class, a subtitle with card-subtitle, descriptive text with card-text, and links with card-link, styling width with CSS.

Learn to create cards with images for product displays by placing an image on top of the card body, including the title, price, description, and a buy now button.

Build a card with a flush list group and multiple list items using ul, list-group, and list-group-item classes, showing how to integrate a list inside a card.

Build a card with a header and body, then add a footer, using header and body classes plus a title and text for a complete, styled card.

Learn how to align bootstrap card content, including the heading, title, description, and footer, by using left-aligned default text and toggling text-center and text-right on the main card.

Learn to create image overlays on card images by adding text using overlay divs, headings, and paragraphs, with color and layout adjustments.

Explore how to design colorful web cards by applying background color utilities like bg primary, danger, and success, and ensure readable text in the header and body.

Learn to group multiple cards with a card group class, switch to a card deck to create spacing, and apply color classes to customize individual cards.

Learn to build website navigation with bootstrap nav component using ul, li, and classes like nav, nav-item, and nav-link, and manage active states.

Explore how to align a Bootstrap navigation bar horizontally, using justify-content center for center alignment and justify-content end for right alignment, and switch to left as needed.

Explore creating a tabbed and pill-style navigation bar with active states, switch active items, and stretch the menu to full width for a responsive layout.

Explore breadcrumbs as a navigation aid in web design for full stack web development, using bootstrap markup to show current location with a breadcrumb trail, active states, and accessible labeling.

Learn to create and attach Bootstrap badges to headings, buttons, and products with spans, using colors like primary, secondary, and danger to highlight status or counts.

Build a responsive, collapsible Bootstrap navigation bar that collapses into a toggle button on smaller screens and expands with Bootstrap's JavaScript library.

Learn bootstrap forms using form tags, wrap inputs in a form group, apply the form control class to email and password fields, and add a submit button with responsive layout.

Master form controls by building single and multiple select boxes, text areas, checkboxes, and radio buttons using Bootstrap forms, with inline options and labeling.

Discover how to build a completely responsive news portal using Bootstrap, optimized for mobile, tablet, and desktop, with collapsible navigation, a jumbotron, and a three-card layout.

Build a responsive Bootstrap navigation bar with the official css and js files, featuring a brand and a collapsible menu for desktop and mobile.

Create a Bootstrap jumbotron inside a responsive container using the grid system to structure a news portal. Add a heading, a horizontal rule, and a subscribe call-to-action button.

Build a responsive news portal layout in Bootstrap by creating image cards with headlines, descriptions, and a read more button, and adapt the grid to mobile, tablet, and desktop views.

Build a bootstrap news portal layout with a left image pane and a right news list, using nested rows and img-fluid images plus read more buttons.

Build a responsive Bootstrap news portal with a left navigation and a right post panel. Implement a two-column layout (3/9), collapsible top nav, and image-driven content.

Build and integrate a responsive contact form in a Bootstrap-based news portal, using grid columns, form groups, labels, inputs for name and email, and a submit button.

Compare code editors and IDEs for learning and professional development, and explore popular options like Visual Studio Code, Sublime, Brackets, and Notepad++, with live page previews.

Create a desktop project folder, open a text editor, save an html file, and write javascript using a script tag and document.write('hello world').

Explore displaying output in JavaScript with document write to the page, an alert window, and console log for debugging in the console.

Learn how to use JavaScript variables to store and dynamically update stock prices, with clear guidance on declaration, assignment, and data types like integers, strings, and booleans.

Learn core JavaScript operations, including declaring and assigning variables, performing addition, subtraction, multiplication, and division, and concatenating strings like first and last names.

Learn how case sensitivity in javascript makes variable names with different capitalization distinct, and how // and /* */ comments control what runs.

Complete the JavaScript coding challenge 1 by declaring a number variable, displaying it on the page, then declaring a name string and outputting it to the console with an alert.

Tackle a JavaScript coding challenge that demonstrates case sensitivity in variable names and how correcting uppercase versus lowercase naming yields 300. Explore how this course introduces upcoming sections on functions.

Explore data types in javascript, showing how variables automatically take string, integer, floating point, and boolean values, and preview objects and arrays in upcoming lectures.

Learn how JavaScript functions reduce code redundancy across pages by encapsulating repeated calculations, and master function syntax including the function keyword, name, parentheses, curly braces, and how to call functions.

Define a function with parameters, call it with numbers, and return the result. Use x and y to perform addition and reuse the function for multiple calculations.

Explore objects in JavaScript and learn to store multiple attributes using name-value pairs. Define properties like name, age, and job, and access them with dot notation.

Compare local and global variables using a function example. See how the local variable remains within the function while the global variable is accessible throughout the code.

Explore JavaScript functions by declaring and calling them to display messages, compute a square, and return the sum of three numbers.

Master JavaScript by building a car object with color, price, and capacity, updating attributes, and displaying changes like the price and a Hi there message via button clicks.

Learn how to calculate string length, including spaces, and use backslash escape characters in JavaScript to include quotes, with practical examples.

Master JavaScript string methods, including indexOf and search to locate words, slice and substring to extract text, replace for substitutions, and toUpperCase and toLowerCase for case conversion.

Explore the to string method to convert integers to strings, the two fixed method to control decimal digits, and the pass and method to convert strings to integers.

Explore essential JavaScript math functions, including round, power, sqrt, abs, ceil, and floor, and learn how they handle rounding, powers, roots, and absolute values in numerical applications.

Explore how arrays store strings, access elements by their zeroth and first indices, and extend arrays with push in JavaScript, including calculating length.

Explore how to convert an array to a string, pop and shift elements, unshift new items, delete entries, and join arrays with concat.

Learn how to display a JavaScript message with proper escaping of quotes using backslashes, measure string length, and convert the text to uppercase using toUpperCase and document.write with line breaks.

Practice JavaScript coding challenges: convert strings to integers to add values, create and manipulate a five-fruit array, access the second item, push a new fruit, and pop the last item.

Learn how the if statement in JavaScript checks if age is greater than 18 and uses else to print you are an adult or you are not an adult.

Learn JavaScript comparison operators for if statements, including greater than, greater than or equal to, less than or equal to, and not equal, plus the difference between assignment and comparison.

Master conditional statements in JavaScript by implementing a discount rule: offer 10 percent off when a product's price exceeds $100 or its category is electronics.

Create a person object with name, age, and gender, then use an if statement to check for adult age and male gender to guide shopping recommendations, and display appropriate content.

Combine multiple conditional statements using the and and or operators in JavaScript, illustrated by validating age and gender during registration on a website.

Master how to use a for loop to repeat code by initializing a counter, checking a condition, and incrementing. Observe how this prints hello or hello world five times.

Compare a while loop to a for loop by initializing the counter outside, then use a condition and increment inside to print hello there five times.

Practice JavaScript fundamentals with a for loop printing numbers 1–200 and a while loop displaying squares 1–20, each on a separate line.

Design a JavaScript rating system that uses a switch statement to post comments based on five-star ratings, from very poor to excellent, and test in a browser.

See how the switch case in Javascript evaluates multiple conditions, similar to if statements, to execute grade-based code using cases, a default branch, and the break statement.

Explore regular expressions in JavaScript to search for patterns in strings and replace matches with new text, including the egg example with slash syntax and modifier concepts.

Validate a 10-digit number in JavaScript by throwing and catching exceptions, using try-catch-finally, and showing alerts. The challenge covers input length checks, else blocks for success, and the finally block.

Learn to replace text with a regular expression in JavaScript. Start from a string like 'i like apple' and replace with 'i like mango' using the replace method.

Learn how to handle errors in JavaScript by using try, catch, and finally blocks to manage user input errors, divide-by-zero issues, and other exceptions.

Explore hoisting in JavaScript: how variable declarations are moved to the top, why declaring after use can still run, and why initialization timing matters for code clarity and maintainability.

Learn JavaScript coding conventions and style guidelines to boost readability and maintainability, including camelCase for variables and functions, spacing around operators, four-space indentation, object formatting, and global uppercase variables.

Explore essential JavaScript best practices: use local variables, declare and initialize at the top, and avoid global variables and automatic type conversion to keep code clean.

Apply best practices to a JavaScript code sample by refactoring with camel case variable and function names, adding spaces around operators, and restructuring for readability and maintainability.

Understand the document object model and how JavaScript interacts with HTML to modify content and styling. Learn to access DOM elements, handle events, and add or remove elements with JavaScript.

Learn how to manipulate HTML content with the DOM using JavaScript, access a paragraph by its ID with getElementById, and update its innerHTML to reflect changes.

Learn to use getElementsByTagName to fetch all elements of a tag, access them via index in the HTML collection, and change content with innerHTML.

Master changing element styling with the document object model and javascript by selecting a paragraph by id and updating its style color from blue to green.

Explore the DOM click event by adding an on click attribute to an element and updating its content and style in response to user clicks.

Learn how to attach an event listener to a DOM element using getElementById and addEventListener, handle a click, and run a function that shows an alert.

Explore dom structure with document, element, text, and attribute nodes, and learn to navigate using parent, child, and sibling relationships while accessing content and node names with getElementById and firstChild.

Learn to dynamically add HTML elements with JavaScript by creating elements and text nodes, attaching them to a container via appendChild, and updating the DOM with getElementById.

This JavaScript coding challenge shows how to create a paragraph and a button, then change the paragraph text on button click using a JavaScript function with getElementById.

This coding challenge builds a web interface with a label, a text box, and a button; it updates the label to the text box value when the button is clicked.

Identify the parent element, access the target child, and remove the child from the DOM using a script. Learn to use getElementById and the removeChild method to modify HTML structure.

Explore the browser object model and its relationship to the document object model by examining the window object, screen properties, and how to access a page's location.

Learn to retrieve the current page url using the window object's location property, including href and name, and compare local file paths with hosted page paths.

Design a simple interest calculator user interface with bootstrap and javascript, using a container, rows, columns, and form groups for principal, years, and rate inputs, with no logic yet.

Build a simple interest calculator by extracting values with document.getElementById. Parse inputs to numbers, compute interest with principal, years, and rate divided by hundred, and display the result.

Introduce ES6, a modern version of ECMAScript for JavaScript, highlight backward compatibility with ES5, and explain how transpilers like Babel convert ES6 to compatible code for browsers.

Explore JavaScript in the browser console, learn the let keyword and its block-level scope in ES6, and compare it with var for scope control.

Learn how the const keyword in ES6 creates a constant binding, prevents reassigning primitives, and why arrays and objects (reference types) can be mutated without changing the binding.

Master default parameters in ES6 by learning how to define fallback values for function arguments, see practical examples, and understand how omitted or provided values affect output.

Learn how the ES6 spread operator, denoted by three dots, expands arrays to console log values without manual iteration, using a names array as a practical example.

Explore template strings, a feature demonstrated in JavaScript to preserve whitespace and create multiline messages. Learn to embed expressions with ${...} and output results with console.log.

Explore essential ES6 string methods, including repeat, starts with, includes, and ends with, and apply them to simple validations such as emails.

Learn how ES6 sets enforce unique values, create sets, add items with the add method, check size, delete elements, and convert arrays to sets to remove duplicates.