Learn Front-End Web Development from Scratch

Explore HTML5 as a markup that structures web pages and enables interactivity with JavaScript. Set up Visual Studio Code, create a folder, and install the Live Server extension to preview.

Create your first html page using a text editor, save with a keyboard shortcut, and view it in a browser via a local host server to see hello world rendered.

Learn HTML5 fundamentals with a basic document structure, including opening and closing tags, a head with a title, and a body for display. Use nesting, indentation, and Emmet for boilerplate.

Learn front-end basics by creating your first HTML page, using a paragraph tag to enclose hello world, and understanding tags and elements with an h2 heading example.

Explore HTML heading tags from H1 to H6, compare their sizes and spacing in the browser, and see how paragraph text relates to headings.

Explore how HTML handles line breaks and carriage returns, using br tags and paragraph elements, with comments, word wrap, and practical tips for clean, readable markup.

Explore basic HTML text formatting, using paragraph tags and inline tags like strong, em, and u, plus superscript and subscript, with hands-on practice and examples.

Create and render html5 lists, including ordered, unordered, and description lists, using ol, ul, and dl with li, dt, and dd, plus horizontal rules to separate sections.

Learn how HTML5 links enable navigation with external, internal, and same-page anchors using anchor tags, href attributes, and id targets like back to top.

Add images to a web page using the img tag with a src path and alt text, store assets in images folder and adjust width or height to preserve proportions.

Learn to build HTML5 tables using table, tr, th, and td tags, add borders for readability, and populate rows with first name, last name, and age.

Explore form basics with the input and form tags to capture user data, using text, password, email, color, checkboxes, and radio buttons, and leverage HTML5 validation and mobile input behaviors.

Explore HTML5 forms fundamentals by building selects with options, text areas with rows and cols, data list linked to inputs, and a simple submit button.

Explore how HTML entities encode characters like the less-than, greater-than, and copyright symbols to render safely in browsers, preventing misinterpretation of markup and preserving page content.

Learn to add emojis to html using copy-pasted characters or hex code entities, and adjust emoji size with css. Explore emoji references on pda.org for cross-platform display.

Build a simple Simpsons site from the ground up using HTML5 fundamentals, including h1 headings, description lists, unordered lists, and tables, while avoiding the center tag.

Insert an image via the img tag, using a source from the images folder, and enable in-page navigation by assigning IDs to headings and linking with anchors, plus emojis.

Learn to embed audio in web pages using the HTML5 audio tag, specify mp3 or ogg formats for compatibility, and enable browser controls for playback.

Learn how to embed video using the html5 video tag, specify multiple sources (mp4, webm), enable controls, and resize the player for responsive layouts.

Explore how CSS works with HTML to style elements: colors, backgrounds, images, links, and forms. Discover CSS3 features like transitions and animations and how to incorporate CSS into HTML documents.

Explore inline CSS by using the style attribute to style paragraph tags, setting color, font size, and font family, while noting inline styles are the least preferred method.

Explore how to implement in-document CSS using a style tag, with selectors, properties, and values to style paragraphs, including color, font-family, and font-size.

Adopt the preferred external css method by creating a css folder, linking the stylesheet to html with a link tag, and applying colors, font sizes, and fonts to elements.

Learn how to use CSS classes to control styling across a document, with dot notation to define a class. Apply multiple classes to elements and reuse rules across the page.

Explore the div tag as a versatile block element that acts as a container and supports positioning, with classes and ids for flexible styling.

Learn how to use CSS height and width to control element sizing. Apply practical examples with divs, squares, pixels, and percentages to shape layouts.

Explore CSS3 fundamentals for styling text, including text alignment, decoration and transformation, and paragraph spacing with indent, line height, letter spacing, and word spacing, plus text shadows.

Learn to align text with CSS using text-align, and apply text-decoration (overline, underline, line-through) and text-transform (uppercase, lowercase, capitalize) to style text.

Master paragraph text styling in the final CSS3 fundamentals video by applying text-indent, letter-spacing, line-height, and word-spacing, then add a text shadow for visual impact.

Explore how to change typography with font families and generic fallbacks, use specific fonts like Helvetica, and integrate Google Fonts, while adjusting weight, variant, small caps, and size.

apply bold by setting a sans-serif font and font-weight, use font-variant for small caps, and size text with em units (1em ≈ 16px), ensuring the font provides the required weights.

Explore the CSS box model, including content, padding, border, and margin, to understand how each layer controls spacing and positioning of page content.

Explore how margins work in the CSS box model, using the margin property to control top, right, bottom, and left spacing with single, two-value, or four-value syntax.

Explore how to adjust padding in CSS to control space around content, compare it with margin, and note that padding takes the element's background color.

Learn how to customize borders in CSS by adjusting width, style, color, and sides using shorthand and longhand properties, between padding and margins, including rounded corners.

Apply the border-radius property to create rounded corners on elements, using values like 15px, 25px, or 50px. A 50 percent radius makes a circle, useful for avatars.

Learn how CSS display determines layout by comparing block and inline elements and how to switch between display: block, inline, and none, and use visibility hidden.

Learn how to position elements with static, relative, fixed, absolute, and sticky CSS, from normal flow to viewport and the nearest positioned ancestor, with practical examples.

Master CSS float to position elements horizontally, remove them from normal flow, and use left or right floats with clearing to create navigation bars or image galleries.

