Front End Web Design UX, CSS, FLEXBOX & SASS Complete Course

Distinguish UX from UI and learn to design web pages that meet user information needs and goals, ensuring usable, accessible content with attention to typography and colors.

Explore serif and sans serif typography, with examples like Meriweather and Open Sans from Google Fonts, and learn when to use each for blogs, magazines, or luxury branding.

Trace the evolution of text dimensions from 12 points to 16 pixels and explore responsive typography for desktop, tablet, and mobile. Apply main text 18–20 pixels for readability across screens.

Explore how spacing and alignment shape web typography, from margins and line spacing to column layout and text alignment, to boost readability and user experience.

Apply the 60-30-10 rule to select a main color, a secondary color, and text accents. Explore monochromatic, analogous, complementary, and triadic palettes and nature-inspired schemes for harmony and readability.

Apply the 60 percent, 30 percent, 10 percent color rule to define main, secondary, and text colors. Explore monochromatic, analogous, complementary, and triadic palettes inspired by nature using color circle.

Master the HTML language and hypertext markup basics for creating text layouts with formatting tags. Explore elements like body, paragraphs, head, and forms, and understand HTML5 with stylesheets enhancing pages.

Discover how to set up and use Visual Studio Code across Windows, macOS, and Linux, install extensions, and leverage community support to streamline front end web design projects.

Set up Visual Studio Code by choosing a color theme, opening a project folder, and adjusting zoom, while exploring explorer, search, extensions, and run without debugging to preview code.

Create a modern html document in visual studio code, starting with the doctype html declaration, html and body tags, and preview the page in Chrome.

Learn how to use paragraphs, headings, and line breaks with p and h1–h6 tags. See how content renders in Chrome and update views by saving and refreshing.

Learn to apply bold, italic, and underline formatting in HTML using b, strong, i, em, and the underline tag on paragraphs and headings, with notes on semantic differences.

Learn how to mark up quotations in html using inline and blockquote elements, include sources, and verify formatting with the browser inspect tool.

Learn how to insert and structure tables in HTML documents, using table, tr, td, and th tags, and organize headers, body, caption, and the photo for clear, accessible layouts.

Learn how HTML lists present elements one below the other or as numbered items using dots or numbers, and how ul and ol tags structure and insert lists in documents.

Explore using the image element with the img tag and src attribute, inserting images into HTML, adjusting with title, alt, width, and height attributes, and linking via hyperlinks.

Learn to build a complete website by using hypertext links to navigate between documents and pages, including links on text or images with href and optional target attributes.

Create your first web page in exercise one by adding doctype, html lang, head with meta and title, and a body with an h3, paragraph, and a link.

Build the solution to exercise one by creating a web page with title, heading, three lorem paragraphs, and a hashtag link to stay on the page, then save and preview.

Explore the head element and its metadata, including title, description and keywords meta tags, link, style and script tags, and viewport settings in HTML pages.

Craft browser-optimized HTML title tags by placing concise, 50–60 character titles in the head that reflect page content, improving navigation and basic SEO.

Learn how the meta description tag in the head provides a 160-character summary, shaping search result previews and browser display for an HTML page.

Learn how the meta keywords tag works, why Google no longer relies on it, and how to insert a concise, content-focused set of keywords for your page.

Learn how meta robots tags control page indexing and link following, using noindex, nofollow, and noarchive to influence how Google crawls and caches pages.

Explore essential head elements, including charset utf-8 and viewport meta tags, and learn how optional meta tags like author and copyright enhance HTML documents across devices and CMS platforms.

Explore how base, link, script, and style tags shape an HTML document. Learn to set a base href, apply a stylesheet, and include scripts and inline styles.

Retrieve exercise one results, reopen the HDMI FIU file in the exercises folder, rename X1 to X2 for consistency, then follow steps and add description, robots, and keywords meta tags.

Renames the html page and updates the title to align with the reference. Adds a meta description, meta keywords with three main keywords, and robots attributes.

Explore the form element in HTML, learn how forms gather user input and submit data to a destination, and preview form attributes, input types, and PHP for processing.

Explain how the form tag uses action and method to submit data, comparing get versus post: get adds values to the url, while post transmits data at the http level.

Explore the input element and its common types—text, password, submit, radio, checkbox, date, email, and file—and learn how labels and resets shape a contact form.

Create and link labels to inputs in a contact form, assign name attributes, and configure checkboxes and radio options to ensure accessible, submit-ready form fields.

Add a select dropdown with a label and name, define option one, two, and three, enable single and multiple selections, and preview the form in Chrome before submitting.

Insert a textarea in a form using a simple tag, set rows and width, name it message, optionally prefill text, and submit with a labeled, accessible textarea.

Learn how fieldset and legend frame HTML forms with the form tag, encapsulating inputs and labels in a boxed layout, and preview the result.

Explore the datalist element, creating a dropdown from an input via the list attribute. Learn how to set options, default values, and disable or apply the maximum length attribute.

Explore how read-only and disabled attributes control input editability and preserve default values in forms. Learn how the required attribute enforces mandatory input and how maxlength limits character count.

Explore HTML5's evolution to transform web pages into interactive interfaces through semantic elements that browsers recognize. Learn foundations before JavaScript, Bootstrap, and frameworks, with a detailed JavaScript guide.

Explore the div element as a generic container in HTML5 and learn how semantic tags like header, nav, section, and article replace non semantic divs for clearer page structure.

Learn how to structure a web page header with the header tag, insert an h1 heading and logo image, adjust visuals for balance, and preview results across major browsers.

