Learn Front-End Web Development from Scratch

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.

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 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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.