HTML5 and CSS3 Bootcamp 2021

discover how to set up notepad++ as your code editor, download and install it, and compare its features with the simple notepad for coding.

Install Notepad++ and save html files, then open them in the browser to render html, css, and javascript, while keeping browsers up to date and refreshing to view changes.

Explore html page structure by learning opening and closing tags, the doctype, and the head and body sections, including the title and charset.

Discover how HTML elements use attributes to add information, using name-value pairs in the start tag. Learn how attributes like lang improve accessibility for screen readers and search engines.

Learn how to create HTML paragraphs and headings with the p tag and h1–h6. Use line breaks and horizontal rules to format text.

Learn how HTML comments work, using <!-- and --> to annotate code; these notes are visible to developers, not displayed in the browser, and serve as reminders for changes.

Discover how to format text in HTML using tags such as p, b, strong, em, mark, del, ins, small, sub, and sup, with live browser rendering.

Learn to insert quotes in HTML pages with the short quotation tag and block quote, and use abbreviation and anchor tags for clear citations and links.

Learn how the anchor tag creates a link with a destination as its hyper reference and how the target attribute opens it in a new tab or the same tab.

Learn to use the anchor tag to link to images, including setting href, wrapping an image or linking text, and handling same-folder and different-folder paths with forward slashes.

Learn how to insert an image in an html page with the img tag, using src and alt attributes, and adjust size via width and height.

Learn to map an image by loading images from a server, creating a clickable image map with map and area elements, and linking specific regions to destinations.

Learn to create an HTML table with the table tag, define rows and columns, add headings like first name and points, and adjust width, borders, and cell padding.

Learn to create an HTML table and use colspan to span columns, plus rowspan for rows, while applying borders and full-width styling.

Learn to create HTML lists, including ordered, unordered, and description lists, with proper list items and nesting, and control numbering using the type attribute.

Explore block level elements in HTML, including headings, paragraphs, lists, tables, and div containers, and learn why they start on a new line and how to style them with CSS.

Discover inline elements, including the span tag, which stay on the same line, hold small pieces of text, and can be styled with CSS.

Learn to embed another website inside a page using the iframe element, including setting src, height, and width, and controlling link targets to open content in the frame.

Create a basic HTML form by wiring input fields, labels, radio buttons, and a submit button, and specify action and method (get or post) to send data to a server.

Create a dropdown list with the select tag, add options with values, assign names to fields, and include a text area, field sets, option groups, and submit button for forms.

The lecture demonstrates HTML5 input types, including text, password, radio, checkbox, number, date, color, and file, with min, max, step, and multiple attributes.

Explore input element attributes such as name, value, read only, and disabled, and control field size and max length; learn to use auto focus and placeholder text to guide users.

this lecture explains form attributes in html5, including accept-charset and utf-8, autocomplete, required, and enctype choices, plus pattern validation, input types (image), and how form data is encoded and submitted.

Learn to embed audio in a web page using the HTML5 audio element and source tags, specify mp3 formats, and control playback with attributes like controls, loop, muted, and preload.

Embed video in html using the video tag, supply an mp4 source, apply controls, autoplay, muted, preload, and poster, with fallback text for unsupported browsers.

Learn how to embed multimedia with object and embed elements in HTML pages, using data, width, and height to include images, audio, and video, with fallback text.

Learn to embed YouTube videos in an HTML page using iframe, object, and embed methods with practical examples and fullscreen options.

Learn to draw graphics on an HTML canvas using JavaScript, including circles, rectangles, rounded rectangles, and ellipses, with coordinates, stroke and fill colors, and simple text rendering.

Discover css basics and the concept of a cascading style sheet, then apply colors and page styling by linking data to the web page.

Learn how to apply css using external, internal, and inline styles; create and link an external css file, and apply it across pages or to specific elements.

Learn how to write CSS selectors and syntax to apply styles to headings, paragraphs, and spans, using external stylesheets and comma separated selectors.

Learn how to write CSS comments, including their syntax and how to place text between comment markers; comments are ignored by the browser.

