Frontend Web Development HTML5 CSS3 JavaScript and Bootstrap

Discover HTML page formatting basics, including headings, paragraphs, and useful formatting tags such as the d tag for bold text and the strong tag for emphasis.

Headings organize web content using h1 to h6, with h1 as the main heading. They guide structure for users and help search engines index pages.

Learn how the paragraph tag defines a block-level paragraph with margins and automatic line breaks. Use br for line breaks, hr for horizontal rules, and pre to preserve formatting.

Explore HTML formatting tags such as bold, strong, i, em, mark, small, del, ins, sub and superscript to understand text formatting and emphasis.

Master HTML fundamentals by using headings, paragraphs, the p tag, and formatting tags such as the v tag and strong tag to structure content.

Explore HTML5 quotations and the key tags used to mark quoted text, including block quote, Q tag, abbreviation tag, address tag, site tag, and bidirectional override tag.

Define the HTML blockquote tag as a section quoted from another source, noting that browsers indent these blocks and the site attribute links the source with URL, such as goodreads.

Demonstrate how to use the HTML q tag to mark short quotations, recognizing browser quotation marks and search engine implications, with a brief WWF goal example.

Learn to use the abbr tag to define abbreviations like HTML5 and CSS and show their meanings with the title attribute tooltip.

Learn to use the HTML address tag to display contact information for authors or articles, including email, URL, physical address, and social handles, with proper line breaks and italic rendering.

Learn how the site tag titles a creative work and renders it in italics, demonstrated with an image of the screen by Edward Munch (1893) using the img tag.

Use the video tag to override text direction with the dir attribute, switching between left-to-right and right-to-left layouts for languages like English, Arabic, and Urdu (bidirectional override).

Learn to add quoted sections from sources, insert short quotations, format abbreviations, include contact information, display titles of works, and handle different directions of text.

Explore how HTML links, or hyperlinks, connect web pages through internal and external links, email links, and bookmarks, and learn to use jumps for in-page navigation.

Explore internal hyperlinks by building two linked pages with anchor tags and href attributes, using relative URLs, and observe default browser link styles and hover behavior.

Learn to create external hyperlinks that link to external pages using absolute URLs, and understand that outbound links are an important part of search engine optimization.

Demonstrates creating an email hyperlink with the mailto: anchor tag, linking to a given address, and opening the default email client to compose a message.

Learn to implement page jump bookmarks with anchor hyperlinks by assigning id attributes and using hash links to jump to chapter headings on a long page.

Explore hyperlink attributes, including the title attribute that shows tooltips and the target attribute that opens links in a new tab with _blank. Defaults include _self, _parent, and _top.

Turn images into links by placing an img tag inside an anchor tag, then set the target to open the link in a new tab.

Conclude this section by mastering internal and external hyperlinks, email hyperlinks, and images as hyperlinks, and by applying the title and target attributes for effective navigation in frontend web development.

Discover how HTML images enhance a web page's design by inserting images with the img tag, adjusting height and width, setting image paths, and adding animated images.

Embed images with the HTML5 img tag using src and alt attributes that describe images. Set width or height to control size and use relative paths to avoid broken links.

Apply image tag usage in web pages by setting height and width and adding alternate text for missing images, with guided practice.

Explore how HTML block and inline elements use default display values to shape page layouts, with two core types: block and inline.

Explore block level HTML tags that start on a new line, add margins before and after, and occupy full width, with examples like p and div and other block elements.

Explore how inline tags behave in HTML, with inline elements like span taking only as much width as needed, unlike block divs that span full width. See this through examples.

Explore the difference between block level tags and inline tags, and learn how to use both effectively. Practice with the guided exercises to reinforce these HTML concepts.

Learn how HTML tables organize data into rows and columns in this section overview for frontend web development.

Learn to build HTML5 tables using thead, tbody, tfoot with tr, and th and td cells, and apply borders, width, padding, colspan, and rowspan for layout.

Learn to build a table using the th, tbody, and tfoot tags with table rows and columns, and complete a practical table creation exercise.

Learn about HTML media elements, including sound, music, video, movie, and animation, and how these media types enhance web pages.

Explore how HTML5 handles multimedia, including images, audio, and video, and learn about file formats, extensions, and browser support for mp4, webm, and ogg.

Embed videos with the html video tag, add controls and width/height, supply multiple source formats with type attributes, and note muted autoplay for browser compatibility.

Learn to add audio to web pages with the HTML audio tag, using the source tag to choose the first supported format (mp3, ogg, wav) and enable controls for playback.

Embed YouTube videos in an html page using an iframe with the video id and set the width and height for the player, and apply autoplay and muted attributes.

We covered media elements in this section, including the video tag, the audio tag, and embedding YouTube videos in HTML pages.

Learn to build HTML forms and explore the attributes of the form element and input elements. Understand how user input is collected and sent to a server for processing.

Explore the form element and its attributes, including input types, label bindings with id, name attributes, and how action, target, and method govern submission, including get and post.

Explore HTML form elements including input, label, select, textarea, button, fieldset, legend, and datalist, with label binding, input types, a default selected option, and multiple selections.

Master the diverse HTML input types, from submit and reset to radio and checkbox. Understand how names, values, checked attributes, and form action drive data submission to the server.

Explore HTML5 input attributes like value, read only, disabled, size, maxlength, minimum and maximum, placeholder, required, auto focus, and auto complete. See how they influence form behavior.

Review different form elements and learn how to build forms, focusing on many input types and their attributes. Continue practicing with me to stay engaged and sharpen your frontend skills.

Learn about semantic html elements such as header, nav, aside, article, footer, figure, figcaption, detail and summary, and how main and time convey meaning to browsers and developers.

Learn how semantic HTML elements like header, nav, aside, section, article, and footer convey meaning to browsers and developers, improve accessibility, and structure pages beyond non-semantic divs.

Explore HTML semantic elements such as figure with figcaption, details with summary, main, and time, including practical coding examples and their machine-readable benefits for search engines.

Review various semantic elements covered and mark the end of this section. Practice with me, keep learning, stay in touch, and look forward to the next video.