Full Stack Web Development Megacourse: Beginner to Expert

Explore the basics of HTML and CSS to build the front-end of websites, mastering structure, layouts, fonts, and colors, with optional further study sections at each unit.

Develop a sloths-themed website using HTML and CSS basics, applying fonts, colors, and rollovers to mirror the provided layout while practicing with the course assets.

Use Visual Studio Code to set up your development environment, install the live server extension by Ritwick Dey, and use go live to preview HTML and CSS in real time.

Create a basic HTML page in Visual Studio Code using the HTML5 doctype, with opening and closing tags, and structure the head and body with title, meta, and common elements.

Build a simple HTML page using index.html, explore HTML attributes, meta tags (description, keywords, author), and a favicon linked from the images folder to display on a live server.

Learn how to create and link HTML pages using anchor tags, href attributes, and internal and external links, including using dot dot slash and target=_blank to open new tabs.

Learn how to insert images in HTML using the img tag with src and alt attributes, including relative paths, accessibility via alt text, and basic image optimization techniques.

Create the header with the semantic header tag. Link home to index.html, load logo from images with alt text, use nav, and mention unsplash for copyright-free images.

Explore the differences between block-level divs and inline spans, learning how divs create sections and disrupt layout while spans stay on the same line and respond to inline CSS.

Build a semantic web page with sections, headers, and a footer, using divs and spans to create three sloth boxes and a banner, plus a dynamic year with JavaScript.

Create a dedicated contact page by duplicating the layout, including the header, navigation bar, logo, and footer; link to contact.html, test it, and plan a future form and table.

Learn html forms basics, including inputs, labels, required attributes, and common types (text, email, date, color), plus checkboxes, radio buttons, and text areas for accessible, usable forms.

Create a basic contact form inside the slot site by adding name, email, and message fields with proper IDs, a header, and a submit button, laying groundwork for styling.

Learn to build and display data with tables using table, tr, th, and td, creating rows and headers with borders for clear data presentation, not for layouts.

Create a table on the contact page to display hours of operation across days, spanning two columns, with plans to style via css for a cleaner layout.

Master the basics of CSS, including inline, internal, and external styling, and linking CSS files to HTML. Learn selectors, properties, values, colors, font families, and comments to style pages.

Learn how to use CSS classes and IDs to selectively style elements, apply class selectors, understand ID uniqueness, and why IDs belong to JavaScript rather than CSS.

Master the CSS box model by examining width, height, padding, border, and margin to control a box’s size and spacing. Learn box-sizing border-box, inline vs block, and class-based div styling.

Master flexbox by creating a flex container with display:flex and distributing items evenly. Learn to center content and manage space with justify-content and align-items for responsive layouts.

Learn to bring in fonts via Google fonts or font-face, apply them with font-family in CSS, and style the header using Roboto and Jungle fonts.

Style the header with flexbox to place the logo left and links right, using padding and a green background, and apply a hover transition to the logo.

Learn to style a responsive navbar using flexbox, set the nav to 40% width, center items with space around, and apply jungle font, color #b67b65, hover scale, and transitions.

Create a full-width banner using a centered sloth background image with cover, then build a flexbox meat sauce section containing styled sloth divs and an h1 with Roboto typography.

Style a responsive footer with flexbox, positioning an image and copyright text as two flex items. Use justify-content: space-evenly, align-items: center, and Roboto font for a clean site-wide footer.

Style the contact page to resemble the home page by adding contact.css and copying the header from index. Adjust the banner height and style the nav, logo hover, and footer.

Style the contact page with a flexbox layout for the form and hours table, fix the banner and header, and refine inputs, labels, and the contact button using Roboto fonts.

Style the schedule table on the contact page using CSS: add a schedule-table class, apply borders, equal column widths, centered text, border-collapse, alternating row colors, and Roboto font.

Join the full stack web development megacourse, beginner to expert, to master HTML and CSS basics, normal flow, floats, grid and flexbox, plus Sass, Tailwind, Bootstrap, and GitHub workflows.

Create a responsive products page with six uniform thumbnails in a two-column layout, with hover effects and a modal on click, using the about page as the starting point.

Learn to style product thumbnails with a new products.css, stop floating with clear: both, and lay out inline-block thumbnails that scale with media queries, including hover overlays that reveal text.

Learn to enhance a products page by adding hover overlays to six thumbnails, darkening images and revealing text, then prepare a modal box and accessible interactions using CSS.

Turn thumbnails into clickable links that open a modal dialog with a darkened background and close X. Implement the modal in a separate modal.css with fixed positioning and opacity transitions.

Learn to create uniform 600 by 600 pixel thumbnails using a master Photoshop file, maintain consistent web-ready images, and export them as web assets for scalable portfolios.

Build a real flexbox site by creating a six-card gallery with shoe images, a header with a logo and navigation, and a responsive bottom navigation for mobile.

Fix the css typo to enable a bottom nav with three links, hover effects, and centered text. Use flexbox to stack three top boxes and adapt on mobile.

