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.

Use a web editor to write and render html, css, and javascript for frontend code, exploring options from Dreamweaver to notepad, Brackets, and online editors like CodePen, JSFiddle, and Plunker.

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.

Explore file structure basics, including root pages like index.html, folder organization for css, javascript, and images, linking practices, and hosting considerations for serving sites.

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.

Create a basic HTML boilerplate by including the doctype, html, head, and body tags with a title, using lowercase tags for readability.

Create a reusable HTML boilerplate template with doctype, head, title, and body sections to quickly build web pages and practice proper opening and closing tags.

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.

Update your HTML template by setting language to English, adding UTF-8 charset, and implementing a mobile-friendly meta viewport with device width and initial scale of one.

Learn to structure content with common HTML tags—paragraphs, headings, line breaks, and horizontal rules—to convert long text into readable web pages. Apply whitespace handling and proper nesting to improve readability.

Learn how the HTML pre tag preserves whitespace and layout, outputting content exactly as written, including spaces and line breaks, for copied or dynamic 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.

Learn how hyperlinks power web navigation with anchor tags and href attributes, link internal pages within a folder structure, and use relative paths to navigate between directories.

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 to create internal bookmarks in HTML by assigning id attributes to sections, linking with hash anchors, and enabling in-page navigation to scroll between top, cool stuff, and other content.

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.

Add images to your web pages with the img tag, using src and alt attributes, and control size with width or height, via relative paths or external URLs.

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.

Learn how to nest lists inside other lists using ordered and unordered HTML lists, create readable structures with proper indentation, and effectively organize web content.

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

Explore a quick tip to bring code pen styling into your editor using inline styles. Also learn to link a stylesheet in the head so updates apply across pages.

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.

Develop and implement HTML form elements, including file inputs for uploading files and select dropdowns. Build practical contact forms with textareas, options, and proper submit controls.

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 to embed external and internal pages with the iframe element, control its size and border, and understand caveats like search indexing and breaking out of frames.

Wrap up previous HTML, CSS, and JavaScript lessons by building a fully functional website, updating the navigation, and using the index as a template for home, portfolio, and contact.

Learn how cascading style sheets (CSS) enable modern web design by styling HTML within the browser, and compare the look of pages with and without CSS using dev tools.

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, including content, padding, borders, and margins, by using Chrome dev tools to inspect elements, adjust styles in real time, and preview responsive layouts.

Apply height and width in CSS to create a responsive container with a max width of 870px and 90 percent fluid sizing, using percentage and pixel values for flexible layouts.

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.

Explore CSS text property fundamentals, including text-align options, text-decoration for hyperlinks, and text-shadow effects, using dev tools to preview fonts, shadows, and typography as you adjust.

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.

Explore letter spacing and line height in css to control readability, experiment with positive and negative values, and preview changes using dev tools as you adjust fonts and colors.

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.

Learn how css position properties control element layout, from static to relative, fixed, and absolute, with examples of left and top and how scrolling affects placement.

Update dev tools to apply and test styling. Copy and paste new style rules from the temporary .csx file into your page and fine-tune color and positioning.

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 how CSS floats move images out of the normal flow to the left or right, with text wrapping around them, and use max-width: 100% for responsive sizing.

Learn to create responsive image thumbnails by wrapping images in a thumbnail span, applying padding, borders, and border-radius, using box-shadow, and floating left or right for flexible layouts.

Build a basic web page layout using floats, containers, and divs, creating header, content areas, and navigation. Compare one-column and multi-column designs via floating and centering.

Build a two-column layout using floats, with a left main content and a right side menu, adjust widths with percentages, and apply clear fixes for proper alignment.

Create a two-column page layout with floats for a sidebar and main content, wrap with a container and clear fix, and apply a red full height background.

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.

Discover CSS attribute selectors, targeting elements by attributes such as target and title. Apply colors and styling to anchors and inputs using contains, equals, wildcard, and class-based rules.

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.

Explore how css background-image supports multiple images, including png and jpeg files, and how transparency lets the background color show through.

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.

Apply vibrant backgrounds using CSS by combining background color with linear gradients that blend multiple colors and alpha values. Learn gradient directions and browser-specific syntax for Safari, Firefox, and Opera.

structure a web page by styling a container and building a navigation bar from an unordered list; remove list markers, arrange items horizontally, style anchors, and add a red hover background.

Refine the side menu by removing default margins and padding, setting list items to full width blocks, and enabling hover with a coral background and no text decoration.

Learn practical CSS tweaks to refine page layout and visuals, including padding, color scheme, fonts, links, and rounded corners for a polished front-end.

Discover what JavaScript is: an object-based, cross-platform scripting language that powers interactive web pages with HTML and CSS, as one of the internet's three core technologies.

discover how to add javascript to webpages using onclick attributes, script tags, and external .js files, and learn best practices for loading and debugging with console.log.

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.

Create a basic html page and link a javascript file to define variables A and B, then console log A plus B to display hello world.

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.

Learn how JavaScript logical operators combine comparisons to form complex conditions using and, or, and not, returning boolean true or false.