HTML and CSS: A Guide to Web Design

Set up a new html document by declaring the doctype, opening html and head tags, and including utf-8 charset, title, and body.

Learn how the HTML paragraph tag (p) creates text blocks with built-in margins, and compare using paragraph separation versus line breaks to control spacing, with CSS for customization.

Explore how to create unordered and ordered lists in HTML using ul, ol, and li, including nesting, default indentation, and using lists for navigation.

Explore how to insert images into an HTML document using the image tag and src attribute, manage image folders and thumbnails, and add alt text to improve accessibility and SEO.

Create a contact form with first name, last name, textarea, and a submit button, using placeholders, select, radio buttons, and fieldset with legend, styled by CSS; PHP needed for submission.

Create and optimize web page metadata by adding a title, description, and keywords with meta tags to improve how pages appear in search engines and tabs.

Learn how external, internal, and inline CSS styles attach to HTML documents, apply to elements like paragraphs, and resolve specificity with inline rules and the !important rule.

Master CSS selectors to style content using element, class, and ID selectors, plus the universal star and comma groups, and understand how to apply them in external CSS.

Discover how div containers form the building blocks of web pages, structure content, and use borders, margins, padding, and classes to build responsive layouts.

Explore how to apply font and background colors in CSS, using divs, paragraphs, and spans, and understand color inheritance, specificity, and practical hex color codes.

Use float left and float right to align content and form multi-column layouts with divs, paragraphs, and images; apply clear and overflow hidden to stabilize the flow.

Master CSS margins and padding. Learn how margins create outer space around elements and padding adds inner space, using shorthand and practical image demos.

Explore how to apply and customize CSS borders across elements like images and text, using border styles, colors, widths, sides, and border-radius for rounded, dimensional effects.

Style links with CSS by targeting anchors, hover and visited states, and build button-like links using padding, borders, and color. Handle image links and hover effects for cross-browser reliability.

Explore how to apply background-image in CSS to place textures or banners behind text, control size and position, use no-repeat for tiling, and layer multiple backgrounds.

Set width and height for a container to create a scrollable box for text. Apply overflow auto to show scrollbars when needed, or overflow hidden to conceal excess content.

Explore how to use text shadow and box shadow in CSS to improve readability over images, by adjusting color, blur, offsets, and layering multiple shadows for emphasis.

Style forms by targeting text inputs, textareas, and selects with padding, borders, and width control. Use WebKit to strip browser styles for selects and add a drop arrow image.

Group css classes to apply multiple styles to a single element by listing them in one class attribute, combining borders, margins, and letter spacing for responsive grid layouts.

Set up a separate domain folder with images and JavaScript folders on your local host to begin building a responsive, multi-page site using paragraphs, links, navigation, and Google fonts.

Set up a site by creating an index page and necessary subpages, then link grid.css and main.css to a shared header, footer, and navigation so updates apply across pages.

Build a responsive home page by adding navigation and a grid layout with rows and columns, adjusting container padding, and using live links that open in new windows.

Style a home page using CSS by applying backgrounds, borders, shadows, and padding to the container, image, and headings, and integrate Google fonts for typography.

Explore practical CSS techniques for styling a home page, including creating reusable color classes, selecting web fonts, adjusting typography, margins, and spacing, and coordinating headers with negative margins.

Learn to style the home page with borders, background images, and a CSS triangle using pseudo elements, while managing class conflicts and refining footer navigation.

Design a simple top navigation by styling header nav links with equal width, centered text, and padding; implement hover effects, spacing, and border radius for a clean, responsive menu.

Learn to build a site by extracting header and footer into PHP files, using require_once to include them, and passing a title variable to the header to set page title.

Set up active link states by giving the body an id for each page. Apply page-specific classes (home, experience, portfolio, testimonials, contact) to navigation and style the page with CSS.

Build the rest of the web pages by applying the existing base structures, CSS and PHP, then customize colors, graphics, and pictures to craft a well-rounded resume template.

Build an experience page featuring past work, education, and technical skills, use a dash break image, and apply css layouts with three columns and headings to organize content.

Build a portfolio page by integrating images with the colorbox lightbox using jQuery, choosing a group 2 transition and organizing assets in the images, js, and css folders.

Build a polished portfolio gallery by styling a gallery section with images, borders, shadows, and hover transitions, and optimize loading with thumbnails and proper asset paths.

Explore how to manage galleries with odd-shaped images using containerized divs, overflow hidden, and responsive image sizing to maintain consistent thumbnails and large images in css.

Learn to design a testimonials page by styling text blocks with borders, quotes, and typography using CSS, creating an engaging, polished portfolio section.

explore building a two-column contact form to collect first name, last name, email, phone, and message, with required fields and PHP processing, including validation, error messages, and a success confirmation.

Create and style a contact page with a linked stylesheet, adjust the form layout, margins, and typography, convert the message input to a textarea, and fine-tune borders.

Build an interactive contact form with hover and focus states, gray backgrounds, borders, orange focus outlines, and transitions, plus embedding a map and responsive layout adjustments using CSS.

Discover how to build a responsive website that adapts its layout for mobile, tablet, and desktop. See how navigation and content reflow across devices, following browser rules.

Master media queries to tailor CSS for different devices and browser sizes. Use min-width, max-width, and orientation to create responsive layouts.

Learn to implement the meta viewport tag with width=device-width and initial-scale=1 (maximum-scale=1, user-scalable=no) to enable responsive design and consistent rendering across devices.

Discover how to build a responsive tablet view with media queries, 100 percent container widths, box-sizing border-box, and resizing images and titles for tablet and mobile layouts.

Learn to craft a tablet version of a site by adjusting font sizes, letter spacing, margins, and navigation, and by stacking forms and resizing portfolio images using a responsive grid.

Implement mobile view by adjusting container padding and stacking columns to 100% width with media queries for a responsive layout on phones.

Learn how to optimize mobile web design by adjusting H-2 font sizes, ensuring proper stacking, and using responsive color box sizing (80% width) for the portfolio gallery.

Learn how to publish your site by setting up a domain and hosting, configuring email for the form, uploading files with FileZilla, testing the live site, and troubleshooting css.

Register a domain name and set up hosting, then configure name servers to point to your host so your site can be seen publicly.

Test the live site for responsiveness, inspect elements to debug layout, and validate the contact form and email delivery by simulating submissions.

Build a responsive website from scratch using html and css, and adapt its reusable structure to any project.

Explore bonus videos on web and graphic design basics, covering image optimization, creating a face off icon, and installing a font class for site icons.

Download Font Awesome and link it locally to add scalable icons to your site. Use css classes for size, rotation, stacking, and simple animations without JavaScript.

Adjust image resolution, width, and compression to reduce server load while preserving quality, using Photoshop or browser tools for faster web loading.

Learn how to set up and use Google Analytics to track visitor traffic, analyze pages, demographics, and behavior, and integrate a tracking script to monitor site performance for clients.