Learn to apply CSS backgrounds using color and image, employing RGB and hex values, and controlling background-repeat, background-position, background-size, and background-attachment.

Learn to style text with CSS by applying color (hex and rgb), alignment, decorations, transforms, indentation, line height, and spacing, plus direction and white-space controls.

Explore how to apply and customize fonts in css using font-family with fallbacks, font-style, font-weight, font-size, line-height, and the font shorthand, including smallcaps.

Learn how multiple stylesheets determine which styles apply, by using inline, internal, and external styles to color a paragraph and observe cascade priorities in CSS.

Apply classes to HTML elements to assign unique colors to paragraphs using the class selector and the CSS color property, demonstrated with red and yellow styles on two paragraphs.

In html5 and css3 bootcamp 2021, learn to style html anchor tags with css across normal, visited, hover, and active states, using color changes, text-decoration, and css selectors.

Learn to style HTML lists with CSS, customizing ordered and unordered markers using list-style-type, colors, and images, and explore Roman, Alpha, decimal, Greek numerals, and leading zeros.

Learn how borders define the boundary of elements in CSS, including border style, width, color, and the shorthand border property, with examples on paragraphs and other elements.

Learn how the outline property draws a line outside an element's border, with outline-style options like solid, groove, dotted, and dashed, and how to set its color.

Explore how margins in CSS create space around elements, move elements, and adjust top, right, bottom, and left values, including shorthand margin for layout control.

Learn how padding creates space between an element's content and its border, controllable with top, right, bottom, and left values, and via the padding shorthand to set uniform values.

Explore css dimensions by setting element height, max-height, and min-height in pixels to adapt layout on mobile and other screens.

Explore styling HTML tables with CSS, adding borders to table, rows, and cells, using border-collapse, setting width to 100%, and styling the table heading with padding, alignment, and color.

Explore how a div acts as a container, then apply border, color, background color, font family, font size, height, width, margin, and padding to style and center content.

Explore styling html5 semantic elements such as header, section, article, aside, and nav. Apply css properties like border, color, background, font-size, and padding to them.

Apply id selectors to assign unique properties to individual elements, using the #id syntax, adjust height and borders on divs, and style semantic elements like section and article.

Discover how to name elements with class and id in HTML and CSS, including valid characters, case rules, multiple class names, and why the first character cannot be a number.

Explore how to use the float property to push elements left or right, including images and semantic elements, and apply clear to prevent floats on sides for clean layouts.

Learn positioning, starting with static positioning as the default and how the position property governs elements, with a focus on absolute positioning and left top corner.

Learn how to use absolute positioning to place elements anywhere in the page, control top, left, bottom, and right offsets, and manage overlapping using z-index.

Learn how relative positioning moves elements with respect to their first position, comparing it to absolute positioning that moves elements relative to the window edges.

Explore fixed positioning in CSS by contrasting it with absolute positioning, showing how a fixed element stays on screen during scroll at 50px from the top and 30px from left.

Learn to use the CSS clip property with absolute positioned elements to reveal a defined rectangular portion of an image, using top, right, bottom, and left coordinates.

Explore how the CSS cursor property selects and displays various cursor symbols, from pointer and text to move, progress, and resize, with practical examples on divs.

Learn to manage content that overflows an element using the css overflow property. Explore hidden, scroll, and visible values for divs and text on mobile and desktop.

Explore how visibility hides an element but keeps its space, and how display hides an element completely with no space or shows it as a block.

Learn how css combinators relate selectors by using descendant selectors and the child selector to apply styles to paragraphs inside a div, turning their color yellow.

Explore the css opacity property to control transparency of images and paragraphs, with values from 0.0 to 1.0. See how lower values increase transparency and higher values reduce it.

Learn how CSS pseudo elements style the first line and first letter of a paragraph, insert content before and after elements, and customize text with the ::selection rule.

Discover how CSS pseudo-classes define an element's state with a selector and a colon. See states like normal, visited, hover, and active, and learn about :not and :empty selectors.

