Complete Full Stack Website Developer Course

Explore front end development, the part of a website users see, including buttons, styles, and animations. Learn HTML, CSS, JavaScript, Bootstrap, and other technologies to build engaging interfaces.

Discover html, the hypertext markup language that forms the core structure of every website. See how simple html code creates headers, paragraphs, and links, laying the foundation for future features.

Explore the structure of an HTML document by learning the doctype, HTML tag, head and body; define metadata, charset UTF-8, viewport, and title, then create structure.html in an HTML folder.

Learn how to create and format HTML headers using h1 through h6, with opening and closing tags and text, and understand why h1 is typically used once per page.

Learn how to use HTML paragraphs with the p tag to format regular text, compare with headers, and test content using lorem ipsum while building a paragraph HTML file.

Learn to create lines and breaks in html, using the hr tag and break tag to add spacing between headers and paragraphs.

Master anchors to navigate within and beyond your site using href, internal IDs, and hash links, linking to other pages and external sites with confidence.

Learn to create HTML lists using unordered ul and ordered ol tags. Add list items with li tags, and practice with eggs, milk, and cheese.

Learn to add images to web pages using the img tag with src and alt attributes, including external links and internal files, plus handling missing images with descriptive alt text.

Learn how divs in HTML organize content into invisible, separate sections by using three divs for distinct sections, with headers and paragraphs through hands-on practice.

Build a simple HTML dog adoption site with a main page and two detail pages for Henry and Maya. Include images, alt text, and internal links to navigate between pages.

Learn how to use HTML comments to annotate web pages, mark missing sections, and improve team communication during development. Practice adding comments with the two tags and real examples.

Create or import a favicon.ico, link it with rel='icon' and href in your html, then test the result by loading the full path in a browser.

Learn to create HTML tables by using table, tr, and td tags, add rows and data cells, and preview and save your table.

Learn to create table headers in HTML by using tr and th, apply a column span for header length, bold the header text, and build a simple table.

Learn how to embed an HTML document within another using the iframe tag, including src, title, height, and width, with practical steps to create and preview it.

Learn to use HTML file paths and relative links across folders, including same-folder, subfolders, and parent folders, with practical anchor navigation between multiple HTML files.

Create an HTML project to build a restaurant website in a table layout, including images sourced by pasting image addresses into href and using div, h1, hr, and table elements.

Learn the basics of css, attach it to an html document, and apply colors and shading to transform a plain page into a modern, styled website.

explore the three ways to apply css on a website—inline, internal, and external—demonstrating style attributes, style tags, and linked css files for scalable design.

Master CSS selectors, including element, class, id, attribute, and the universal star selector, with practical examples using h1–h5, class tab, id first-text, and color rules.

Apply colors in CSS to text and backgrounds with color properties and RGB values. Practice with an internal style sheet in Visual Studio Code using H1, H2, and H3 elements.

Learn CSS font editing by changing font-family, font-size, font-weight, and font-style across four paragraphs using internal stylesheets, with examples like cursive, extra large, 900 weight, and italic.

Explore the css box model, learning how height, width, padding, border, and margin shape elements and create spacing in layouts with practical VS Code examples.

Explore CSS positioning, including static default behavior, relative offsets, absolute positioning within a container, and fixed menus that stay put during scrolling, with practical box examples.

Build a fancy letter project with HTML and CSS. Style a tan background, blue border, and a cursive font with larger sizes and font weight 900.

Learn how to create rounded corners in CSS using border-radius, apply a uniform radius or distinct values from top and clockwise around, with practical examples using two aqua boxes.

Master CSS shadows by using text-shadow and box-shadow with pixel sizes and colors. Create an aqua text with a red shadow and an aqua box with a red shadow.

Learn to apply CSS gradient backgrounds by using linear-gradient to blend two colors, experimenting with top-to-bottom, left-to-right, and bottom-right directions in three sample boxes.

Learn how CSS margins place divs, center with auto margins, and align left or right using margin-left auto or margin-right auto, demonstrated with boxed divs.

Learn how to use CSS display to organize elements, including turning list items into an inline navigation bar with anchors, and practice applying display: inline to style a basic menu.

Learn how to align text in CSS with right, left, and center options, applying them to headers in an HTML file and previewing results as the screen resizes.

Learn to implement CSS responsiveness with the media tag and a 600px max-width breakpoint, adjusting .box-one and .box-two margins to switch from horizontal to stacked layouts on mobile.

Build a three-section portfolio website using HTML and CSS, featuring the home welcome section, a skills table with images, and a contact section.

Learn to host your site for free by creating a public GitHub repository, uploading HTML and CSS files, and enabling deploy from main to publish the site.

Explore how flexbox in CSS streamlines layout by arranging elements inside a div from left to right, using display: flex, with practical examples and a teaser for future flexbox topics.

Explore flexbox containers and learn to adjust a container's flex direction, wrap, justify content, align items, and align content using practical html and css examples.

Explore flexbox items inside a flex container and control layout using order, flex-grow, flex-shrink, and flex-basis, then center an item with align-self on a 300px tall container.

Discover flexbox responsiveness by converting a desktop row layout to a column on small screens, using a flex container and a media query to adapt the main menu items.

Explore css grid basics by applying display: grid to create clean, spacious layouts. Discover grid usage, spacing, and layout techniques, with upcoming topics on more grid concepts.

Edit and experiment with a grid container using grid template columns and rows, and adjust justify content and align content to arrange grid items.

Learn to edit grid items inside a grid container by using grid-area to position and resize items, set up a six-item html grid with css grid properties, and preview changes.

Learn how to combine grid with flexbox to center grid items by setting the grid container to display flex and justify content center for responsive alignment.

