HTML and CSS for Web Designers: From Basics to Beautiful

Learn HTML page formatting by exploring headings, paragraphs, and essential formatting tags, including bold and strong, to create structured, visually clear web content.

Explore HTML headings from H1 to H6 and learn how they define document structure and page hierarchy. See proper usage to aid search engines and users, with basic coding demos.

Discover how HTML formatting tags like bold and strong, italic and emphasis, underline, mark, small, del, ins, sub, and sup affect presentation and meaning, with line breaks via br.

Wrap up this section by reviewing HTML headings, paragraphs, and formatting tags such as b and strong, and applying them effectively to create structured, accessible web content.

Explore HTML5 quotations and learn about tags such as block quote, abbreviation, address, site tag, and bidirectional override tag in this section overview.

Master the blockquote tag in HTML, including syntax and the site attribute to cite external sources, with an example referencing Goodreads.

Learn how the q tag creates short quotations in HTML, with browsers adding quotation marks, using it for brief sentences or quoted phrases, demonstrated with a simple WWF goal example.

Learn how to mark abbreviations with the HTML abbreviation tag and its title attribute, producing a hover tooltip that explains the full form like hyper text markup language.

Learn how to use the address tag to display contact information for the author or document, including email, URL, physical addresses, phone numbers, and social media.

Explore how the site tag titles a creative work and renders it in italics, demonstrated with the painting 'the screen' (1893) by Edward Munch in an HTML page.

Learn how to use the video tag to bidirectional override text direction, applying dir attributes for left-to-right or right-to-left languages.

Learn to add quoted sections from another source, insert short quotations, include abbreviations, add contact information, title of the work, and handle different text directions for clean HTML and CSS.

Learn about links and hyperlinks, including internal and external links, email links, page jumps, and bookmarks. Enhance navigation and accessibility in web design.

Learn how internal hyperlinks connect pages using anchor tags and href attributes, linking home.html and about.html with relative URLs, while understanding hover cursor, default link styles, and basic CSS tweaks.

Learn how external hyperlinks connect your site to outside pages and boost search engine optimization with outbound links. Create anchor tags using absolute URLs to link to external sites.

Explore creating an email hyperlink in html using the mailto: scheme within an anchor tag, including a target email address and the reference attribute; clicking opens the default email client.

Create bookmarks using HTML IDs and link to them with hash hrefs, enabling readers to jump to chapter headings on a long page.

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

Turn an image into a clickable link by placing an img tag inside an anchor tag with its src path. Set target _blank to open in a new tab.

Explore internal, external, email, page jump, and image hyperlinks, and learn how the title and target attributes govern navigation and bookmarking.

Learn how to insert images into a web page and enhance design using the img tag. Adjust height and width, set image paths across folders, and add animated images.

Learn how to insert images in HTML with the img tag, using src and alt attributes, set width for sizing, and manage relative paths and animated images.

Explore how to use the image tag in a web page, adjust height and width, and add alternate text for missing images.

Explore block and inline elements, their default display values, and how each element type influences layout in HTML and CSS for web design.

Discover how block level HTML tags start on a new line, take 100% width, and create separate blocks with p and div elements, illustrated with margins and background colors.

Explore inline tags and how they differ from block level elements, taking only as much width as needed, with span and div examples.

Review block level and inline tags, learn how to use both, and practice to keep advancing your HTML and CSS skills.

Explore HTML tables and learn how web developers organize data into rows and columns in this section overview. Stay curious and continue learning throughout the course.

Create HTML tables with a header, body, and footer, using rows and data cells, and apply borders, width, padding, and colspan or rowspan to merge cells.

Conclude by covering the table element and its parts, the body tag, the foot tag, plus table rows and table columns, and practice building a table.

Explore media concepts in HTML and CSS for web designers, including sound, music, video, movie, and animation, to create engaging web experiences.

Explore media and multimedia in HTML, including images, audio, video, and animations. Understand how browser support and formats like mp4, ogg, and mp3 affect media delivery.

Learn how to embed video in HTML using the video tag with controls, width and height, and multiple source formats to ensure compatibility, including autoplay and muted autoplay considerations.

Learn how to embed audio in HTML with the audio tag, using source for multiple formats (mp3, ogg, wav), controls for play and volume, and autoplay behavior.

Learn how to embed YouTube videos in an HTML page using an iframe, including retrieving the video ID, setting the embed URL, and configuring width, height, autoplay, and mute.

Conclude this section by highlighting media elements such as the video tag, the audio tag, and embedding YouTube videos in HTML pages, reinforcing hands-on practice for web designers.

Learn how to create a form, explore form attributes and input elements, and understand how an HTML form collects user input and sends it to a server for processing.

Learn how HTML forms collect user data, bind labels to inputs, and configure submission with attributes such as action, target, method, autocomplete, and no validate for server-side handling.

Explore form elements such as input, label, select, option, textarea, button, fieldset, legend, and data list, and learn how to bind labels to inputs and configure options.

Discover the range of HTML input types, from text and password to submit, radio, checkbox, color, date, email, file, and more. Learn how form action, name, and value control submission.

Explore how HTML input attributes control initial values, accessibility, and form behavior, including value, read only, disabled, size, maxlength, min and max, multiple, placeholder, required, auto focus, and auto complete.

Explore different form elements, learn various input types and their attributes, and practice building forms alongside the instructor to reinforce html basics.

Explore semantic elements in HTML, including header, nav, section, article, footer, figure, caption, detail, summary, main, and time, to improve meaning for browsers and developers.

Explore how semantic elements such as header, nav, aside, section, and article clearly describe content and assist screen readers in interpreting page structure.

Learn html semantic elements like fig, figcaption, details, summary, main, and time. Explore practical examples with figures, captions, and how semantic web concepts guide structure and search.

Explore the various semantic elements covered in this section and practice with me to deepen your understanding; stay in touch and see you in the next video.