Build a functional web page with a sticky navigation bar, a footer, and multiple sections, wiring up links to work as expected, and set up the project for deployment.

set up a css fundamentals project from scratch, create the csx project, configure index.html, import Galata and Roboto fonts, and add font awesome with a universal reset.

Build and style the header section with a full-width hero image, centered splash heading, and a sticky navigation bar with horizontal links and a clean white styling.

Learn front-end: create an about section using a reusable card layout with font awesome icons, headings, and lead text, style the section, and copy-paste the card to build six entries.

Create a gallery section beneath the about section by duplicating image cards, linking images, and applying CSS to set the width to 30 percent, margins, and float left.

Learn to build a social section with left and right columns, add social icons with Font Awesome, style with padding and font sizes, and finalize with a footer.

Add and style a footer using semantic tags, establishing top and bottom sections with full-width blocks, a black background, and a 400-pixel height.

Wire internal links using section IDs for header image, about, gallery, and social to build a functional, styled site with a sticky navigation and no red backgrounds.

Explore how to use css opacity to control element transparency, applying values like 0.3, 0.7, and 1 to images to create translucent effects and watermarks.

Master linear and radial gradients in CSS by applying them to page elements, adjusting direction, color stops, and shapes. Create vivid gradients from rainbow palettes and experiment with multiple colors.

Master a CSS drop cap technique by styling the first letter with a span, floating it left, and adjusting color, font, size, and padding to wrap text across paragraphs.

Set up Bootstrap in your project, access its pre-made CSS and JavaScript classes, and use grids, columns, and rows for responsive layouts via Get Bootstrap dot com.

Integrate Bootstrap by linking the Bootstrap CSS and JS, placing the CDN link before your custom stylesheet and scripts at the bottom of the body.

Learn how bootstrap containers control page width and gutters, with standard, fluid, and responsive variants at small to extra-large breakpoints, setting up grid-based layouts.

Explore Bootstrap's grid system to build responsive layouts using a 12-column grid, containers, and rows across breakpoints from xs to xl.

Learn to build responsive Bootstrap grids with containers, rows, and varied column widths across a twelve-column layout, mastering breakpoints.

Learn to implement Bootstrap headings using h1 through h6 tags or Bootstrap classes, and apply display-1 to display-4 for larger, standout typography.

Learn bootstrap typography by applying lead text, mark, del, underline, small, bold, italic, and blockquotes with citations. Explore practical markup to style content and highlight quotes in front-end design.

Learn Bootstrap techniques to create responsive images and image thumbnails, using a container, row, and columns to build a scalable image gallery.

Explore creating and styling lists in Bootstrap, including unordered and ordered lists, with inline list items and horizontal alignment, using container, row, and lg-6 columns for a two-column layout.

Explore bootstrap alerts, including primary, secondary, success, danger, warning, info, and light, with proper roles and responsive layouts. Learn to add alert links and dismissible alerts.

Explore Bootstrap buttons, including standard and outline styles, with variants such as primary, secondary, success, danger, warning, info, light, and dark, plus block, hover states, and size options.

Learn to build Bootstrap jumbotrons, including standard and fluid variants, with headings, lead text, a horizontal rule, and a primary call-to-action button, plus customizing with background images and containers.

Learn to build Bootstrap navbars by copying code from the Bootstrap site, then customize branding, links, and a right-side search form with a button.

Learn bootstrap navs to create simple, accessible navigation using an unordered list, nav-item list items, and nav-link anchors with active and disabled states.

Explore bootstrap dropdowns by building button and split button menus with accessible aria attributes and a responsive layout inside a container.

Explore bootstrap cards—from basic and colored to a card deck—by building card components with images, card bodies, titles, text, and buttons in a responsive layout.

Copy bootstrap carousel code to build carousels with captions, indicators, and controls. Learn to customize slides, images, and sizing to create carousels on your site.

learn Bootstrap forms: build accessible forms using form groups, form controls, and common inputs (email, password, checkbox, select, textarea, radio) with container, row, offset layout and a submit button.

Learn how to create Bootstrap modals, trigger them with a button, and define the modal content, including examples like forms, terms agreements, or login prompts.

Import the bootstrap project folder into Visual Studio Code, set index.html as the entry point, and configure Bootstrap and Font Awesome links to test the home page.

Create the index splash page and enter screen, add html structure with ids and a button container, and integrate Google fonts Special Elite and Oswald via embed links.

Create a responsive front-end page layout by building top-left and top-right halves with color and image blocks, center a styled call-to-action button with hover effects using flexbox and shadows.

Build a responsive bootstrap navigation bar for the home page, including a brand, container, collapsible menu, and a hamburger toggle with aria attributes.

Learn to build a responsive jumbotron with a full-width background image, container layout, display heading, lead text, and a learn more button with hover styling in Bootstrap.

Build a responsive contributor section with Bootstrap cards and a card deck, using placeholder images, margins, and a reusable card layout to showcase contributors.

Implement a simple Bootstrap footer with a background image behind the contact form, then wire the navigation to page sections via ids for a responsive, stacked layout.

Plan your next steps by mastering vanilla JavaScript to add dynamic functionality, avoid premature frameworks, and leverage resources like W3Schools and MDN to deepen your understanding.

Celebrate finishing the course as the beginning of your journey to become a front-end web developer. Embrace endless directions, commit to continued learning, and harness your determination from scratch.