Front-End Web Development Certificate
via Noble Desktop
Affiliated with Course Report
Build responsive websites with HTML, CSS, and JavaScript in Noble Desktop's front-end certificate. The curriculum covers page structure, styling, adaptable layouts, and browser interactivity, along with development tools and Git. You practice turning content and interface requirements into pages that work across different screen sizes.
What's included with live classes
- Free course retake within one year to refresh the material and gain practice.
- 8 one-on-one mentoring sessions
- Course workbook
- Class recordings
Overview
Master the tools and techniques needed to code websites from the ground up. This certificate program covers front-end coding languages and responsive design, while also equipping you with the skills to create and manage websites using WordPress.
- Develop Responsive Websites with HTML, CSS, & JavaScript: Learn to code the front-end of websites using HTML for content structure, CSS for styling, and JavaScript to add interactivity. Build responsive designs that adapt seamlessly to various screen sizes, ensuring a consistent user experience on mobile, tablet, and desktop devices.
- Build Layouts with Flexbox, Grid, & Bootstrap: Use modern layout techniques such as Flexbox and CSS Grid to design complex, responsive web pages efficiently. Incorporate Bootstrap to speed up the process of building grid-based layouts and components, making your websites both functional and visually appealing.
- Create Customizable Websites with WordPress: Explore WordPress, the world’s most popular content management system, to build and manage websites. Learn how to customize themes, install plugins for added functionality, and empower clients without coding knowledge to update content.
- Utilize Git & Front-End Collaboration Tools: Gain practical experience using Git for version control and project collaboration. Learn to track changes in your code and work alongside other developers, ensuring seamless collaboration and code management in professional environments.
Who this course is for
This certificate program is for anyone who wants to learn to code websites and become a Front-End Web Developer. It’s a good fit for: Those who want to build websites (using HTML, CSS, JavaScript, and WordPress). Web designers, art directors, managers, and marketing professionals who want to understand how code works. Anyone who needs to create or edit webpages or emails. Business owners, people in marketing, or anyone in a company that works with the creation of websites, blog posts, landing pages, and emails can benefit from web coding skills.
Topics included
Schedule & enrollment
Find dates that fit your schedule, then book on Noble Desktop.
- Live tuition
- $3,495
- Course length
- 108 hours
All class times are Eastern (ET).
-
Dates
–
Tue, Wed, Thu, Mon, Fri
Class time
10am–5pm ET
Attend
In-person or live online
-
Dates
–
Tue, Wed, Thu, Mon, Fri
Class time
10am–5pm ET
Attend
In-person or live online
-
Dates
–
Tue, Wed, Thu, Mon, Fri
Class time
10am–5pm ET
Attend
In-person or live online
Confirm current dates and availability on Noble Desktop before booking. Enrollment opens in a new tab.
Self-paced tuition & enrollment
Learn through recorded lessons on your own schedule.
- Tuition
- $3,495
- Course length
- 108 hours
- Format
- Self-paced online
This program is available for 210 days. You can choose when to start your access period. Once you activate, you will have 210 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.
Loading enrollment options…
Prefer to enroll directly? Open the course website.
Curriculum
What you'll learn
- Build the front-end of webpages by coding HTML, CSS, and JavaScript
- Mark up content such as text, images, and links with HTML and style it with CSS
- Code fluid-width layouts that adapt to different screen sizes
- 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 content management system
- Learn how HTML and CSS are also used to code HTML emails
Course outline
-
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
- Mark up 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, 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 lay out 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
-
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
-
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
Self-paced course
Learn through recorded lessons on your own schedule.
This program is available for 210 days. You can choose when to start your access period. Once you activate, you will have 210 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.
View self-paced tuition & enrollmentGet a strong handle on the tools and techniques for coding websites from scratch. This certificate program walks through front-end coding languages and responsive design, while also setting you up with the know-how to create and manage websites through WordPress.
- Build Responsive Websites with HTML, CSS, and JavaScript: Learn to code the front-end of websites using HTML to structure content, CSS to handle styling, and JavaScript to bring in interactivity. Craft responsive designs that shift smoothly across screen sizes, keeping the user experience consistent whether someone is on mobile, tablet, or desktop.
- Construct Layouts with Flexbox, Grid, and Bootstrap: Reach for modern layout techniques like Flexbox and CSS Grid to put together complex, responsive web pages without unnecessary effort. Bring in Bootstrap to speed up your work on grid-based layouts and components, giving your websites both function and visual polish.
- Create Customizable Websites with WordPress: Dive into WordPress, the most widely used content management system in the world, to build and manage websites. Learn how to tailor themes, add plugins for extra functionality, and give clients the ability to update content without touching a line of code.
- Use Git and Front-End Collaboration Tools: Get real practice with Git for version control and project collaboration. Learn how to track changes in your code and work alongside other developers, keeping collaboration and code management smooth in professional settings.
Who the self-paced course is for
This certificate program suits anyone looking to learn how to code websites and step into a role as a Front-End Web Developer. It's a solid match for: Anyone who wants to create websites using HTML, CSS, JavaScript, and WordPress. Web designers, art directors, managers, and marketing professionals who want a working understanding of how code actually functions. People who need to put together or update webpages or emails. Business owners, marketers, or anyone at a company involved in producing websites, blog posts, landing pages, and emails, since web coding skills bring real value to the work.
Self-paced curriculum
What you'll learn self-paced
- Build the front-end of webpages by writing HTML, CSS, and JavaScript
- Mark up content like text, images, and links with HTML, then bring it to life with CSS styling
- Code fluid-width layouts that flex to suit different screen sizes
- Pick up JavaScript to add animation and interactive features to your webpages
- Work with Bootstrap and tailor it to assemble layouts quickly using its grid system and components
- Reach for Git to track changes in your code and team up with other developers
- Create websites using WordPress, the most widely used content management system in the world
- See how HTML and CSS also come into play when coding HTML emails
Self-paced course outline
-
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, absolute and 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
-
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
-
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
What's included with self-paced
- Self-paced video lessons
Self-paced lessons
Watch free previews and explore the lessons included with enrollment 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
Course Reviews
Is this course right for you?
Choose this program for coding the visible part of a website. If you also want to design interfaces in Figma before building them, compare the Web Design Certificate for a course sequence that combines visual design and development.