Full Stack Web Development MASTERY Course - Novice to Expert

Compare static and dynamic websites to see how pre-built HTML, CSS, and JavaScript pages load quickly, vs runtime content generated by server side language.

install and set up visual studio code, learn differences from visual studio ide, configure folders, and use live server with extensions like beautify and material icons.

Create an index.html using a boilerplate template to learn the basic website structure, including doctype, HTML, head, body, metadata, and SEO basics.

Understand the basic website structure and boilerplate, manage html css and javascript files, embed external stylesheet and scripts, and apply html comments and best practices.

Learn to use anchor tags to link across pages, embed images and videos, and embed external content with iframes, including alt text, target attributes, autoplay, and looping.

Master HTML forms by using the form tag, input types (text, email, number, date, file, radio, checkbox), textarea and select, labels with for and id, and backend action for submission.

Learn how HTML entities preserve spaces and display special characters, including non-breaking spaces, copyright and currency symbols, and how to render less-than and greater-than signs with < and >.

Learn on-page and off-page SEO fundamentals and semantic HTML, including clear titles, descriptive URLs, meta tags, author data, and semantic elements like header, nav, main, section, and article.

Unlock how CSS styles HTML, enabling responsive websites with media queries, and apply styles through inline, internal, or external stylesheets by using selectors, properties, and values.

Master CSS selectors including element, id, class, grouping, and universal selectors, with hands-on examples on applying color, background, and layout rules via descendant and child relationships.

Explore fonts in css, including web safe fonts, font stacks, and font-family, and learn to import google fonts to control font-size, font-weight, font-style, and line-height.

Understand the CSS box model, including content, padding, border, and margin, and learn how box-sizing and border-box control layout across elements.

Explore how float and clear CSS properties wrap text around images, control alignment with left and right floats, adjust margins, and prevent overflow.

Learn to style buttons and links using CSS selectors, hover and visited states, and basic properties like color, background, border, and cursor, with practical examples in an edge html project.

Explore the CSS display property, compare block, inline, and inline-block elements, and learn how display affects width, height, margins, and padding.

Explore the CSS position property to control element location, covering relative, absolute, fixed, and sticky positions with practical examples using a container and four boxes.

Explore how visibility and z-index control element overlap in CSS, compare visibility hidden with display none, and learn how relative and absolute positioning affect stacking and overlaps.

Learn how flexbox in CSS helps align and wrap four boxes in a flex container, exploring flex-direction, justify-content, align-items, wrap, order, and responsive behavior.

Explore CSS box shadow and text shadow to create 3-D effects for boxes and text, using offset x, offset y, blur radius, spread radius, and color.

Learn to create css variables and custom properties, define them in a root element, and apply them to properties like background color and font color for consistent styling.

Master grid layouts by exploring display: grid, grid-template-columns, grid-gap, and grid-area, and compare them with flexbox to structure modern web pages.

Master Bootstrap 5.1 by building a responsive website from starter templates, exploring core components such as accordions, alerts, badges, cards, carousels, navs, buttons, forms, and the grid layout.

Build a website from scratch using Bootstrap templates, implementing a dark navigation bar, carousel, services, contact form, FAQ accordion, and embedded Google Maps with a responsive grid.

Explore tailwind css, a utility-first framework, learn how it compares to bootstrap, install and configure for production with node and npm, and build ui components.

Set up tailwind for production by initializing npm, configuring postcss, and applying external styles to deliver production-ready, responsive layouts with utility-first tailwind elements that simplify building independent components.

Learn to build a production-ready Tailwind website from scratch by configuring fonts and sizing with Tailwind classes, including font families and typography options.

Explains margins, borders, and padding with Tailwind CSS utility classes, showing how to set thickness, color, style, and spacing with m-5 and p-5.

Explore creating custom responsive designs with Tailwind CSS by using breakpoint prefix classes to build adaptive UIs, changing background and text colors at small, medium, large, and 2xl screens.

Learn how to use tailwind's @layer directive and apply directive to create reusable custom classes, control layer order (base, components, utilities), and balance benefits with maintainability in large apps.

Explore how to customize Tailwind CSS by creating a custom config, adding new breakpoints and utility classes, and extending spacing and font sizes for responsive design.