The Result-Oriented Web Developer Course - BOOTCAMP 2025

Improve video viewing by selecting 720p in settings, enable English subtitles, and view the full lesson text on the right, then navigate lessons and Q&A across all lectures.

Install Sublime Text as a beginner-friendly text editor and later switch to Visual Studio Code for cross-platform development; download from sublime.com, choose your OS, drag to applications, then open.

Install Google Chrome to begin web development. Learn to download, install, and verify the browser for a quick setup.

Discover what a webpage is and how to write one, focusing on HTML, CSS, and JavaScript; learn HTML basics, HTML5 relevance, and why older versions are outdated.

Explore how html tags form a webpage structure, from doctype html to the paired head and body tags, with title and meta charset utf-8 describing the page.

Create your first webpage by making a site folder and saving a .html file, then structure it with doctype html, html, head, title, meta charset utf-8, and body.

Explore how to create and style headings using h1 through h6, place content in the body tag, and preview how font sizes differ across heading levels.

Master inserting text with the <p> tag for paragraphs and using <br> for line breaks; learn why HTML ignores extra spaces and how to create new paragraphs.

Learn how to align text in HTML using the align attribute (left, center, right, justify), note its outdated status, and apply bold and italic formatting with <strong> and <em>.

Learn to create ordered lists in HTML using <ol> and <li>, structure headings with <h4>, and distinguish ordered from unordered lists with a lemonade recipe example.

Create unordered lists in HTML using the ul tag and li items, illustrated by a lemonade ingredients example. See each item rendered as a bullet point in the list.

Learn to create nested lists in HTML by combining ordered and unordered lists, adding sub-lists inside list items, and switching between ul and ol as needed.

Learn how to insert images into a webpage using the img tag, set the src path, add alt text for missing images, and organize images in an image folder.

Learn how to size images with the width attribute in HTML, using px units, and let height auto-adjust to keep proportions, avoiding distortion.

Build a table in HTML by defining table, caption, tr, th, and td tags, then customize borders, spacing, and padding to create a structured, captioned data table.

Learn how to add hyperlinks in HTML using the a tag and href, open links in new tabs, and use formats like tel and mailto for interactive web pages.

Learn to add comments in html using angle brackets, an exclamation mark, and two hyphens. Use comments to annotate headings, paragraphs, and links without displaying on the page.

Learn how to set up a simple multi-page site, create index.html and page-2.html, and use relative links to navigate between pages.

Master relative links across nested folders by creating and linking multiple HTML pages, using folder and subfolder paths, and understanding how to move up and down directories with href.

Learn how UTF-8 encodes every Unicode character with a universal code table, using decimal and hexadecimal representations, and insert characters on web pages with HTML entities.

Embed video and audio on a web page using HTML5 video and audio tags with source elements, ensure browser-compatible formats, and add controls.

Learn to insert special symbols in HTML using code names like ampersand, lt, gt, and quote. Master symbols such as copyright, trademark, and the ampersand itself.

Build HTML forms using the form and input tags, including text, checkbox, and radio inputs with placeholders and names, plus submit buttons and drop-downs via select and option.

Build a simple multi-page website by exploring folder structure, home and contacts pages, and two pages like Red Velvet Cupcake, with links, maps, and email actions.

Create a basic coffee and cake website by setting up a project folder, building an index.html with XHTML structure, including images, headings, paragraphs, and nested lists for menu items.

Create the contact-us.html page, including a centered h1, phone and email with tel: and mailto: links, and a map image.

Finish the coffee & cake project by adding sweets and red velvet pages, linking them via a desserts folder, and enabling back-to-home navigation. Center images and test all links.

Adjust video quality to 720p to avoid blurring, enable English subtitles, view full lesson text via the text panel, and explore questions and answers across the course.

Learn how css, or cascading style sheets, stylizes a web page by controlling text color, size, background, and layout, while html provides the content.

Connect CSS to HTML through inline style, a style tag in the head, and an external style.css via a link. Apply color and font-family to selectors like p and h1.

Explore the four font families—serif, sans-serif, handwritten, and decorative—and their defining features with example fonts, including monospace. Learn how to choose fonts by use, text length, and size for readability.

