Become a Professional Web Designer

Explore how to style links globally with CSS, using pseudo-classes like :hover, :visited, :active, and :focus to set distinct colors and clear visited states.

Explore the box model and floats to create column layouts, learn why floats were hacky, and use clear fix and grid systems with percentage widths for responsive pages.

Validate your HTML and CSS with the W3C validation services to ensure valid markup, proper doctype, unique IDs, and compliant class naming, addressing cross-browser issues and supporting search engine optimization.

Learn to load web fonts with font-face, define font-family and fallbacks, and apply consistent typography to body, headers, and form elements across a site.

Explore how cascading stylesheets apply across a document using class selectors and multiple classes, and how order, specificity, and the important flag influence overrides.

Explore vendor prefixes in CSS, why browsers implement them, and how to decide when to use -webkit and other prefixes for gradients and transitions, balancing compatibility with file size.

Create a color-changing profile image using a single picture, CSS filters and transitions to fade from grayscale to color on hover, wrapped in a modular profile container for future text.

Master grid systems and responsive design to build a basic page layout with a header, sidebar, content area, and footer inside a centered container.

Learn how to choose a grid system and compare grid systems with CSSA frameworks, exploring Foundation, Bootstrap, and responsive 12-column grids to build reliable, mobile-first layouts.

Learn to build web forms with markup and styling, submit data via action and get or post methods, and use input types, labels, and validation, front end and server side.

Discover how sprite sheets improve web performance by loading one image for many icons and using CSS background positioning. Build icon buttons with precise background positioning and no-repeat settings.

Create a dynamic, speech-bubble style comment list using pure css triangles, borders, and a positioned container to render clickable, testimonial-like comments.

Stay current in front-end design by using resources like caniuse.com and MDN to check browser support, learn CSS properties, HTML5 APIs such as drag and drop, and W3C specs.

Explore HTML5, its semantic elements, video and audio support, local storage, web workers, canvas and 2D/3D graphics, and CSS3 integration for richer, offline-capable, cross-platform web design.

Get started by downloading Google Chrome from google.com for your system, then install it like any other software.

Download the latest editor package for your specific system, install it, and begin using a text editor to start developing.

Install the Kumara editor, open it, and set up a development environment by creating a project folder on the desktop and using the view tabs to reveal the left panel.

Develop a hello world page by creating opening and closing html tags, defining head and body sections, and rendering text in the browser.

Customize the editor by opening preferences, selecting fonts and colors, and applying a predefined color scheme. Then set language-specific tab to tags and adjust the foreground color, finally clicking okay.

Explore why opening tags auto-create closing tags in your coding environment, learn to disable autocomplete in preferences, and practice manually typing opening and closing tags for solid HTML markup.

Validate web files using W3C standards to ensure cross-browser display, identify warnings, and learn how direct input and file upload validation improve character encoding.

Learn how comments in code and emails communicate with developers, explain decisions, and remember project intentions. Explore opening and closing HTML comment tags.

Discover how block level elements structure pages using divs as logical divisions, and render paragraphs, lists, and headings in the browser.

Explore how line breaks and spacing render in the browser, comparing line breaks, paragraph elements, and non-breaking spaces to control text layout.

Explore span elements and inline text modifiers, contrasting with block-level elements, and learn how strong and emphasis render bold and italic text.

Learn how to use the anchor element to link to relative and absolute URLs, control navigation with target and title attributes, and manage site structure with home and content directories.

Learn to render images with the image element, use relative paths for the source, resize with width and height, and provide descriptive alt text for accessibility and search engine indexing.

Learn how to use new HTML5 inputs like email, tel, date, range, and number, set min and max attributes, and validate forms with client-side behavior and server-side caution.

Learn HTML5 input attributes such as autofocus, required, and checked; use radio buttons, checkboxes, and labels; validate emails and phones with pattern, and recognize that client-side validation alone is insufficient.

Design an international hotel booking form with personal and booking detail fieldsets, including username, email, phone, country, date, guests, meals, balcony, and an image submit button, using pattern-based validations.