Learn how bootstrap adds professional styles and functionality to websites, add the bootstrap style and functionality code blocks from getbootstrap.com, and insert a prebuilt card example in VS Code.

Explore bootstrap cards for displaying items, center the card inside a container div using a flex layout (display:flex; justify-content:center; align-items:center; height: vh), and add the image source.

Explore bootstrap button themes, including primary, secondary, success, danger, warning, info, light, dark, and link, and learn how to implement them with the button tag, classes, and hover effects.

Discover how Bootstrap's 12-column grid powers responsive layouts, using container-fluid, rows, and column classes to control how many columns each item occupies across breakpoints.

Explore Bootstrap examples to create a professional, clean site by adding a navigation bar, icons, a hero section, and a footer, with code copy and image tweaks.

Build a Bootstrap project with a navigation bar, a welcome hero with an image, a pricing section, and a footer using HTML, CSS, and Bootstrap in a structured setup.

Explore JavaScript, the language powering the web, enabling calculations and animations on websites. Learn basic JavaScript concepts as part of the complete full stack website developer course.

Learn to link JavaScript to a website with the script tag and a src path, create test.html and test.js, and verify the connection by triggering a simple alert.

Explore JavaScript data types—integers, strings, and booleans—by creating variables, linking HTML to a script, and displaying values with innerHTML.

Learn JavaScript integer arithmetic with addition, subtraction, multiplication, division, and remainder. The lesson creates int.html and int.js to demonstrate variables and operator precedence using parentheses.

Master JavaScript math properties, including round, ceiling, floor, and random, to perform calculations and generate 1–6 random numbers in your HTML/JS projects.

Explore JavaScript strings, creating text with single or double quotes, and apply methods like length, slice, charAt, toUpperCase, and toLowerCase to format text.

Explore JavaScript arrays as lists using brackets and commas, and manipulate them with pop, push, splice. Learn zero-based indexing and displaying array values in the DOM with document.getElementById and innerHTML.

Explore how to use JavaScript if else statements to control outcomes based on values, compare data types with == vs ===, and chain else if for multiple conditions.

Learn how to replace multiple if statements with a JavaScript switch, using cases and breaks to map values to outputs, and implement a switch demo in HTML and switch.js.

Learn how to use a for loop in JavaScript to repeat code until a condition is met, increment i, and display the result on the page.

Explore creating and calling JavaScript functions to save time in coding, pass one or more values, and update a page element via getElementById and innerHTML in a hands-on HTML/JS example.

Explore HTML selectors in JavaScript, using querySelector to target by element type, by class, and in combination; update innerHTML for h1, h2, and h3 elements.

Learn how to change CSS with JavaScript by selecting an element, using classList.add and classList.remove, and applying or removing classes to an h1.

Create an input field and a submit button in HTML and use a JavaScript function to read the name with getElementById and display it via innerText in the page element.

Create and inject a new paragraph using JavaScript by leveraging document.createElement, createTextNode, and appendChild, then insert it before an existing element with getElementById and insertBefore.

Build a JavaScript calculator project with HTML, CSS, and JavaScript, featuring two inputs for numbers, operation buttons for add, subtract, multiply, and divide, and a live result display.

Explore jQuery, a popular JavaScript library that simplifies element selection. Copy the CDN script from jquery.com and paste it into a test.html in VS Code near bottom of the body.

Master jQuery element selection using the dollar sign to target h1, .h2-text, and div p, then update content with .text() across practical examples.

Learn to style with jQuery by using addClass and removeClass to dynamically apply and remove CSS classes on elements like h1, with a practical workflow using style.html, style.css, and style.js.

Learn how to add elements in jQuery using the .html method by creating add_e.html and add_e.js, then insert a div and a p tag with text.

Learn how to set html attributes with jQuery using the attr method, including applying href to anchors and wiring up scripts in a test html setup.

Explore jQuery animations by practicing hide, show, toggle, fade out, and slide up and down, and learn to customize with animate using margin, left, padding, and percentages.

Learn to handle user inputs with jQuery by wiring a click event on a button to read input value with .val() and display it in an h1 element.

Build a simple tic tac toe game with jQuery by creating a 3x3 grid, tracking player turns, and displaying a winner when three in a row.

Explore the back end behind the scenes, including the server hosting the front end and data connections, and learn technologies like NodeJS, Ejs, postman, and PostgreSQL.

Learn how node js enables JavaScript on the back end, install from nodejs.org, and verify with node -v; then use Visual Studio Code, terminal, and node to run test.js.

Explore native mode modules in nodejs and learn to create and read files using the fs api with fs.readfile and fs.writefile, guided by official docs and hands-on practice.

Explore npm, the node package manager, to install and use packages like superheroes; initialize with npm init, install, and run test.js with require or import.

Explore Express on Node.js to simplify server creation, including npm init, installing Express, and running a basic app on port 3000 with a get / that returns hello user.

Learn to implement express http requests such as get and post, test them with Postman, understand 200 and 201 codes, and simulate a login post to localhost:3000 with x-www-form-urlencoded data.

Build a custom Express middleware that logs request methods and URLs, uses app.use and next, and serves a simple hello response on port 3000.

Learn how to use EJS, a template language to separate HTML, CSS, and JavaScript, set up Express, create a views folder, and render dynamic values with <%= %>.

Learn the four main EJS tags: output variables, execute JavaScript, embed HTML, and include files. Build a sample with a pets array to render a list and a footer include.

Learn how to pass data with EJS in a multi-page site by building a form, handling post requests with express, and rendering results.

Set up and serve static assets in an express app by declaring a public folder with images and CSS, configure app.use(express.static('public')), and reference styles to apply CSS to pages.