Web Design Certificate
- Format
- Live or Self-paced
Choose how you learn
Compare formats, then explore the details for your choice.
Book directly on nobledesktop.com. Opens in a new tab.
Book live on Noble DesktopSummary
Learn the essential tools and techniques of web design, from coding with HTML and CSS to designing layouts in Figma and building WordPress websites. This certificate program prepares you for a career in web design with hands-on projects and expert guidance.
- Code Webpages with HTML, CSS & JavaScript: Develop strong coding skills by using HTML to structure content, CSS to style and layout pages, and JavaScript to add interactive elements. Learn to build clean, functional websites from scratch that offer a smooth user experience.
- Build Websites Using WordPress: Explore WordPress, the world’s most popular Content Management System (CMS). Learn to install themes, customize layouts using HTML and CSS, and add functionality through plugins, to build dynamic, easy-to-manage websites.
- Design Responsive Websites: Learn to design websites using Figma, a design tool for real-time prototyping. Create layouts that adapt to different screen sizes for a seamless experience across desktop and mobile devices.
- Learn Front-End Development Tools: Enhance your front-end development skills with advanced tools like Git for version control and Bootstrap for layout development. Learn to optimize websites for fast loading and functionality, ensuring your designs are ready for the web.
Who this course is for
This certificate program is for anyone who wants to design and code websites/emails, as well as develop a website portfolio of their work. It’s a good fit for: Those who want to start a career as a Web Designer/Developer or do client/freelance work. Art directors, marketing professionals, or anyone who wants to know how design and code work together to make websites and emails. Aspiring Front-end Web Developers who want to design as well as code. Aspiring Web Designers who want to enhance their skills and develop a portfolio website.
Curriculum
What you'll learn
- Learn to design websites for mobile and desktop
- Learn Figma for designing and prototyping the UI (user interface) of websites, apps, etc.
- Create projects to add to your portfolio
- Build the front-end of webpages by coding HTML, CSS, and JavaScript
- Code fluid-width layouts that adapt to different sized screens
- Learn JavaScript to add animation and interactive functionality to your webpages
- Use and customize Bootstrap to build out layouts quickly, using its grid system and components
- Use Git to track changes in your code and collaborate with other developers
- Build websites using WordPress, the world’s most popular CMS (Content Management System)
- Learn how HTML and CSS are also used to code HTML emails
Course outline
-
Figma Bootcamp 12 hours
Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files, to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
- Create UI (user interface) and UX (user experience) designs for websites, apps, and more
- Design finished layouts that are optimized for mobile, tablet, and desktop screens
- Design on grids, extract image assets, share designs with clients/developers, and more
- Build interactive prototypes
- Make animations using smart animate
- Use components (including variants) to make updating your designs easier
- Work with Team libraries to share style and design components
-
UI Design Bootcamp 30 hours
Learn the skills needed to launch a career in UI design in this advanced course. Gain expertise in UI fundamentals, wireframing, visual design concepts, and more. Build your portfolio through hands-on projects and personalized feedback.
- Learn UI design concepts & best practices
- Design webpages and apps with Figma
- Get 1-on-1 help and feedback on your design work so you can learn and improve
- Develop projects for your portfolio to showcase your work as a UI designer
-
Web Development with HTML & CSS 18 hours
Learn how to code webpages using HTML and CSS, from structuring and tagging content to styling and making the pages responsive. Upload and make your websites live using FTP.
- Start learning to build websites by hand-coding HTML and CSS
- Markup content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets), setting font, size, color, spacing, width, and more
- Create multi-page websites with text, images, and more
- Adapt the layout for different screen sizes to create responsive webpages
- Use web browser developer tools to look behind the scenes and experiment with code changes
- Upload your website files using FTP to make the site live
-
Advanced HTML & CSS 18 hours
Take your CSS skills to the next level with this comprehensive training course. Learn about advanced topics such as SVG, CSS variables, gradients, shadows, positioning, transitions, transforms, responsive images, and more to help you code professional-looking webpages.
- Master important CSS concepts such as positioning, advanced CSS selectors, relative sizing units (px, em, rem), calc() and much more
- Learn sophisticated styling with multiple background images, transparent colors using RGBA, CSS gradients, shadows, and more
- Learn multiple ways to use and style SVG in webpages
- Code responsive images using img srcset and the picture element
- Learn CSS variables for cleaner, more flexible code
- Create mobile-optimized off-screen navigation menus using only CSS
- Create animated effects using CSS transitions and transforms
-
Flexbox, Grid, & Bootstrap 12 hours
Learn how to use CSS flexbox and grid to layout and align webpage content and make it adapt to different size screens. See how both of these newer CSS techniques are useful and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to build out layouts quickly.
- CSS Flexbox to lay out and align webpage content
- CSS Grid for an entirely new way to think about laying out entire webpages
- Use Bootstrap (which is made with Flexbox) to build out layouts quickly
- Learn how Flexbox and Grid change the way you approach webpage layout
- Size, position, align, and reorder content using Flexbox and Grid
-
JavaScript for Front-End 18 hours
Learn how to make your webpages more dynamic and engaging with JavaScript and animations using GreenSock. From the fundamentals of JavaScript code to creating stunning animations with GSAP, this course will equip you with the skills to transform your web projects into complex, interactive designs.
- Write JavaScript code to add animation and interactivity to webpages
- Learn the fundamentals of the JavaScript language (variables, loops, arrays, functions, etc.)
- Understand how to use free pre-made JavaScripts to quickly add many different kinds of common functionality
- Create animated slideshows and build animated image enlargers
- Learn to animate any content within a webpage, including SVG, using GreenSock (GSAP)
-
Front-End Tools & Portfolio 18 hours
Learn how to turn a webpage design into code, track changes, collaborate with other developers using Git and GitHub, and increase your coding speed with Emmet and Visual Studio Code. Develop your portfolio with the guidance of an expert instructor and gain hands-on coding experience.
- Go from design to a coded website with guidance from an expert developer
- What Git is and how it works
- Installing and setting up Git to track changes in your code
- Using GitHub for collaboration with other developers
-
HTML Email Bootcamp 6 hours
Learn how to code custom-designed emails that adapt to different screen sizes. From responsive layouts to optimizing images, this course covers all aspects of coding effective emails.
- Learn how to code effective HTML email messages that are cross-mail-client compatible
- Build and work with multiple layouts, including single and multi-column layouts
- Gain a deeper understanding of email-friendly HTML and CSS, and how to manage issues across different email clients
- Create responsive emails that adapt across various devices
- Optimize images and swap graphics to enhance mobile device compatibility
- Use media queries to fine-tune mobile styles
-
WordPress Bootcamp 18 hours
Learn how to create and manage websites using WordPress without any web design background. This extensive training course covers everything from installing WordPress to customizing themes and creating custom templates, making it an essential skill for web developers as over 40% of websites use WordPress.
- Build websites or blogs with WordPress
- Create or edit webpages and blog posts in a WordPress site, format text, images, links, and more
- Install WordPress themes (which control the appearance of a WordPress site) and customize their appearance
- See how WordPress plugins add functionality
- Install WordPress locally so you can write and test your code
- Learn how WordPress code works behind the scenes and how to use HTML, CSS, and PHP to customize and control it
-
AI for UX & UI Design 18 hours
Build an AI-assisted UX workflow for research, product design, prototyping, and testing.
- Build a reusable AI workspace that supports your UX process from research through prototyping and testing
- Use AI to organize research, identify patterns, and develop evidence-based product opportunities
- Turn research findings into problem statements, user journeys, user stories, and feature priorities
- Define when AI should act, assist, recommend, request approval, or leave control with the user
- Design inclusive AI-powered experiences that account for accessibility, uncertainty, errors, correction, and recovery
- Turn structured Figma designs into interactive prototypes using AI-assisted development tools
- Test AI-powered experiences using realistic situations, including incomplete information and incorrect or uncertain outputs
- Evaluate and refine AI-generated work for design quality, accessibility, consistency, trust, and user control
- Create a repeatable Agentic AI workflow that can be applied to future UX projects
What's included
- Free course retake within one year to refresh the material and gain practice.
- 10 one-on-one mentoring sessions
- Course workbook
- Class recordings
Stated by the provider. Confirm what your tuition covers before enrolling.
Live classes
Choose dates and book your instructor-led class on nobledesktop.com.
-
–
In-person or live online
Tue, Wed, Thu, Mon, Fri
10:00–17:00 · America/New_York (EST)
-
–
In-person or live online
Tue, Wed, Thu, Mon, Fri
10:00–17:00 · America/New_York (EDT)
-
–
In-person or live online
Tue, Wed, Thu, Mon, Fri
10:00–17:00 · America/New_York (EDT)
Confirm current dates and availability on Noble Desktop before booking.
Self-paced course
Learn through recorded lessons on your own schedule.
This program is available for 270 days. You can choose when to start your access period. Once you activate, you will have 270 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.
- Tuition
- $4,995
- Course length
- 162 hours
- Schedule
- On your schedule
Learn the core tools and techniques of modern web design at your own pace, from writing code with HTML, CSS, and JavaScript to designing layouts in Figma and building websites with WordPress. This self-paced certificate program uses project-based lessons to help you develop practical skills for a career in web design on a flexible schedule.
- Code Webpages with HTML, CSS, and JavaScript: Build a strong front-end foundation by structuring content with HTML, styling layouts with CSS, and adding interactivity with JavaScript. Learn how to create clean, functional websites from the ground up.
- Build Websites with WordPress: Work with WordPress, the most widely used content management system. Learn how to install and customize themes, adjust layouts with HTML and CSS, and extend functionality using plugins to create dynamic, easy-to-manage sites.
- Design Responsive Websites: Use Figma to design and prototype responsive layouts that adapt to different screen sizes. Create user interfaces that work smoothly across desktop and mobile devices.
- Use Front-End Development Tools: Strengthen your workflow with tools like Git for version control and Bootstrap for efficient layout development. Learn how to optimize websites for performance and usability, so they’re ready for real-world deployment.
Who the self-paced course is for
This certificate program is designed for anyone who wants to design and code websites and emails while building a professional portfolio. It’s a strong fit for: Individuals looking to launch a career as a Web Designer or Web Developer, or take on freelance or client-based work Art Directors, marketing professionals, and creatives who want a better understanding of how design and code work together for websites and email campaigns Aspiring Front-End Developers who want to expand their skill set to include visual design Emerging Web Designers who want to strengthen their technical skills and create a polished portfolio website
Self-paced curriculum
What you'll learn self-paced
- Design websites that work seamlessly on both mobile and desktop devices at your own pace
- Use Figma to design and prototype user interfaces for websites and apps
- Create portfolio-ready projects that showcase your design and development skills
- Build the front end of webpages using HTML, CSS, and JavaScript
- Code flexible, fluid layouts that adapt to different screen sizes
- Add animation and interactivity to webpages with JavaScript
- Use and customize Bootstrap’s grid system and components to build layouts efficiently
- Track changes and collaborate using Git version control
- Build and manage websites with WordPress, the world’s most widely used CMS
- Learn how HTML and CSS are used to create responsive, well-structured HTML emails
Self-paced course outline
-
Figma Bootcamp (Self-Paced) 12 hours
Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files, to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
- Create UI (user interface) and UX (user experience) designs for websites, apps, and more
- Design finished layouts that are optimized for mobile, tablet, and desktop screens
- Design on grids, extract image assets, share designs with clients/developers, and more
- Build interactive prototypes
- Make animations using smart animate
- Use components (including variants) to make updating your designs easier
- Work with Team libraries to share style and design components
-
UI Design Bootcamp (Self-Paced) 30 hours
Learn the skills needed to launch a career in UI design in this advanced course. Gain expertise in UI fundamentals, wireframing, visual design concepts, and more. Build your portfolio through hands-on projects and personalized feedback.
- Learn UI design concepts & best practices
- Design webpages and apps with Figma
- Get 1-on-1 help and feedback on your design work so you can learn and improve
- Develop projects for your portfolio to showcase your work as a UI designer
-
Web Development with HTML & CSS Course Online (Self-Paced) 18 hours
Learn how to code webpages using HTML and CSS, from structuring and tagging content to styling and making the pages responsive. Upload and make your websites live using FTP.
- Start learning how to build websites by hand-coding HTML & CSS
- Mark up content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets) by setting font, size, color, spacing, width, and much more
- Create multi-page websites with text, images, & more
- Adapt the layout for different-sized screens to create responsive webpages
- Use web browser developer tools to look behind the scenes and experiment with code changes
- Upload your website files using FTP to make the site live
-
Advanced HTML & CSS (Self-Paced) 18 hours
Take your CSS skills to the next level with this comprehensive self-paced course. Learn advanced topics such as SVG, CSS variables, gradients, shadows, positioning, transitions, transforms, and responsive images to help you code polished, professional-looking webpages.
- Master advanced CSS concepts including positioning, complex selectors, relative sizing units (px, em, rem), and the calc() function
- Create sophisticated visual styles using multiple background images, RGBA transparency, gradients, shadows, and more
- Work with SVG graphics in multiple ways and learn how to style them directly with CSS
- Build responsive images using img srcset and the picture element for optimized performance
- Use CSS variables to write cleaner, more flexible, and maintainable code
- Create mobile-friendly off-screen navigation menus using only CSS
- Add motion and interactivity with CSS transitions and transforms
-
Flexbox, Grid, & Bootstrap (Self-Paced) 12 hours
Learn how to use CSS flexbox and grid to layout and align webpage content and make it adapt to different size screens. See how both of these newer CSS techniques are useful and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to build out layouts quickly.
- CSS Flexbox to lay out and align webpage content
- CSS Grid for an entirely new way to think about laying out entire webpages
- Use Bootstrap (which is made with Flexbox) to build out layouts quickly
- Learn how Flexbox and Grid change the way you approach webpage layout
- Size, position, align, and reorder content using Flexbox and Grid
-
JavaScript for Front-End (Self-Paced) 18 hours
Learn how to make your webpages more dynamic and engaging with JavaScript and animations using GreenSock. From the fundamentals of JavaScript code to creating stunning animations with GSAP, this course will equip you with the skills to transform your web projects into complex, interactive designs.
- Write JavaScript code to add animation and interactivity to webpages
- Learn the fundamentals of the JavaScript language (variables, loops, arrays, functions, etc.)
- Understand how to use free pre-made JavaScripts to quickly add many different kinds of common functionality
- Create animated slideshows and build animated image enlargers
- Learn to animate any content within a webpage, including SVG, using GreenSock (GSAP)
-
Front-End Tools & Portfolio (Self-Paced) 18 hours
Learn how to turn a webpage design into code, track changes, collaborate with other developers using Git and GitHub, and increase your coding speed with Emmet and Visual Studio Code. Develop your portfolio with the guidance of an expert instructor and gain hands-on coding experience.
- Go from design to a coded website with guidance from an expert developer
- What Git is and how it works
- Installing and setting up Git to track changes in your code
- Using GitHub for collaboration with other developers
-
HTML Email Bootcamp (Self-Paced) 6 hours
Learn how to code custom-designed emails that adapt to different screen sizes. From responsive layouts to optimizing images, this course covers all aspects of coding emails.
- Learn how to code effective HTML email messages that are cross-mail-client compatible
- Build and work with multiple layouts, including single and multi-column layouts
- Gain a deeper understanding of email-friendly HTML and CSS, and how to manage issues across different email clients
- Create responsive emails that adapt across various devices
- Optimize images and swap graphics to enhance mobile device compatibility
- Use media queries to fine-tune mobile styles
-
WordPress Bootcamp (Self-Paced) 18 hours
Learn how to create and manage websites with WordPress, even with no prior web design experience. This comprehensive course covers everything from installation to theme customization and custom templates, making it an essential skill for web developers since over 40 percent of websites run on WordPress.
- Build and manage websites or blogs using WordPress
- Create and edit pages and blog posts, including formatting text, images, links, and other content
- Install WordPress themes and customize their look and layout
- Explore how plugins extend functionality and add new features
- Set up WordPress locally to write, test, and experiment with code
- Understand how WordPress works behind the scenes and use HTML, CSS, and PHP to customize and control your sites
What's included with self-paced
- 10 one-on-one mentoring sessions
- Course workbook
- Self-paced video lessons
Self-paced lessons
Watch free previews and explore the lessons included with enrollment at Noble Desktop.
Figma Bootcamp (Self-Paced)
-
Overview & Setup
Lesson 1: Figma Fundamentals
1:10
Discover what this Figma design course covers and how to get the most out of the training videos and exercises.
This preview is temporarily unavailable. Please try again later.
-
Getting Started with Figma
Lesson 1: Figma Fundamentals
10:00
Learn how to create a Figma account and navigate the interface using either the browser or desktop app.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Designing on Grids & Layout Fundamentals
Lesson 1: Figma Fundamentals
29:43
Master grid-based design principles to keep content equally sized and consistently spaced across pages.
View enrollment options at Noble Desktop -
Enrollment required
Working with Photos & Pixel Based Graphics
Lesson 1: Figma Fundamentals
27:16
Import photos and pixel-based images into your Figma designs using prepared layout files.
View enrollment options at Noble Desktop -
Enrollment required
Vector Graphics, Colors & Effects
Lesson 1: Figma Fundamentals
30:11
Bring in vector graphics and apply colors, color styles, and effects like drop shadows to enhance your layouts.
View enrollment options at Noble Desktop -
Introduction to Components & Auto Layout
Lesson 2: Components & Prototyping
10:00
Explore Figma's component system and get an introductory look at auto layout for reusable design elements.
This preview is temporarily unavailable. Please try again later.
-
Prototyping Interactive Designs
Lesson 2: Components & Prototyping
10:00
Turn static designs into clickable, interactive prototypes that simulate real user experiences.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Sharing, Exporting & Collaboration
Lesson 2: Components & Prototyping
29:42
Share finished designs with teammates, stakeholders, and developers using Figma's collaboration features.
View enrollment options at Noble Desktop -
Understanding Auto Layout
Lesson 3: Deep Dives
10:00
Dive deeper into auto layout to understand how automatic sizing and spacing work in Figma.
This preview is temporarily unavailable. Please try again later.
-
Advanced Auto Layout Techniques
Lesson 3: Deep Dives
10:00
Master nested auto layout frames with different directions, padding, and spacing settings for complex layouts.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Prototype Scrolling & Hyperlinks
Lesson 3: Deep Dives
18:54
Configure vertical and horizontal scrolling within prototypes for long pages and scrollable sections.
View enrollment options at Noble Desktop -
Enrollment required
Typography Styles & Sketch File Import
Lesson 3: Deep Dives
13:58
Create and manage reusable type styles to maintain consistent typography across your designs.
View enrollment options at Noble Desktop -
Component Properties & Design Systems
Lesson 4: Advanced Features
10:00
Leverage component properties to build flexible, reusable elements that scale into a design system.
This preview is temporarily unavailable. Please try again later.
-
Hover States, Overlays & Smart Animate
Lesson 4: Advanced Features
10:00
Design hover effects and overlay interactions for desktop interfaces using Figma's prototyping tools.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Team Libraries & Shared Design Systems
Lesson 4: Advanced Features
20:23
Set up team libraries to share styles and components across multiple files and users in your organization.
View enrollment options at Noble Desktop -
Enrollment required
Wrap Up & Next Steps
Lesson 4: Advanced Features
0:12
Review key takeaways from the Figma course and get encouragement to continue practicing.
View enrollment options at Noble Desktop
Web Development with HTML & CSS Course Online (Self-Paced)
-
Welcome & Downloading Course Materials
Lesson 1: HTML Essentials: Structure, Links & Images
1:10
Download the PDF workbook and class files, then watch the coding videos and complete the step-by-step exercises to learn HTML and CSS through repetition.
This preview is temporarily unavailable. Please try again later.
-
Before You Begin Getting a Code Editor
Lesson 1: HTML Essentials: Structure, Links & Images
3:06
Set up your code editor by installing Visual Studio Code, configuring browser preview and keyboard shortcuts, and preparing to follow along with the training materials.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Coding Basics Intro to HTML Syntax
Lesson 1: HTML Essentials: Structure, Links & Images
28:28
Learn how to create and structure a basic HTML webpage using tags like html, head, body, p, h1, ul, and li, then preview and edit it using Visual Studio Code and a web browser.
View enrollment options at Noble Desktop -
Enrollment required
Tags & Attributes Strong, Em, Doctype, Lang, & Meta
Lesson 1: HTML Essentials: Structure, Links & Images
16:16
Learn to apply semantic HTML tags like strong and em for accessibility, use language and charset attributes for correct rendering, and include required metadata like for proper browser interpretation.
View enrollment options at Noble Desktop -
Enrollment required
Coding Links Absolute & Relative URLs
Lesson 1: HTML Essentials: Structure, Links & Images
18:57
Create and organize internal and external website links using proper HTML anchor tags, file naming conventions, and relative or absolute paths.
View enrollment options at Noble Desktop -
Enrollment required
Adding Images
Lesson 1: HTML Essentials: Structure, Links & Images
15:50
Add images to webpages using the tag with a src attribute for the image path and an alt attribute for accessibility, without requiring a closing tag.
View enrollment options at Noble Desktop -
Intro to Cascading Style Sheets (CSS)
Lesson 2: Styling Content and Page Layout
7:07
Learn how to use embedded CSS to style HTML elements by customizing properties like color, font, size, and spacing.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
CSS Class Selectors
Lesson 2: Styling Content and Page Layout
18:51
Learn how to use CSS classes and span tags to selectively style HTML elements with semantic naming and specificity.
View enrollment options at Noble Desktop -
Enrollment required
Div Tags, ID Selectors, & Basic Page Formatting
Lesson 2: Styling Content and Page Layout
27:06
Use div tags to create a centered, max-width content wrapper with appropriate padding, margin, and background styling, leveraging Emmet shortcuts, span vs. div behavior, and CSS shorthand to structure and style the page efficiently.
View enrollment options at Noble Desktop -
Enrollment required
Browser Developer Tools & Validating HTML
Lesson 2: Styling Content and Page Layout
22:15
Use browser DevTools to experiment with HTML and CSS changes in real time, inspect elements, identify layout issues, and validate your HTML for errors using a validator.
View enrollment options at Noble Desktop -
HTML Semantic Elements & the Document Outline
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
15:00
Understand that the Web Hypertext Application Technology Working Group, not the W3C, now defines the HTML living standard used by modern browsers.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Revolution Travel Page Layout
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
23:25
Build the foundational HTML structure of a responsive travel website by creating semantic sections, organizing content with proper heading levels, and inserting images and navigation using VS Code and Emmet shortcuts.
View enrollment options at Noble Desktop -
Enrollment required
The Box Model
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
22:23
Continue building the Revolution Travel website by embedding CSS to style layout, typography, spacing, and responsiveness for a more polished and flexible design.
View enrollment options at Noble Desktop -
Enrollment required
Coding Links Images & Page Jumps
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
19:54
Add internal, external, image, and same-page anchor links to your website, apply unique IDs for jump links, and enhance user experience with smooth scrolling and basic link styling using classes.
View enrollment options at Noble Desktop -
Styling Links
Lesson 4: Styling Navigation and Preparing for Mobile
8:34
Style links using CSS pseudo-classes like :link, :visited, :hover, :focus, and :active to control their color, decoration, and behavior across different user interactions and browsers.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Styling the Navigation
Lesson 4: Styling Navigation and Preparing for Mobile
23:20
Style a navigation list using CSS by removing default bullets, eliminating margins and padding, displaying list items inline-block for proper spacing and box model behavior, and targeting only nav-specific lists to avoid affecting others.
View enrollment options at Noble Desktop -
Enrollment required
Specificity, Shared CSS, & Centering Content
Lesson 4: Styling Navigation and Preparing for Mobile
25:56
Move embedded CSS to an external stylesheet, link it across all pages to enable global styling updates, improve maintainability, and ensure consistent design using proper specificity and browser caching.
View enrollment options at Noble Desktop -
Enrollment required
Setting the Viewport Meta Tag
Lesson 4: Styling Navigation and Preparing for Mobile
17:01
Add the viewport meta tag and CSS text-size-adjust properties (including vendor prefixes) to ensure consistent and accessible mobile rendering across devices.
View enrollment options at Noble Desktop -
Starting a New Site & CSS Background Images
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
14:23
Create and style a responsive hero section with centered text and a background image using CSS, incorporating best practices like fallback colors, percentage-based padding, and background-size: cover.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Adding Custom Fonts (using Google Fonts)
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
34:45
Load and apply custom Google Fonts to a webpage using CSS while optimizing layout with max-width, auto margins, padding, and font-display settings.
View enrollment options at Noble Desktop -
Enrollment required
Page Layout Fine Tuning with the Box Model
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
20:56
Add a logo using an SVG image with defined width and height to improve loading, fix inline spacing issues with vertical-align: bottom in CSS, apply padding and background colors to header and footer, remove unwanted paragraph margins in the footer, and use reusable class-based wrapper divs to control content width independently of full-width elements.
View enrollment options at Noble Desktop -
Navigation Bar Layout Intro to Flexbox
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
8:57
Use Flexbox to align elements side by side with display: flex, align-items for vertical alignment, and margin with auto for flexible spacing.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Hipstirred Hi Res Images
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
18:38
Use images that are twice the pixel dimensions of their display size in code to ensure they appear sharp on high-resolution (2x or 3x) screens.
View enrollment options at Noble Desktop -
Enrollment required
Creating Columns Intro to CSS Grid & Media Queries
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
24:20
Learn how to use CSS Grid and media queries to build responsive, multi-column layouts that adapt to different screen sizes.
View enrollment options at Noble Desktop -
Enrollment required
Course Wrap up & Your Next Steps
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
3:13
Practice coding regularly, review previous lessons and exercises, complete additional challenges, and build small personal web projects to reinforce your skills.
View enrollment options at Noble Desktop