Discover the new HTML5 elements, from canvas and media tags to semantic structures like article, section, header, and dialog, and learn which older elements have been removed.

Explore semantic elements such as nav, head, header, footer, section, and article. Learn how their meaningful naming guides page structure, navigation, and self-contained content like a forum post.

Explore using the meta and progress elements in HTML, with min, max, and value to show 50% and 75% progress, and note rendering differences across browsers.

Explore embedding audio in the browser with the HTML audio element, using controls and a source tag to play mp3 files, while handling cross-browser support with fallback text.

Master the fundamentals of building a complete website using HVM L5 and siestas 3. Follow a step-by-step coffee site project with practical browser and editor tools.

Learn to structure web pages with HTML tags, create readable paragraphs with p and br, use h1–h6 for headings, and apply strong and em for emphasis, improving accessibility and searchability.

Explore how to format text with lists in HTML, including ordered lists, unordered lists, and definition lists, with nested lists, list items, and type attributes for numbering.

Insert the image with the img tag and a src path, set width and height for performance, and use the figure tag with alt text and figcaption for accessible captions.

Learn to craft an HTML5 website: set up index and pages with doctype, head, body, semantic sections, headings, figures, and images, then extend to brewing, grinding, and roasting pages.

Learn how to style pages with CSSA using style attributes, style tags, and a separate style sheet, plus selectors for p and h1 and text-align options like center and justify.

Explore how to apply colors in CSS using color names, hex, and rgb or hsl values, including rgba/hsla transparency and browser compatibility.

Learn to use class and id selectors to target specific elements, apply styles with style attributes and style tags, and group content with span and div for precise CSS targeting.

Learn to set up an external style sheet, apply CSS rules to headings (h1, h2, h3) across pages, link a shared stylesheet, and incorporate Google fonts to unify typography.

Link, anchor, and navigation fundamentals come alive as you connect the index to roasting, grinding, and brewing pages, assign ids, build in-page anchors, and style a navigation menu.

Learn to build HTML5 tables using table, tr, td, and th, add captions and sections with thead, tbody, and tfoot, and apply colspan and rowspan for complex layouts.

Learn to style HTML tables with borders, widths, heights, text alignment, padding, and background colors for thead and tfoot using table, thead, tbody, tfoot, and class selectors.

Connect form elements to labels with label tags and input IDs using for attributes, then apply CSS to align and space inputs, checkboxes, radios, and the submit button.

Add streaming video to drinks page by organizing media files, including poster and video formats, updating video sources, and applying CSS to space and grayscale the video, ensuring cross-browser support.

Apply html5 tags and attributes and css properties to build a complete website, then consult cheat sheets, color tools, and character codes to ensure compatibility, accessibility, and a solid layout.

Explore how css selectors target elements by type, class, and id, and keep styles separate from markup. Know when to use classes for groups and ids for unique containers.

This final part of the basic selectors series shows how to use link pseudo-classes like hover, visited, active, and focus to style links and inputs by state.

Explore setting and testing width and height in CSS, including minimum width and height, maximum width and height, display block for elements, and overflow with scroll behavior.

Explore how display types govern layout—inline, block, and inline-block—showing how to switch between them, hide elements with display none, and contrast with visibility hidden through practical examples.

Learn how to hide elements with CSS using display: none, apply a hidden class, and reveal content later with JavaScript, balancing page load and dynamic interaction in web design.

Master padding and margins to control space around and inside a container. Learn the box model, shorthand and individual padding or margin properties, and how they affect width and height.

Learn how CSS overflow controls content spilling within a container, set fixed or minimum heights, and use overflow properties (visible, hidden, auto, scroll, overflow-x/y) to manage clipping and scrollbars.

Learn how the CSS box model influences element sizing, and how box-sizing: border-box keeps width and height stable when padding or borders are added, with browser support notes.

Explore how to specify colors in CSS using hex, rgb and rgba, and color names, and apply them to text, backgrounds, and borders with practical coding examples.

