Front-end Web developer MasterClass HTML CSS JavaScript
384 students enrolled
Front-end Web developer MasterClass HTML CSS JavaScript
Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples
384 students enrolled
Current price: $129.99
Original price: $199.99
Discount:
35% off
8 hours left at this price!
30-Day Money-Back Guarantee
This course includes
- 17 hours on-demand video
- 71 articles
- 5 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- Create interactive websites from scratch
- Become familiar with coding and creating web pages and applications
Course content
Expand all
249 lectures
17:31:50
+
–
Introduction to web development course
3 lectures
12:50
Course overview and what you can expect
Preview
05:40
Quick Resources to Get started with
00:28
+
–
How the internet works
13 lectures
01:01:24
Code of the internet
03:44
HTML and CSS how they work
06:38
JavaScript Code
02:46
Web development and how it works
07:08
Dynamic Static Frontend Backend Client Side Server Side
08:43
Editors creating frontend code
03:54
Web development Browsers
04:59
File Structure
03:44
Hosting websites
03:18
Get your website files to your server
05:50
Web developer Resources and info
06:21
Lesson resources
00:26
+
–
Basics of HTML
15 lectures
01:15:15
What is HTML
07:32
How to Write and Practice HTML
09:53
How to create an HTML boilerplate
10:49
Exercise create a boilerplate template
00:02
Exercise creating a boilerplate HTML file
02:06
Self Closing tags Meta tags and attributes
06:25
Heading Tags
05:35
Update template
02:21
Common tags P BR HR separate text
08:13
Clean Code Comments and more
06:07
HTML preformatted text
02:42
HTML Character Codes resources
07:49
Section Resources
00:07
Exercise Recreate as HTML
05:21
Exercise Source
00:12
+
–
HTML more tags
37 lectures
02:40:08
HTML Markup Examples
12:21
Source Code
00:28
HTML hyperlinks
10:18
Hyperlink Attributes
05:15
How to create HTML bookmarks
05:38
email link HTML mailto
03:52
Source Code Linking
00:29
Exercise Create Navbar for website
04:19
Exercise Source Code
00:03
Adding Images to websites
08:10
Exercise Create Thumbnail portfolio
05:55
Image Exercise Source Code
00:06
Ordered Lists and Unordered lists
08:10
HTML Description List
02:55
HTML Nested Lists
03:14
Source Code Lists
00:06
Exercise List of services
02:58
List Exercise Source
00:05
HTML tables
07:25
HTML spanning multiple cells
04:08
Source Code Tables
00:08
Quick Tip Styling
03:29
Exercise HTML table
07:44
Table Exercise Source Code
00:20
HTML forms introduction
06:04
Contact Form HTML
08:29
New HTML5 input types
05:47
Form elements HTML
06:22
Form content
04:43
HTML Form source code
00:32
Exercise Create Contact Form
11:04
Contact Form Exercise Source Code
00:11
HTML5 semantic elements
04:07
Semantic element source code
00:30
HTML iframe pages
05:00
Exercise Create a Website
07:48
Website Exercise Source Code
01:50
+
–
Introduction to CSS
43 lectures
02:48:14
Websites with and without CSS
06:37
How to add CSS to HTML Pages
10:28
Making selections CSS inspector
07:42
Divs and spans content selection
06:32
CSS selection id tag class
08:43
Colors HEX RGB RGBA values
07:29
CSS named color values
02:28
CSS background images
09:16
CSS background shorthand statement
02:33
Code sample
00:06
CSS borders shorthand
05:44
CSS border Outline
02:04
Code Sample Borders
00:05
CSS Margins
04:07
CSS padding
03:10
CSS Box Model Dev Tools
07:40
Box Model Code Example
00:07
CSS height and Width
03:45
Box Model Challenge
05:20
Box Model Challenge Source
00:12
Auto Margins Center your elements CSS
02:02
CSS font property
05:37
CSS Text property
04:19
Chrome dev tools editors and options
02:48
Adding Font families Google Fonts
04:55
Line Height CSS
02:54
CSS letter spacing
02:35
Code examples Fonts text and letters
00:22
CSS links
04:52
CSS table styling
05:56
Display and Hiding elements CSS
06:37
Code samples
00:02
Display Inline 4 squares Challenge
05:31
Display Inline 4 squares Solution
00:12
CSS position Properties
06:14
DevTools Design Tips
03:03
Code Example position
00:04
Coding Challenge Make a NavBar from an unordered list
04:16
NavBar start code
00:04
Code Challenge Solution
10:42
Source Code Code NavBar CSS
00:16
Source Example Code
00:40
CSS links and Resources
00:02
+
–
Using CSS to build webpage layouts
13 lectures
55:49
Floats section introduction
02:14
More about Floats
05:57
Intro to Floats
04:53
CSS Float images inline with text
06:17
CSS float thumbnails
05:26
Source Code Thumbnails
01:22
HTML build basic page layout CSS.
06:10
2 column CSS site
04:12
Create a 2 column page layout in minutes
06:19
2 column source code
00:39
Create 3 column webpage
07:07
3 column height background color fix
03:55
Source Code 3 Column Website
01:17
+
–
Advanced CSS
9 lectures
53:31
CSS Combinators
07:40
CSS Pseudo Classes
08:55
Source Code examples
03:38
CSS Pseudo Elements
08:22
Source Code
03:34
CSS Selectors by attributes
08:46
Selector example code
00:01
CSS Media Queries secret to responsive design
12:14
Media query example code
00:19
+
–
Do more with CSS
8 lectures
31:38
Multiple Background Images CSS
02:46
Element box properties CSS
07:07
More border options CSS3
08:08
Source Code Example
00:18
background gradients CSS
06:07
Code sample
00:21
CSS3 Animation
06:23
Animation example code
00:27
+
–
Apply CSS create a website
7 lectures
38:40
HTML build a basic website structure with HTML
06:25
Apply CSS build a navbar
05:18
Build 2 Column main content area CSS
06:41
Sidemenu links hover CSS
07:47
CSS website tweak
10:21
Website source Code
02:06
CSS resources
00:02
+
–
JavaScript do more on your web page
18 lectures
01:03:46
What is JavaScript
02:39
How to add JavaScript to Webpages
08:21
JavaScript Source
00:03
Debugging and commenting JavaScript
05:34
Code example
00:03
JavaScript Basic Data Types
03:53
JavaScript Variables
05:02
JavaScript Variable Rules
04:16
Exercise 1 Output to console link to js file
03:43
Exercise Source
00:06
Data type Null vs Undefined JavaScript
05:08
Declaring multiple variables at once JavaScript
02:13
JavaScript Operators
04:00
Assignment Operators JavaScript
02:57
Comparison Operators JavaScript
05:38
JavaScript String Operators
02:21
JavaScript Logical Operators
07:05
Examples and Source Operators
00:43
Requirements
- desire to learn
- computer access
Description
Learn HTML CSS and JavaScript all in one course. This is the complete front end web developer starting course.
Whether you are looking to refresh your skills, expand your knowledge or looking to just get started with web development this course is for YOU!
A complete comprehensive course covering the core foundations of the web.
What you will learn within this course
- HTML and HTML5
- CSS and CSS3
- JavaScript
- JavaScript DOM selecting elements and manipulating element content
Source Code and examples are included to get you started quickly. Links to top resources and more all available in one massive course.
This course is taught by an instructor with over 18 years of real world industry experience. Ready to help you learn web development and answer any questions you may have.
This course is designed to help you learn and practice front-end coding for website development and design. Learn the core concepts of HTML, CSS and JavaScript.
Friendly support is always available in the Q&A section ready to help you learn.
Join now take the first step to exploring more about web development.
How the internet works :
- Learn about DNS names and IP address
- What makes a website and how does your browser know what to show you.
- Coding languages HTML CSS JavaScript
- Web development and what its all about
- Terms like frontend and backend code
- Hosting, Browsers, FTP +++
- Developer tools and resources
- Tips for web developers
HTML building the code for websites :
- Understanding HTML foundations
- Different Types of tags
- Creating an HTML boilerplate template
- HTML formatting tags
- Tags Elements Attributes >
- Resources to Learn more about HTM
- HTML Headings
- Content separation and Common tags
- Commenting
- Preformatted text
- HTML entities ASCii characters
- Markup Formatting HTML Markup
- Hyperlinks connecting the pages
- Using Images Images styling
- Lists unordered and ordered
- Nested Lists inside lists, List styles, List options, Description Lists
- Tables row cells table head and body
- HTML Forms with input and methods labels and more
- HTML5 Input HTML5 Types color, date, email, month, number, range, search, tel, time, url, week
- Input type images upload
- HTML5 Semantic elements for building structure
- How iFrames work and can be added to HTML
CSS for presentation
- What is CSS
- How to add styling to HTML elements
- CSS defined what it does in Web development
- Websites with CSS vs without CSS
- Containers grouping content spans and divs
- Selects getting the right element
- Adding CSS to code
- CSS color options palette fonts and backgrounds
- Borders Margins Padding - Box model
- Text and fonts CSS
- tables and lists with CSS
- Element Display and positioning
- Building a navbar
- Advanced CSS selectors
- Pseudo Classes and Pseudo Elements
- Media Queries
JavaScript Fundamentals
- What is JavaScript
- Writing JavaScript is code and what it does
- Adding JavaScript to your web page
- Developer console log
- JavaScript data type
- What variables are and how they are used
- Operators for applying logic to code
- Arrays and objects to hold data
- Conditionals with logic
- Loops for while and do
- JavaScript functions at the heart of JavaScript
- More Built in functions methods
JavaScript Document Object Model
- What is the DOM and how it works
- Updating and manipulating elements
- Selecting multiple elements
- Page event listeners
- Click events
Who this course is for:
- Anyone who wants to learn about web development
- This course is perfect for complete beginners
- This course is great for anyone who wants all the content in one place
- Web Application developers
- Web Designers