Practice building an about page with flexbox by turning a layout with three rows into a responsive single-column design, using row reverse to swap image and text.

Create a responsive contact page using flexbox, with a left sidebar newsletter sign-up form and a main map, converting the layout from a grid and refining with media queries.

Explore CSS grid and its 12-column foundation, gutters, and how to position boxes across header and footer to build grid-based pages.

This lecture demonstrates building a CSS grid layout in Sublime, including a reset, a 12-column grid with grid template rows and columns, and styling for header, footer, and main content.

Explore building and arranging grid boxes across a 12-column layout, applying full-width, half, third, quarter, and one sixth spans, and turning them responsive with a media query.

Learn to build responsive grid layouts with a media query and max-width breakpoint, adjust to 12 columns for articles, and control header, footer, and rows with grid template rows.

Explore the holy grail layout with css grid, building a five-box grid featuring header, navigation, main content, sidebar, and footer, with equal-height columns and a responsive media query.

Build a real portfolio site using CSS grid, with thumbnails and a structured folder layout (img and cs), and set up HTML and CSS, header, nav, and social icons.

Build a grid-based page with a main.css reset, header and footer across, nested grids for logo and nav, responsive image sizing, and hover effects; prepare for mobile with media queries.

Build a responsive social icon bar with a sprite image and hover effects, using a separate sprites.css, and apply a mobile-friendly grid and centered logo via a media query.

Learn to build a masonry grid that arranges uneven images in columns, transforming a photo page into a Pinterest-style gallery while preserving header and footer.

Build a responsive masonry grid using a separate masonry_one.css, style headers and cards, and apply four media queries to convert from four columns on large screens to one on phones.

Create a responsive coffee portfolio with a custom masonry css grid, add a dedicated coffee page, and update html links to showcase image-based grid cells.

Learn Bootstrap fundamentals with Bootstrap 4.6, starting from a starter template and a local CSS file to customize a responsive navbar. Explore grid, containers, components, and utilities to structure pages.

Master Bootstrap basics by turning a fluid navbar into a fixed, containerized layout, styling nav links, and building responsive columns with call-12 and breakpoints.

Explore bootstrap basics by building a real-world page with a jumbotron and carousel, adjusting containers and styling. Set up a bootstrap project folder with css and image assets.

Learn to build a responsive website with bootstrap by recreating home, about, and sign-up pages, featuring a navbar with logo, modals, forms, font awesome icons, and a responsive grid.

Learn to build a responsive columns layout for a home page with header, nav, content, image, and footer using HTML and CSS. Override CSS and apply bootstrap methods.

Style the footer with a 60-pixel height and pastel background; apply padding and typography to the footer text and social icons, and implement hover effects.

Design the about page using Bootstrap, creating a three-column layout with responsive col classes, then replace content with image and text boxes and add learn more modals with animated gifs.

Learn to implement and customize Bootstrap modals on the about page by copying, adjusting IDs and targets, inserting images, and styling modals and buttons for a responsive three-modal layout.

The lecture guides fixing missing closing divs in a bootstrap layout, including modals and columns, and building a sign-up page with a two-column grid and contact form.

Refine the signup section by adjusting margins, padding, and widths in css, then implement responsive media queries to align sections and images across devices, using Bootstrap.

Explore sass, a preprocessor that compiles scss into css to simplify styling, using Visual Studio Code with Live Sass Compiler to run and watch scss to css.

Open Visual Studio Code and enable the live sass compiler to write scss with color variables and a reset, then generate a styles.css from sass.scss for the browser.

Set up Scout for Sass and SCSS workflow, configure the CSS output folder, and compile SCSS into styles.css in real time. Begin styling with variables and nesting in SCSS.

Learn practical sass styling workflows in Sublime, including nesting site header navigation, creating horizontal nav with list-style removal, and using extends and color variables to style buttons and hover effects.

Master Sass variables and a reusable gradient mixin to build cross-browser gradients, apply it with at include, and use Scout to catch syntax errors in VS Code.

Learn to build a sass project with scss and css outputs, using Scout, Google Fonts, Font Awesome, and a header with a logo, navigation, and a flex- and grid-based layout.

Master sass styles and scss structure to build a multi-section page with top and bottom boxes, a footer, and a flex-based mobile navigation.

Learn scss fundamentals: use variables for colors and image sizes, and manage comments in sass, including how // comments differ. Build responsive header and top boxes with flexbox.

Learn to build a responsive web layout with flex and sass mixins, styling bottom and inner bottom boxes, a footer and bottom navigation, and integrating Font Awesome social icons.

Build a masonry gallery with sass using an underscore gallery.scss imported into the main stylesheet. Arrange nine Mason images in a four-column grid with a media query for small screens.

Continue building the team page by converting the gallery to a team layout, styling responsive card components with Sass, flexbox, and images, and adding interactive bio buttons.

Wrap up this lesson by building a responsive contact page with sass, grid, and flex, using left and right content boxes, font awesome icons, and email and phone links.

Celebrate finishing the html css portion and look ahead to sql, where you will create databases and tables, manipulate data, and display results on the front end.