Explore how to specify fonts in css, including font-family with fallbacks, five font types, and the font shorthand, plus em-based font sizes for clean, scalable typography.

master CSS floats by practicing left and right placements, creating a two-column layout with a sidebar and main content, and learning to clear floats for stable page structure.

Explore how the text-transform CSS property converts text to lowercase, uppercase, or capitalized styles without changing the markup, and why proper casing matters for headers and search engines.

Learn to control alignment of text inside a paragraph using CSS text-align, with left, right, center, and justify options for newspaper-style column layouts, applied entirely through the stylesheet.

Explore the text-indent property, indenting the first line of paragraphs and applying it across articles, with practical submit button styling using background images while preserving accessibility.

Learn how to apply multiple background images to a container using CSS, explore longhand versus shorthand background properties, and control repeating, positioning, and layering for efficient web design.

Learn how to control a background image with the CSS background-size property, using contain and cover, adjust width and height, and maintain proportions when resizing the image.

Explore creating a div, applying borders with the shorthand border property, and adjusting dimensions for the box model by border width, color, and style variations.

Apply a border image to a container using the border-image property, adjusting border-width and slicing, experimenting with repeat options, cropping, and tiling to achieve the desired border effect.

Download and extract the course project files to follow along as we build a complete site design with HTML5 and CSS3.

Learn to build a house of horrors website from scratch with a self-running slide show and a layout for experience tickets and rates, our location, and a contact form.

Learn HTML fundamentals as the skeleton of a page by using elements and attributes to build structure and nest containers, then connect pages with hyperlinks.

Learn how CSS (cascading style sheets) provides formatting on top of HTML, styling text and controlling page layout from headers to menus, with styles that apply to elements and cascade.

Learn to read background web code by viewing source, recognizing elements like div, ul, and li, and tracing attributes such as id, class, and style to understand a navigation menu.

Create a blank HTML file and save it as index.html in the root directory to serve as the home page.

Create the html structure with a proper doctype and utf-8 charset, then add head and body containers and connect an external stylesheet for layout.

Connect an external stylesheet in the head, link with rel="stylesheet", save changes, and refresh the browser to test that the stylesheet is functioning.

Insert header, nav, article, and footer into the page body and style them with CSS using rgb values to create a blue header with 960px width and 150px height.

Insert the Internet Explorer fix script into the head of your index.html after the external stylesheet, then save, refresh, and preview to see the layout corrected across browsers.

Explore how header, nav, article, and footer rely on browser defaults and how external css selectors redefine them to control background color, width, height, and layout.

Learn how to build page layouts with divs, create feature boxes using an id selector, and style them via an external CSS stylesheet with color and dimensions.

Learn to design layouts economically by switching from id to class selectors, reusing a single feature box rule for all three boxes, reducing CSS rules and code.

Learn to structure content with paragraph elements and heading levels in html, creating multiple paragraphs and top-level and subheadings from h1 to h6, then preview in the browser.

Explore styling paragraphs with CSS in an external style sheet by redefining p elements, adjusting font family Verdana, font size, and line height, and applying class rules for individual paragraphs.

Apply CSS class rules to any HTML element, from paragraphs to spans, using an external stylesheet; create emphasis and highlighter styles to format words, sentences, or entire blocks.

Learn to work more efficiently with css by applying font-family once on the body, using an external stylesheet, and grouping selectors to reduce code and streamline updates.

Build a main navigation menu by creating a nav ul with list items, turning them into inline elements, and styling with a compound selector in the external stylesheet.

Learn how to control images with css using a class rule, style borders and colors, add box shadows with opacity, float images, and adjust margins to optimize layout.

Insert three feature box images by resizing them in Photoshop to the CSS dimensions 292 by 130 pixels, 72 dpi, RGB, and place them using the feature box image class.

Adjust the feature box layout in the external stylesheet by applying a white 5px border, resizing width and height, and adding top margin to accommodate titles.