Discover safe fonts across Windows, Mac OS, and Linux, and learn how font-family fallbacks pick the first available font to ensure consistent text rendering.

Connect non-standard fonts to your site by downloading font files or using Google fonts, and configure them with @font-face in CSS, noting woff and ttf formats.

Learn how to style text with CSS by adjusting font-weight for bold, font-style for italic, and text-decoration for underline, overline, and line-through, with practical examples.

Explore text transformation in CSS by applying text-transform values such as capitalize, uppercase, and lowercase, and adjust letter-spacing and word-spacing to control text space.

Master text alignment with the CSS text-align property, learning left, center, right, and justify, and adjust line-height using pixels, unitless multipliers like 1.5, and percentages.

Explore three css color methods: named colors, rgb values, and hex codes, with examples like red, blue, green, and yellow. See rgb to hex conversion and usage.

Explore how CSS properties list-style-type, list-style-image, and list-style-position customize HTML lists (ul and ol) with bullets, custom markers, and inside or outside positioning.

Learn how CSS class selectors style HTML elements, applying h1 color, text-transform, font-style, and font-weight, with practical examples of lists and multiple classes.

Explore the difference between IDs and classes in CSS, assign a unique id to the main-heading, and implement in-page anchors that scroll to sections like back-to-top.

Wrap words in a span tag to apply targeted CSS styles, such as color and font-weight, enabling selective highlighting within paragraphs.

Explore how web pages are organized into blocks using divs, header, central, and footer, then nest blocks with p tags and divs, and apply CSS through classes.

Master how float and clear govern CSS layout, placing elements left or right, wrapping text around floated blocks and restoring normal flow with clear.

See how the browser renders a page by distinguishing block and inline elements, and relate h1, h2, p, ul, and li to the block model in CSS.

Master the box model, focusing on the border, padding, and margin, with control over border width, color, and style. Learn shorthand border syntax and per-side borders to create varied looks.

Explore how padding adds space inside the block and how padding values influence width and height with borders. Learn how box-sizing toggles between content-box and border-box to keep layouts predictable.

Explore margins in the box model: use shorthand and per-side values, see negative margins, and center blocks with auto margins.

Explore web inspector as the web developer’s go-to tool for inspecting HTML structure and CSS styles, using the elements tab, element highlighting, and live style adjustments.

Explore how to style element backgrounds with color and images, control sizing with background-size, and manage repetition with background-repeat, including no-repeat, repeat-x, and repeat-y.

Explore how to control css backgrounds using background-position and background-attachment, learning common placements such as left top, left center, center center, and fixed behavior during scroll.

Learn how the CSS position property works across static, absolute, relative, and fixed values, using left and top to move elements and understanding ancestor versus window references.

Learn how z-index controls stacking order among positioned elements using orange, green, and blue blocks; the highest z-index appears in front, the lowest behind, with relative positioning required.

Explore the display property in CSS, covering block, inline-block, inline, and none, with practical examples using three colored divs to show layout, sizing, and hiding elements.

Learn to create CSS gradients using linear-gradient and radial-gradient with background-image, understand angle degrees and color order, and explore practical examples and tools like ColorZilla.

Explore how border-radius rounds edges of blocks, using 1–4 values to control each corner, and learn how 50% creates circles, ellipses, or egg shapes.

Master the css box-shadow property to create outer and inner shadows, adjusting offset-x, offset-y, blur-radius, spread-radius, and color, and chaining multiple shadows.

Explore overlapping elements and control visibility using rgba and opacity in CSS. Learn how alpha transparency differs from opacity and affects only backgrounds, not text.

Explore the seven-lesson structure, including two lessons on advanced selectors, four groups of pseudo-classes, and pseudo-elements, for practical web development.

Explore popular CSS selectors such as tag, class, and id; practice selectors that target elements inside others, direct child selectors, adjacent and general siblings, and the universal asterisk.

Explore attribute selectors in CSS, including exact attribute values, begins with, ends with, and contains, with practical examples using input types and href links.