Explore how form-related css pseudo-classes style checkboxes, radio buttons, disabled states, focus, required and optional fields, valid/invalid inputs, and range validation for numbers.

Learn to build a horizontal navigation bar from a list of links, style anchors with a black background and white text, remove default margins, and apply a hover orange color.

Learn to build an image gallery using divs, image and anchor tags to open a full-size image on click, with CSS styling for borders, margins, hover effects, and centered details.

Learn to code a complete page layout with HTML5 and CSS3 by building a header, navigation bar, and content sections, then style with margins, padding, colors, borders, and centered text.

Learn how to apply vendor prefixes to CSS3 properties to ensure cross-browser compatibility, with examples for Chrome, Safari, Firefox, and Internet Explorer.

Explore how the CSS3 border-radius property creates rounded corners on any element, with top-left, top-right, bottom-right, and bottom-left options, including shorthand and elliptical radii.

Apply an image as a border using the CSS border-image property, including source and slice. Configure fill, repeat, and outset to control how the border renders.

Learn how to use multiple background images in CSS, control each image with background-position, background-size, and background-repeat, and apply the shorthand background property for the body and other elements.

Learn css3 background properties and how background-position interacts with border-box, padding-box, and content-box origin, with a hands-on div demo applying a red background to reveal placement.

Explore CSS3 colors, including named colors such as red, green, blue, black, and white, hexadecimal values, and rgb/rgba and hsl/hsla models with alpha and opacity for precise web color control.

Explore css3 gradients, including linear and radial types, with color stops, direction and angle controls, transparency, and repeating gradients, as applied to backgrounds.

Explore CSS3 shadows by applying text-shadow and box-shadow properties, adjusting horizontal and vertical offsets, blur radius, and color to create multi-shadow effects on text and boxes.

Explore extra css3 text handling properties, focusing on overflow signaling with text-overflow, ellipsis, clip, and visible, and manage long words with word-break inside containers.

Learn how to implement web fonts with @font-face, define font-family, and serve font files from your server to ensure consistent typography across browsers.

Learn how CSS3 transitions animate property changes by applying duration, delay, and timing functions to elements, including color and other properties, with shorthand syntax.

Learn how to use the CSS transform property to move, rotate, scale, and skew elements with translate, rotate, scale, and skew methods, including practical hover transitions and 2d effects.

Explore css3 3d transforms, using rotate, translate, and scale in 3d space with translate3d, and apply perspective to control depth and back face visibility.

Master css3 animations by defining keyframes, applying them to elements, and controlling duration, delay, iterations, direction, timing functions, and the shorthand animation property.

Learn how to create multiple columns in CSS using column-count, column-gap, and column-rule, set three columns, apply column-span to headings, and use shorthand properties.

Explore the user interface with practical resizing of elements using the resize property, controlling horizontal, vertical, or both directions, and learn about outline offset and overflow implications.

Learn to build a website by outlining its structure, header, slides, photos, and a gallery, using guidance from prior lectures.

Learn to structure a basic html page, including doctype, html, head with charset and title, a linked css file, and a main body with header, slider, and gallery.

Reset body margins and padding, apply a red background, and style the header and main area with min-height, overflow, bottom margin, 10px padding, 25px border radius, and a logo.

Create a header with menus and a logo, using anchor tags and list items with hrefs; apply CSS to style the header, menus, logo, and add a hover rotate effect.

Build and style a slider in HTML5 and CSS3 by inserting a slider element with id slider, loading four images, and applying section styling to set height and borders.

Create a structured content area with heading, image, and article, assign IDs, and style it with floats, font size, padding, and font family to build the page layout.

Create and style a website footer by building the navigation and menu, adding social icons and a copyright text, and applying CSS for hover effects and layout.

Create an edit page for products, set up a product detail page, and reuse header, slider, and layout from the index to ensure a consistent product page.

Develop a code gallery with an image gallery and product sections using HTML and CSS, applying styling, hover effects, and absolute/relative positioning to create interactive visuals.

Deliver the final words of the HTML5 and CSS3 Bootcamp 2021, point you to the downloadable source code and the website, and invite discussion to get help.