Set up the three feature box titles—experience, tickets and rates, and location—as graphics inside divs, using a CSS rule and absolute positioning to overlap images.

Prepare for site rollout by validating the single-page design with the client, securing approval, and outlining the list of pages for a multi-page site using the index as a template.

Set up internal hyperlinks in the index navigation first, then duplicate the template to create the corresponding pages, and test the links to ensure they work.

Set up complete site templates before rollout by linking feature boxes to six pages such as experience, tickets and rates, and location, saving time and reducing backtracking.

Learn to insert a table on the tickets and rates page, paste HTML table code, and style it with CSS—covering table, table header, and cell formatting.

Insert a Google map on a location page by creating a location map div, styling with CSS, embedding the map using Google Maps embed code, then adjust size and margins.

Format a customer testimonial page by applying a .testimonial class to three paragraphs, cleaning formatting, and using padding, line height, and text indent; highlight the name with a .testimonial-name span.

Set up a contact us page with a name, email, and message form by embedding the generated script from a free form builder, sending submissions to your inbox.

Organize external css with labeled sections and css comments to guide future edits. Group rules by layout, text, and graphics to simplify go-live planning.

Upload local site to remote server by selecting files, preserving folder structure, excluding unused assets, and using the upload button; monitor progress and ensure remote content mirrors local folders.

Preview edits locally on the experience page, then upload and overwrite the corresponding files on the live server to update graphics, borders, and CSS.

Test your site across the most modern browsers with adobe browser lab, previewing Chrome, Firefox, Safari, and older Internet Explorer versions, and fix blue image borders by border=0.

Explore the team L5 and CSSA three site design and review key takeaways from this session as Jeff Blake signs off.

Build a responsive web layout from scratch with header, navigation, search, and hero section featuring an iPad graphic and hover call-to-action button, then adapt for desktop, tablet, and smartphone.

Target smartphones, tablets, and desktop displays by focusing on three key widths, 320, 768, and 1200, and building three responsive layouts with media queries.

Plan three device layouts—smartphone, tablet, and desktop—by wireframing ahead of time to organize components, decide what to include or remove, and guide responsive design before coding.

Explore how to link multiple stylesheets for screen and print, control presentation with media attributes, and use separate print CSS to tailor layouts across devices.

Learn a top-down header layout to become a professional web designer by building a full-width black header, a centered 940px container, and a left-aligned logo image.

Build the hero section structure with sections, containers, and a hero content area. Place an image and an h1 heading, then insert a placeholder paragraph and a clearing div.

Learn to insert and style a call to action button in the hero section using a div and anchor, with CSS styling, shadows, hover, and cursor effects.

Duplicate three asides in the features section, each with an image and an h3: loaded with features, easy to use, mix, sort, and share.

Insert the organize section under features, add a container with an image and content, and style it with css to control layout, typography, and borders.

Repurpose the organize section to build the share section, mirroring layout with the image on the right and text on the left, and optimize CSS with group selectors.

Build a full-width call to action section, the Get area, with a solid background, a heading like 'Get it in the App Store,' and a CSS-styled graphical button.

Format and tune the hero section of a web page by adjusting background size, margins, padding, and responsive image width, plus typography for headings and the call to action button.

Apply styling to the organize and share sections with padding and margins adjustments, set images to 50 percent width, and apply 40 percent content widths in medium resolution.

Set up the low resolution css by adding a dedicated media query, test by applying a temporary background color, and perfect the cascade across high, medium, and low resolutions.

Learn how floats disrupt responsive layouts and fix the nav and hero image by adjusting float rules in CSS for high and low resolutions.

Adjust the low resolution hero section by setting the background size to 1000px by 800px, adding 20px bottom padding, removing the image float, and center the hero content and button.

Use the low resolution media query to format the organize and share sections, set widths to 100% for sections, 90% for content with centered text, remove floats, and adjust images.

Compare raster and vector graphics, focusing on pixels and resolution dependent concepts; learn how Photoshop handles raster images and Illustrator handles vector artwork.