Utilize the nav tag to build a navigation menu of internal or external links, placed in the header or elsewhere, highlighting its semantic role.

Learn how the section element defines a page region with headings, paragraphs, and images, differentiate it from divs, and improve semantic structure and accessibility.

Explore the article tag for independent content on web pages like blogs and newspapers, with nested articles, headings, and metadata like author (address) and date (time).

Discover how to implement a footer in an HTML5 page, including author or company names, copyright notices, and all rights reserved, ensuring a complete, graphically pleasant page.

Explain how the aside tag in HTML5 marks detached page content, typically a sidebar linked to main content for related or advertising material, with semantic distinction from the article.

Learn to wrap images in a figure element and add a figcaption to semantically describe the image, attach captions for galleries, and ensure browsers identify the content correctly.

Revisit HTML5 lessons by loading exercise 3, retrieve age HTML page, insert a header element and a section tag to contain paragraphs, and add an empty element for classic columns.

Demonstrate the solution to exercise 3 by building a page with a header, a section, and the first paragraph, then inserting a photo and applying margins for future exercises.

Explore cascading style sheets (CSS) as the language for defining styles separate from HTML, learn the syntax, selectors, and how to link stylesheets in the head of a page.

Explore the style sheets syntax, with selectors and properties for HTML tags, and trace CSS evolution from basic formatting to modular version 3, including responsive design and Bootstrap.

Explore the span tag, its role in marking a small portion of text within a paragraph, and how CSS selectors customize that content.

Structure a CSS file using type selectors such as body, p, and heading tags to apply rules to all corresponding elements across the document.

Explore class and id selectors in CSS, showing how class selectors target multiple elements while id selectors provide a single identifier, and apply rules via stylesheets to spans.

Explore pseudo-class and pseudo-element selectors in CSS, learn how to target first-child, first-line, and link states, and experiment with visuals in Visual Studio Code.

Master css selectors to target elements precisely, including hierarchy, child, and adjacent selectors, and apply attribute selectors for links with specific href attributes in stylesheets.

Learn to link a stylesheet to an HTML5 page by adding a head link tag, then apply element selectors (header, nav, article, section) to visualize CSS properties.

Explore how the CSS color property sets text color, from default body black to blue links, and how to apply hex and rgb values to elements like articles.

Explore using the background property to set page colors or images, including complimentary color palettes with text color, and learn basic techniques for repeating images and gradients.

Select an html5 tag and apply the css border property to define borders for sections and headings, using width, style, color, and borders on top, bottom, left, and right.

Apply the margins property to control element spacing, using top, right, bottom, and left values or the shorthand order, to improve layout and responsive design.

Explore how margins position space beyond borders and how padding places space inside borders, then adjust top, bottom, left, and right padding to observe layout changes.

Define the font family in the body using the Arial/Helvetica sans-serif stack, apply a global font size (18px), and adjust weight from 100 to 900 (400 normal, 600 bold).

Learn how to insert and use comments in CSS stylesheets, place comments at the top, exclude unused properties or selectors, and save work for easy modification later.

Apply exercise four to stylesheets by assigning class attributes to every tag, avoiding type selectors, and style background colors, font, borders, and margins to header, div, and section. Refresh to view the live result in the browser.

Create a new stylesheet, link it to the age demo page, and apply header, section, and footer styles with a black background, white text, 2px borders, and 10px margins.

Explore height and width, max width and max height, and responsive design using pixels and percentages to adapt images and pages across screen sizes.

Explore the CSS display property, including display: none, display: inline, and display: block, and how these values hide content, place elements on a line, or start new paragraphs for responsive design.

Explore the CSS position property from static to absolute, fixed, and relative, and learn how left, top, and bottom values shape layout, overlap content, and support responsive design.

Explore how z-index values prioritize headers and prevent section overlap using absolute positioning, and how overflow controls content visibility with hidden, visible, and scroll options.

Discover how to create a dedicated css stylesheet, define base colors using hex and rgb values, and apply opacity and rgb variations to elements like h1.

Explore advanced background properties in CSS, including color, image placement with center, top, left, right, no-repeat, and repeated patterns, plus creating multi-color linear gradients and color values.

Learn how to use border-image to place a specific image inside borders, adjust with padding, and control repetition and corners for cross-browser compatibility.

Apply border radius for rounded corners and use box-shadow with per-corner values and color, blur, and spread to simulate a polished border.

Retrieve exercise content after the body tag, set header and content heights, adjust the background color with a hex value, select a phone breakpoint, and add inner margins.

Insert a container at 90% width and detach from the top and left. Set header max height to 100px, apply a hex black shadow, use Tahoma font.

Discover how to use Google fonts in your HTML pages, select font families and weights, and apply them via a CSS rule on the body.

Explore advanced management of textual properties in CSS, including styling links with the a selector, removing underlines, hover effects, color changes, text transform, letter-spacing, text alignment, and text-shadow.

Learn to build CSS3 animations by moving a single div with keyframes, setting relative positioning, a green background, and a 5-second infinite cycle from top:0 to top:400px.

Learn how media queries power responsive design by targeting screen type and max or min width, enabling styles that adapt to desktops, tablets, and phones.

Choose a font from Google Fonts, insert it into the HTML page, then update the stylesheet to apply the font and assign different font weights to each selector.

View the exercise 6 solution by integrating the Google font pumpkin with weights 100–900 in the stylesheet, loading it before Tahoma; apply 700 for h1 and 500–700 for the rest.