Learn HTML, CSS , jQuery and Bootstrap by Building Websites

Install Google Chrome across platforms, explore its lightweight, modern design, and use its developer tools for debugging and live editing while preparing to pair with brackets in the next lesson.

Learn the basics of HTML, a markup language for web pages and applications, not a programming language. Discover how elements and tags render content in a browser.

Learn the basic HTML structure by creating doctype, html, head, and body elements with opening and closing tags, and use view page source to inspect your webpage markup.

Explore the core HTML elements, including the title, h1, h2, h3, and b tags, and learn how these building blocks shape headings and bold content with live browser preview.

Learn to add images to your website using the img element with src and alt attributes, and preview the image in Brackets' live preview for SEO benefits.

Learn to create HTML links with the anchor element and href, including external links, internal navigation via id attributes and hash, absolute URLs, and image links.

Build two HTML forms, a login and a sign-up form, with labeled inputs, placeholders, and proper attributes; connect them and prepare for future styling with Emmet-generated boilerplate.

Complete the one-page website challenge by adding a title, main heading, brief paragraphs, lists, images, and links, then view the next lecture to see how it's done.

Learn to use Chrome developer tools to inspect elements, test real-time changes, and adjust layout and fonts, then simulate responsive designs with device toolbar for testing on multiple devices.

Learn how cascading style sheets describe HTML presentation with selectors and declarations inside curly braces, using properties such as color and background-color to control layout and support responsive designs.

Learn css methods inline, internal, and external by applying color, font size, and other styles directly in elements or via style sheets.

Explore CSS selectors, including element name, id, and class selectors, and learn to target h1 and h2 elements, apply color and font size, and reuse styles across multiple elements.

Explore CSS colors by learning named colors, hex values, RGB and RGBA, and the HSL/HSLA models, including applying color and background color in HTML elements.

Learn how the CSS position property governs static, relative, fixed, absolute, and sticky positioning, and how top, right, bottom, and left move elements within the page.

Style ugly HTML tables into a modern look by applying a dedicated CSS stylesheet with borders, padding, fonts, and alignment, and add alternating row colors and hover effects.

Style a complete website using CSS by centering headings, setting colors, borders, paddings, margins, and inline-block image grids, and fix whitespace by resetting body margins.

Discover how JavaScript defines the behavior of a webpage, enabling real-time interactivity and bringing HTML and CSS basics to life for web development.

Learn JavaScript basics, including creating alert messages, using inline and event-driven code, and updating HTML content with document.getElementById and on-click actions.

Learn how to add jQuery to your about page, and choose between downloading the uncompressed development version (version 3.3.1) or using the CDN, while understanding fast loading and caching benefits.

Master jQuery syntax and selectors, using the $ function to select by tag, id, and class, bind a click to hide a paragraph, and include a scripts.js reference in index.

Learn how to handle user interactions with jQuery events, from double click to mouse enter and mouse leave, using event methods to trigger alerts and respond to actions.

Learn jQuery animations by selecting elements and using animate method with css properties, duration in milliseconds, callback, and queuing animations, while handling properties with quotes or camel case, color plugin.

Learn how to add and remove CSS classes with jQuery using addClass and removeClass, wire click events, and apply a blue style to elements to see dynamic changes.

Set up Bootstrap on your website using a CDN or local files, organize CSS, images, and JS folders, and correctly include jQuery and Bootstrap scripts for a ready-to-use template.

Master the Bootstrap grid system by using fixed and fluid containers, breakpoints, and media queries, and a 12-column grid to build responsive rows and columns.

Set up your web development environment by creating a project folder, organizing css, js, and bootstrap files, and using a starter template with downloaded assets for a bootstrap-based website.

Build a hero title in the header using bootstrap structure and a hero inner wrapper; animate rotating text with more fixed plugin and style the h1 with the Poppins font.

Learn to create a hero title reveal animation using CSS and jQuery, adding reveal classes, delays, and keyframes to reveal h1 headings with a yellow background.

Build a hero slider with a multi-image background, using CSS and a jQuery carousel plugin, and configure autoplay, loop, and fade effects for engaging web pages.

Build a responsive hero navigation bar with Bootstrap, featuring a fixed top header, brand image, right-aligned section links, and hash anchors to sections like home, what we do, and portfolio.

Create a 'what we do' section with a container, three content boxes, and animated text reveals using HTML, CSS, and jQuery when the section enters the viewport.

The lecture guides you through creating a portfolio section with image gallery, hover magnification, text reveal, a load more button, and a Magnifique popup lightbox gallery.

Create an about us section with left text and a right image, featuring an h2 heading and a contact us button, using a container and row layout.

Create the blog section with posts that include feature images, dates, titles, executive summaries, and an additional info block with icons and counts.

Delivers a two-column contact section with the address and social icons on the left and a contact form on the right, featuring name, email, and message fields with bootstrap styling.

Learn to build a bottom-aligned footer with a photo section and copyright text, using a container div, a span for copyright, and CSS margins.

Master how to make a navigation bar change to a transparent black background on scroll, resize the brand logo, add smooth transitions, and implement bootstrap scrollspy for active links.

Learn to create modern tapered edges on navigation bars and sections using CSS before and after pseudo classes, with background images and precise positioning.