Explore how link pseudo-classes—link, visited, hover, and active—control link styling from unvisited to visited states, then transform links into interactive buttons with hover and active effects.

Explore the second group of form-related pseudo-classes and learn to style inputs by state—focus, checked, valid, invalid, enabled, and disabled—using CSS selectors and labels.

Discover how to use the third group of css pseudo-classes that depend on position, including first-child, last-child, nth-child, and their type-based cousins, with examples of odd, even, and 3n formulas.

Explore the not, empty, and target pseudo-classes from the 'other' group and see how they affect list items, hover effects, and anchor targets.

Learn how pseudo-elements in CSS extend HTML styling by adding before and after content, and styling first-line and first-letter text. Discover practical examples like creating horizontal lines and block display.

Explore the CSS transform property and master the main functions—rotate, scale, translate, skew, rotateX, and rotateY—with practical examples, hover interactions, and a preview of animation techniques.

Learn how CSS transitions animate changes on hover using transition, transition-duration, transition-delay, and transition-timing-function to smoothly animate width, height, and transform.

Explore HTML5 semantic tags such as header, footer, main, aside, article, nav, and section, and learn how paired tags clarify structure for browsers and developers.

Discover Emmet, a plugin that speeds HTML markup by expanding short syntax into complete structures with a tab press, enabling rapid mockups of header, navigation, main with articles, and footer.

Discover how to install the Emmet plugin for Sublime Text using package control, restart the editor, and verify the setup with a test HTML file.

Learn how to use Emmet to generate HTML by typing abbreviations and tabbing to unfold tags and attributes. Master nesting, grouping, and repetition to build structured page layouts.

Learn to use Emmet to quickly build HTML structures with dot shorthand, lorem ipsum text, and numbered items, and apply Emmet CSS shortcuts for padding, margins, and widths.

Learn how Photoshop serves as a key graphic editor for web developers, bridging design layouts to live websites, and explore its 7-day free trial.

Learn to download and install Photoshop from adobe.com, create an Adobe account, and sign in to Creative Cloud to complete the 7-day free trial.

Master Photoshop basics for web development by learning how to open psd files, save as jpeg, understand layers, and compare psd versus jpg formats.

Learn to use Photoshop to measure website layouts, convert centimeters to pixels, and capture element sizes, colors, and fonts, including hex and rgb values and Helvetica Neue details.

Save web images by cropping specific parts and exporting layers with quick export or crop tools, choosing png, jpg, or svg formats, including svg icons.

Compare photopea and photoshop for web development by showcasing a photoshop-like workflow: open files, measure margins, sample colors, adjust fonts, and export as jpeg.

Develop the ExotiCar website by building the project structure, HTML markup, and CSS setup, featuring a 1120px wrapper, header, main, and footer, and two-column layout.

Apply base styles for the exotiCar project, defining font family, color scheme, header layout, and a 1120px wrapper. Create a banner with a background image, centered content, and learn-more button.

Learn to create a diagonal article banner using a CSS gradient, adjust layout with width, float, clear fix, and border-box, and style headings, quotes, and spacing.

Finalize the ExotiCar project by styling the footer with auto height, 25% columns, typography, and dividers, then integrate Font Awesome icons and hover effects for a polished UI.

Discover how flexbox, a CSS3 layout mode, simplifies centering and aligning flex items with two lines of code. Understand the flex container, flex items, and the main and cross axes.

Explore how flexbox uses a main axis to arrange items, applying display:flex to a container and experimenting with flex-direction values row, row-reverse, column, and column-reverse to control order.

Apply justify-content to align flex items along the main axis in CSS. Explore values such as flex-start, flex-end, center, space-between, and space-around, and observe how spacing changes.

Learn how align-items in flexbox controls vertical alignment along the cross axis, using values like flex-start, flex-end, center, stretch, and baseline to position items within a flex container.

Use align-self to center, flex-end, or baseline for individual flex items in a flex container, using values like flex-start, flex-end, center, stretch, and baseline, while align-items handles all items.

Explore how flex-wrap guides item placement in flex containers. See how wrap and wrap-reverse, along with flex-direction in row or column, affect wrapping to new lines or columns.

