Web Design 2021 for Beginners HTML CSS BOOTSTRAP 4 + Project

Learn HTML basics and its role as the dominant markup language for the web; understand that HTML stands for HyperText Markup Language and describes pages for browsers, not programming.

Install an open source code editor such as Atom, Sublime, or Notepad++, enable live preview with packages, and edit locally with automatic browser refresh on save.

Discover the global structure of a web page by learning how the head and body sections organize content, meta data, and assets using elements like the title, h1, and p.

Learn the essential building blocks of HTML: elements, attributes, and tags, and how name-value pairs work, including self-closing elements.

Explore headings from h1 to h6 to convey hierarchy, and learn to write paragraphs with the p tag; see how browsers space and structure content.

Master creating lists in HTML using ul, ol, and dl with li, dt, and dd; control bullets and numbering, build nested lists for navigation and shopping carts.

Learn how to create hyperlinks with the anchor tag, set href attributes, and use anchor text to navigate to other pages or to sections within the same page.

Create an html table with opening and closing tags, set a two-pixel border, and fill rows with data td and header th cells. Use colspan to span across 3 columns.

Learn to collect user input with HTML forms, using text, password, checkboxes, radio buttons, selects, text areas, and submit interactions with action and method attributes.

Explore HTML5 page structure by using header, nav, section, main, and footer to organize content, and learn about figures, progress, and mark in markup.

Learn how to migrate from html4 to html5 by structuring pages with header, nav, article, aside, and footer, and organizing content into clear sections.

Understand html5 form input types, including text, submit, and tel, and how tel prompts a number pad on mobile browsers, while validation may not occur in this example.

Explore the HTML5 color input, learn how to add an input type color, set a default value, and let users pick colors for your web design projects.

Explore HTML5 form features, including input types and a submit button, and learn how mobile keyboards and URL validation improve accessibility and user input experience.

Explore how HTML5 number inputs enforce numeric data with input type=number, including min, max, and step attributes and the built-in spinner for selecting values.

Explore HTML5 input types date, date time, date time local, month, week, and time, and learn how they capture year, month, day, hours, minutes, time zone with varying browser support.

Learn how HTML5 input type=search creates a native search box that displays a Google-style search icon as you type, demonstrating the basic behavior of new form controls.

Embed an audio element in your website with an MP3 source and fallback text for browser support. Configure playback with controls, autoplay, looping, and multiple sources for maximum compatibility.

Learn how to insert videos with the video element, specify a source and poster image, enable controls, adjust height and width, and explore preload options.

Master the basics of css to style web pages with color and display variations for different screens and devices, separate content from presentation, and apply style sheet to several pages.

Learn how css selectors target elements by tag, class, or id and how to write a rule with selector and declaration to set color and background; explore normalize.css and bootstrap.

Explore class selectors and id selectors in CSS, using dot for class names and pound symbol for IDs, apply multiple classes and unique IDs, and create anchors with fragment identifiers.

Explore CSS color concepts, including named colors, hex values, shorthand hex, and rgb values, and apply them to text, backgrounds, gradients, shadows, and borders with three color classes.

Discover how to style elements with CSS background properties, including background color and background image. Learn to control background-repeat and position using center, bottom, and pixel or percent coordinates.

Explore CSS text styling with text-align, direction, text-decoration, text-indent, and text-shadow. Apply left, right, center, and justify alignment; toggle ltr and rtl directions; add decorations and color with offsets.

Apply text properties such as line height, letter spacing, and text-transform to control spacing, capitalization, and case in CSS. Explore uppercase, lowercase, capitalize, and negative letter spacing for typographic refinement.

Explore how to control text appearance using font family, size, style, and weight in css, including font stacks, absolute and relative sizes, and common effects like italic and bold.

Understand the CSS box model and how content, padding, borders, and margins determine an element's size. Learn how width, height, and whitespace affect layout within a page.

Master the css box model by creating simple boxes, applying background colors, and configuring padding. Learn top, right, bottom, left padding and the shorthand syntax.

Learn to style CSS borders using width, style, and color, explore per-side values, and apply the one-line shorthand border property for consistent results.

Learn how the CSS margin property creates space around an element, uses shorthand to set top, right, bottom, and left values (including negative values), and accepts lengths, percentages, or auto.

Explore how the dimensions properties control an element’s width and height, including max-width, max-height, min-width, and min-height, using a simple box in HTML with CSS.

Learn how the CSS display property shapes layout by switching elements between block, inline, and inline-block, and control element heights for images, headings, links, and paragraphs.

Explore how the CSS position property controls layout with static, relative, absolute, and fixed values, and learn how parent and child elements interact using top, left, bottom, and right offsets.

Learn how flexbox uses a flex container and flex items to create responsive layouts that adapt to viewport size by distributing space along the main and cross axes.

Master the flex container by using flex-direction and flex-wrap, apply the flex-flow shorthand, and align items with justify-content and align-items values like flex-start, center, space-between, baseline, and stretch.

Learn how flex items flow and resize with the flex shorthand, control their width and height, and set order, grow, shrink, and basis to shape a flex container.

Master CSS 3D transforms with perspective, translateZ, and rotate and scale in three dimensions. Activate 3D space by applying perspective on the parent and using rotate X/Z and scale 3D.

Learn how the CSS transition property creates smooth state changes on hover, using duration, timing function, and delay to animate background color and transform.

Learn bootstrap, a popular open source framework with pre-built components to build responsive templates that adapt to mobiles, tablets, and desktops using HTML, CSS, and JavaScript.

Use a bootstrap 4 template to build a bootstrap business page from scratch, featuring upper bar, menu, features, about us, team, services, pricing table, statistics, and a fixed background image.

Learn how to build a flexible, responsive Bootstrap 4 carousel slider with images and captions, including indicators, controls, overlays, and Bootstrap utility classes through hands-on coding.

Create a bootstrap 4 features section with a heading, paragraph, and a responsive four-icon row, centered with padding and secondary color.

Learn to build an about us section with the jumbotron component, center content in a Bootstrap container, and style headings, margins, padding, and buttons for a responsive page.

Learn to build a responsive services section using Bootstrap 4: structure with container and row, add four icon cards with headings, apply background color, and ensure responsiveness.

Learn to build Bootstrap progress bars with a multi-bar component, colored and labeled, animated stripes, and set values to 90%, 80%, 95%, and 85% for responsive layouts.

Build a blog section using Bootstrap 4 cards inside a responsive grid, featuring images, titles, and a read more button.

Design a responsive contact us section with a blue background using bootstrap 4 components, featuring a left-side heading and a right-side modal form with inputs and two columns.

Create a responsive footer with three columns featuring the logo and description, contact info with icons, and an embedded Google Maps, then style with spacing and a gray background.