Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git

- Description
- Curriculum
- FAQ
- Notice
- Reviews
Nobles Center does not issue a Certificate for this course, it’s an affiliate program from Udemy
Course Overview
In this comprehensive course, you will learn all the fundamental skills required to build websites from the ground up and become an experienced Front-End Web Developer. No previous knowledge is needed, as the course is designed to take you from an absolute beginner to a proficient web developer in a short time.
Course Content
This exclusive course covers the most important languages and technologies in Front-End Web Development:
HTML & CSS
-
HTML5 & CSS3
-
Semantic elements
-
Complete Guide to Colors and Fonts in CSS
-
Flexbox
-
Responsive design and CSS media queries
-
Working with Figma design prototypes
-
FTP, Domain, and Hosting
JavaScript
-
JavaScript from Zero to Advanced
-
Data Types in-depth
-
Functions, loops, and conditionals
-
JavaScript best practices
-
Image galleries and product filters in JavaScript
-
HTTP requests with the Fetch method
-
Working with external APIs
jQuery Essentials
-
jQuery Syntax
-
Handling forms
-
CSS Manipulation
-
Event Handling
-
Animations & Effects
TypeScript
-
TypeScript Basics
-
Data Types
-
Interfaces
-
Union Types, and more
React JS
-
React JS from Zero to Advanced
-
React Router
-
Redux / Redux Toolkit
-
Firebase (Authentication, Realtime Database & Hosting)
-
React JS + TypeScript
Vue JS
-
Vue JS from Zero to Advanced
-
Options API & Composition API
-
State Management with Pinia
-
Multi-page apps with Vue Router
-
Vue Dev Tools
-
Vue CLI and Vite
Git
-
Git from Zero to Advanced
-
Best practices in version control
-
Git on the command line, VS Code source control, and GUI applications
-
Complete Guide to Branches
-
GitHub and other remote servers
-
GitHub Desktop App
Website Performance
-
Website Performance Basics
-
Google Lighthouse and Page Speed Insights
-
Core Web Vitals
-
GT Metrix
-
Google Search Console
Hands-on Learning Method
Using our step-by-step, hands-on method with real-life projects, challenges, and exercises, you will learn to build beautiful web pages in an engaging and intuitive way.
Course Features (2nd Edition)
-
360+ lessons
-
45 hours of video content
-
12 real-life projects
-
Complete course material for download
Additionally, the 1st edition of the course is also included, providing you with the legacy learning resources, including jQuery.
Launch Your Web Development Career
Whether you aim to start a career in the tech industry as a web developer, become a freelance web designer, or simply want to learn how to build websites, this course will fast-track your journey.
By mastering HTML, CSS, JavaScript, jQuery, React, TypeScript, Vue JS, and Git, you will acquire essential skills that form the building blocks of the web. Regardless of the path you choose, this course provides high-quality content and a great learning experience to help you achieve your goals.
Join over 26,000 students worldwide in this highly-rated course. Enroll now and start building amazing websites and web applications!
-
1Introducing The Course and Project #1Video lesson
-
2Downloading Visual Studio CodeVideo lesson
-
3HTML TagsVideo lesson
-
4The Basic HTML5 StructureVideo lesson
-
5The <img> Tag for ImagesVideo lesson
-
6The <a> Tag for LinksVideo lesson
-
7Lists with <ul> and <ol>Video lesson
-
8The <video> Tag and Embedded Youtube VideosVideo lesson
-
9HTML5 Semantic ElementsVideo lesson
-
10Installing the Live Server ExtensionVideo lesson
-
11Styling with CSSVideo lesson
-
12The Developer ToolsVideo lesson
-
13Margins and PaddingsVideo lesson
-
14Centralizing Elements with Auto MarginVideo lesson
-
15CSS Selectors: Classes, IDs, Groups & Universal SelectorsVideo lesson
-
16CSS Fonts: Generic Font Families, Web Safe & Google FontsVideo lesson
-
17Text Properties: Font Size, Line Height, Letter Spacing, Text Align & MoreVideo lesson
-
18Descendant Selectors & CSS NestingVideo lesson
-
19CSS Colors: Color Names, HEX Codes and RGBVideo lesson
-
20Text Transform & Text DecorationVideo lesson
-
21CSS BordersVideo lesson
-
22Project #2: PresentationVideo lesson
-
23Structure of the Header SectionVideo lesson
-
24Setting Up the Page ContainerVideo lesson
-
25Alignment with Flexbox (Part 1)Video lesson
-
26Alignment with Flexbox (Part 2)Video lesson
-
27Project: Adjustments to the Header SectionVideo lesson
-
28Project: The Hero Section - Background ImageVideo lesson
-
29Project: The Hero Content - Absolute PositionVideo lesson
-
30Project: The Hero Content ElementsVideo lesson
-
31Project: The Best Sellers SectionVideo lesson
-
32Project: The Products AreaVideo lesson
-
33Project: Styles for the Product BoxesVideo lesson
-
34Project: The Product Info BoxVideo lesson
-
35Project: Using Pseudo Elements for the 'new' TagVideo lesson
-
36Project: The Discounted Price ElementVideo lesson
-
37Project: The Newsletter SectionVideo lesson
-
38Project: Styling the Form FieldsVideo lesson
-
39Project: The Footer Section (Part 1)Video lesson
-
40Project: The Footer Section (Part 2)Video lesson
-
41Project: The Hover StatesVideo lesson
-
42Understanding the 3 Types of Links in HTMLVideo lesson
-
43CSS Media QueriesVideo lesson
-
44Project: Styles for Small Desktop (Part 1)Video lesson
-
45Project: Styles for Small Desktop (Part 2)Video lesson
-
46Project: Styles for TabletVideo lesson
-
47Project: The Mobile Menu IconVideo lesson
-
48Responsive Images with the Picture ElementVideo lesson
-
49Project: Styles for Mobile DevicesVideo lesson
-
50Project: Best Sellers & Footer for Mobile DevicesVideo lesson
-
68VariablesVideo lesson
-
69Variable Naming Rules and Best PracticesVideo lesson
-
70Introduction to Javascript Data TypesVideo lesson
-
71Data Types: StringsVideo lesson
-
72Data Types: NumbersVideo lesson
-
73Project: Greeting Your UsersVideo lesson
-
74Project: Replacing Dynamic Values in the Greeting MessageVideo lesson
-
75Data Types: ArraysVideo lesson
-
76Data Types: ObjectsVideo lesson
-
77Data Types: BooleansVideo lesson
-
78Data Types: Null & UndefinedVideo lesson
Productivity Hacks to Get More Done in 2018
— 28 February 2017
- Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
- Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
- Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!

Popular Courses
Archive
Working hours
Monday | 9:30 am - 6.00 pm |
Tuesday | 9:30 am - 6.00 pm |
Wednesday | 9:30 am - 6.00 pm |
Thursday | 9:30 am - 6.00 pm |
Friday | 9:30 am - 5.00 pm |
Saturday | Closed |
Sunday | Closed |