Front-end Web developer MasterClass HTML CSS JavaScript

Typing a domain name prompts your ISP’s DNS to translate it into an IP address. The browser then connects to the server to fetch and display the web page.

Explore how the browser, your window to the internet, requests files from servers and renders HTML, CSS, and JavaScript to display pages.

Explore how html, css, and javascript form the web page skeleton and style, how different browsers render code, and how styling and interactivity bring pages to life.

Power web pages with JavaScript to add logic and interactivity, connecting HTML and CSS through alerts, prompts, and script tags. Learn inline and separate file approaches to dynamic browser behavior.

Explore how browsers like Chrome power web development with built‑in dev tools to inspect, edit, and debug HTML, CSS, and JavaScript, improving performance and site rendering.

Learn to write and practice HTML by creating pages, using h1 tags, saving as index.html, and rendering in browser; explore editors like Notepad and Atom and practice on code pen.

Explore how heading tags like h1 to h6 structure content, enhance readability and SEO, and how self-closing tags and attributes help browsers render content.

Learn to include symbols not on keyboards using HTML character references, such as ©, with decimal and hexadecimal codes, and explore references from W3C and MDN to find available characters.

Recreate a browser view as HTML by translating headings, paragraphs, preformatted text, horizontal rules, and tag lists, then practice building the basic structure in your editor.

Create hyperlinks to external pages using absolute links and protocols. Use the target attribute to open in a new tab and keep users on your site.

Learn how to create a mailto link to open the user's email client, understand its desktop limitations and mobile reliability, and how to present email contact on your site.

Create a thumbnail portfolio by adding four images with 100px width, using placeholder images, arranged in two rows with paragraph tags, and linking to full-size versions.

Learn to create and convert unordered to ordered lists, use list items, start at specific numbers, choose types like letters or roman numerals, and style lists with CSS.

Master how colspan spans multiple columns to create totals, and use rowspan to extend cells across rows within a grid.

Create an HTML table to display hours of operation by day, using header cells for days, data cells for times, and inline styles for borders and padding.

Explore new HTML5 input types, including color, date, email, number, range, tel, and date locale, and learn how browser-based validation and built-in UI simplify form design.

The lecture explains the five HTML5 semantic elements—header, nav, section, article, and footer—and shows how using them creates meaningful, block-structured layouts and improves source-code readability.

Learn how css selectors target elements using id and hash syntax, and classes with periods to style multiple elements, applying colors like yellow, red, and blue.

Explore how to specify colors in css using hex, rgb, rgba, and formats like hsl, hsv, and cmyk, and use a color picker to tailor shade and transparency.

Explore CSS named color values, about 150 to 160 English color keywords, and apply them with hex or RGB values across your web elements.

Explore how to set body backgrounds with color and images, control repeat, position, size, and attachment, and create subtle parallax effects using modern CSS background properties.

Master the CSS outline property and its use outside the border. Use shorthand to set color, style, and width, and learn how outlines affect layout and potential overlap.

Padding creates inside spacing within an element, shifting content inward and increasing the element's height. Use the padding properties or the shorthand to set top, right, bottom, and left values.

Explore the css box model by inspecting a container and box with dev tools to identify margin, padding, border, width, height, and coloring, then apply measurements to recreate the layout.

Explore CSS font property, font family, font size, style, weight, and line height, and learn to use Google Fonts and shorthand font syntax to style text.

Add Google fonts to a web project by selecting font families on fonts.google.com, then embed or import them in your stylesheet and apply the font-family to elements.

Learn how to style hyperlinks with CSS by targeting anchor elements and overriding default colors. Manage states: link, visited, hover, and active, while removing underlines in navigation.

Learn to style HTML tables using external CSS, move inline styles to a stylesheet, and apply borders, alignment, and padding to create clean, reusable table designs.

Transform an unordered list into a styled navigation bar using CSS, with a main container div, list items and hyperlinks such as home, products, and contact.

Explore floats with the Brackets editor to build web layouts, including a three-column layout with navigation from earlier lessons, and learn how media queries enable responsive reflow.

Learn to use css floats to move elements left or right for web page layouts. Create two colored boxes, adjust padding and margins, and keep content in the normal flow.

Learn to build a three-column webpage by floating content blocks left and right, using 33% and 34% widths, padding, borders, and inline-block with clearfix for proper alignment.

Wrap the two columns in a parent container, float them left, and set percentage widths to form a three-column layout with full-height backgrounds and green and red colors.

Explore CSS combinators to selectively style elements, using descendant, child, adjacent sibling, and general sibling selectors to target paragraphs within sections and other nested structures.

Explore CSS pseudo-classes and selectors to apply styles based on element state and its position, from hover effects in navigation bars to selecting the first or last child and descendants.

Master CSS media queries for responsive design using min-width and max-width breakpoints. Test across devices with the dev tools toolbar and tailor styles for print, tablet, and mobile.

Apply borders to a box using width, style, and color, including shorthand and side-specific colors. Add a box-shadow with color, offsets, and spread, noting CSS3 browser compatibility.

Explore css3 border options, mixing solid and dotted styles, colors, and radii; apply border radius to shadows, and use border image with width, repeat, and outset for varied borders.

Learn JavaScript variable naming rules, including starting with a letter, allowed characters like dollar signs and underscores, case sensitivity, and avoiding spaces or reserved names.

Discover JavaScript data types, including strings, numbers, booleans, and undefined, and see how typeof reveals them. Learn how null differs from undefined, and how to declare, reassign, and compare values.

Learn increment and decrement operators in JavaScript, using a = 10 and a = a + 1, then a++ and a--, with refresh resetting values and shorthand tightening code.

Explore JavaScript increment and decrement concepts using a = a + 1 and the ++/-- shorthand, with examples of a, b, and c and notes on pre and post behavior.

Explore JavaScript assignment operators, using shorthand forms like a += 5, a -= 5, a *= 5, and a %= 5, and learn how increment produces cleaner time-saving code.

Explore JavaScript comparison operators and boolean results, including == vs ===, !==, and the relational operators <, >, <=, >=, with emphasis on type differences.

learn how JavaScript string operators allow only concatenation with the plus sign, using a = a + b or a += b, while subtraction remains invalid for strings.