Explore how the order property reorders flex items in a flex container; negative values move items to the start, higher values push items to the right, regardless of HTML order.

Explore flex-basis behavior with flex wrap, width, and height, and how flex-direction decides width or height. See practical examples of responsive layout changes.

Explore how flex-shrink controls how two items in a wrapper shrink together when the container narrows, starting with equal 400px items and adjusting values to favor one block.

Learn how the flex grow property determines each flex item’s share of a container’s free space, with cases of no width, content, and fixed width.

Explore how the flex property acts as a shorthand for flex grow, shrink, and flex basis, with default values zero, one, auto and examples like flex: 1 1 auto.

Create a blog layout using flexbox header with left and right navigation and a centered logo, plus left content, right sidebar, and footer, styling fonts Roboto and Proxima Nova.

Learn to build a responsive footer with flexbox, mirroring the header structure, including copyright, a footer navigation, and social icons using Font Awesome; aligns with header and wrapper sizing.

Set up the site area with a main and aside in 1170px wrapper, using a 77%/23% flex layout, five articles, a More Articles button, and Proxima Nova and Roboto fonts.

Finalize the central part of the Gotham project by adding dividers after each span tag, styling the culture color, article description, and icons, and creating a centered more articles button.

Builds an aside with a responsive search box, including a magnifying glass icon, a placeholder 'keywords' input, and flexible layout adjustments, then introduces a calendar UI built with a table.

Develop a calendar widget using HTML and CSS, featuring a header month display, navigation arrows, a days table, and styling for current month and current day.

Create a popular-news block under the calendar widget that lists articles with dates and headings, then refine layout and typography with flex-direction, font-family, margins, and a decorative line.

Learn to build a responsive website through a three-step process using media queries and flexbox, with Bootstrap as an option, demonstrated on Muffin and Gotham projects.

Install and launch Visual Studio Code by visiting code.visualstudio.com, downloading the Mac or Windows version, extracting the archive, and opening the app to view the editor window.

Launch the Muffin website project by setting up a folder, organizing images, and scaffolding HTML in VS Code with Emmet; implement header, main, and footer within a wrapper.

Apply CSS layout techniques to design a responsive web page, adjusting the main wrapper, typography, margins, and footer social icons for desktop and mobile views.

Learn to build a responsive webpage using the viewport meta tag, breakpoints, and media queries to stack image and text on small screens with 100 percent width.

Learn how the viewport meta tag with special attributes drives responsive design, explaining display resolutions, pixel density, and automatic recalculation to a 96 ppi golden standard.

Explore relative units of measurement for responsive web design, including percentage, m, rem, vw, vh, vmin, and vmax, and apply them to fonts, widths, paddings, and media queries.

Explore how to use em in media queries to build a truly responsive page, converting breakpoints from pixels to ems and understanding root font size effects on layout.

Explore the four main web image formats: svg for scalable vector graphics, jpeg for photos, png for transparency, and webp for small file sizes.

Learn to create image fallbacks by using the picture element with 1x and 2x images, converting to webp via squish, and serving webp when supported and jpeg for others.

Outline a roadmap to make Gotham responsive on tablets and smartphones, implementing a hamburger menu, responsive header, main content, and footer, with planned JavaScript steps and image variants.

Learn to build a responsive Gotham project by adding a viewport meta tag, identifying breakpoints, and creating media queries, while preparing images in all required formats.

Adjusts the tablet layout with flexbox, sets calendar and popular news to 50 percent width, and applies border-box for stable sizing, and fixes footer order and article width.

Implement a 578px mobile breakpoint to stack articles one per row, set key widgets to 100% width, adjust navigation and social icon alignment, and test on iPhone X and iPad.

Create a responsive header with a hamburger icon for tablet and mobile. Style the three lines and toggle navigation visibility on smaller screens.

Toggle the header's open class to show or hide the left and right navigation with the hamburger, and position the menu below the header using absolute layout.

Create jpeg and webp image variants at 1x, 1.5x, and 2x, then connect them with a picture tag using webp and jpeg sources for responsive display.