Set up Photoshop for web design by configuring preferences, panel options, and units to pixels, swatches with web safe colors, styles, and info panels, and organize the interface.

Learn how to resize images in Photoshop for the web using the image size dialog box, including pixel dimensions, units of measurement, constrained proportions, and resampling options.

Explore why resolution doesn't matter on the web. Learn to rely on pixel dimensions to control how images render on screens, with dpi, ppi, and lpi concepts.

Master techniques for resizing images for the web, including image size dialog, canvas size, crop, and transform, plus saving in web-friendly formats.

Save a transparent gif in Photoshop while preserving transparency, choosing color options and map settings. Use placeholder graphics and layer visibility to manage transparency and colors for web layouts.

Learn to save images as JPEG in Photoshop, use a matte color for transparency, and balance quality and file size with the preview.

Export SVG from Illustrator by resizing the artboard to the final web size, save as SVG, and embed in a web page to use scalable vector graphics that stay crisp.

Explore the save for web dialog in photoshop to optimize images for web formats, balancing quality and file size with presets and adjustable settings.

Master save for web dialog box by saving images as GIFs, selecting color algorithms and palettes, managing dithering and transparency, and comparing original versus optimized files to reduce size.

Save images as JPEGs with the save for web command and resize to 500 pixels wide. Balance quality 0–100 against file size, and avoid blur, progressive, and embedded color profiles.

Explore how to save images using png-8 and png-24 in the save for web workflow, compare with gif, adjust color reduction, dithering, and transparency for compact file sizes.

Learn how PNG-24 enables multi-level alpha transparency, compare it to binary transparency in PNG-8 and GIF, and understand effects on images like drop shadows and file size.

Save images for retina displays by doubling the pixel dimensions in Photoshop and deliver the high density version with CSS media queries.

Record a Photoshop action to resize images to 500 pixels and save as JPEG, then create a droplet to batch process files and folders.

Explore Photoshop's image processor to batch process images: select, resize to a maximum 500 by 500, choose jpeg, psd, or tiff formats, and export into a processor folder without actions.

Create a 960 by 150 header in Photoshop, add a sky gradient, insert a logo, and apply bevel, inner shadow, and inner glow for a header with the navigation beneath.

Create a main navigation menu in Photoshop using a 960×40 rectangle, applying stroke, gradient overlay, inner glow, and bevel via layer styles, then save as a reusable style.

Learn how Photoshop CC's asset generator automatically exports cropped graphics from layers or groups into a real-time synchronized assets folder, with simple layer naming for png, jpg, or gif.

Learn to use the assets generator in Photoshop CC to export layer assets with descriptive names. Manage bit depth and compression, export in multiple formats, and extract scaled content.

Learn Photoshop for web workflows, including image setup, save for web, retina graphics, batch processing with droplets, and essential file formats like GIF, JPEG, and SVG.

Explore the home page design by examining the nav bar with dropdowns, the carousel with responsive images, and the simple footer, all implemented with Bootstrap components and quick floats.

Explore debugging across Chrome, Firefox, Safari, and Internet Explorer, using the style editor, responsive debugger, and computed styles to diagnose carousel CSS and responsive behavior.

Create a marketing products page using bootstrap, featuring a responsive header and nav, collapsible panels (accordion), a responsive comparison table, and Twitter testimonials with the media object.

Master bootstrap customisation using the web form, CSSA and less files to tailor fonts, colors, and grid layout, while minimizing payload and excluding unused components.

Finalize the site by CSSA validation and minification, publish via a bootstrap CDN and static server, then test on iPad and iPhone and review bandwidth.

Explore a web app UI overview built with bootstrap components, featuring a fixed navigation bar, container fluid, left sidebar, top menu, and tabbed content with dropdowns, modals, and data visuals.

Learn to build a bootstrap custom theme from source with node, npm, and grunt, compiling less into css. Create a my customisations.less workflow to integrate fonts, colors, and semantic styling.