Front-end Web developer MasterClass HTML CSS JavaScript
Loại khoá học: Other IT & Software
Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples
Mô tả
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
Bạn sẽ học được gì
Create interactive websites from scratch
Become familiar with coding and creating web pages and applications
Yêu cầu
- desire to learn
- computer access
Nội dung khoá học
14 sections
Web development Introduction
06:42
Welcome to front end web development
05:40
Quick Resources to Get started with
00:28
DNS names and IP addresses
03:53
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
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 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
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
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
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
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
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
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
prompt and alert JavaScript
04:03
Writing content to the HTML document object
03:07
Example Code
00:03
JavaScript Objects
05:44
JavaScript Objects Dynamic Outputs
04:44
JavaScript Objects within Objects
05:55
JavaScript update values
03:14
Code Examples
00:19
JavaScript Arrays
05:17
Working with Array Methods JavaScript
05:31
Array Methods extended
08:56
Sorting and more with Arrays JavaScript
04:30
More with Arrays JavaScript
03:48
Objects and Arrays together
09:28
Source Code and Examples Arrays and Objects
00:40
JavaScript if condition statement
06:44
JavaScript switch statement
04:41
Source Code conditions
00:25
JavaScript Do while loops
05:54
For loops and more JavaScript
04:02
Looping items in arrays and objects JavaScript
04:34
Looping examples
00:18
JavaScript introduction to functions
05:14
Working with JavaScript Functions
07:56
Global and Local Variables Functions
05:57
Self-Executing function
02:56
Break out of function JavaScript
02:03
Example Code functions
00:23
JavaScript String Methods
07:51
String examples
00:19
Strings and Arrays
02:17
Numbers to strings back to numbers
02:27
Source Code Example
00:02
JavaScript Math Method
03:19
JavaScript Date Method
07:30
Source Code examples
00:19
What is the DOM
06:43
Source Code
00:22
Select Node value using JavaScript
07:00
JavaScript Objects and selection within the DOM
07:53
Source Code
00:32
Windows Object Model
04:15
document write method
02:09
Selecting Elements by ID.
08:05
Update Output Div content from input form
07:09
Source Code
00:07
Select Elements By Tag Name
10:00
Selecting elements by Class
03:11
Source Code
00:38
document query Selector
05:39
Making Selections like CSS
06:00
Source Code
00:33
Traversing the DOM
07:39
Source Code
00:29
Add styling to Elements Dynamically
04:52
Source Code
00:31
Append and Remove Elements using JavaScript
06:51
Source Code
00:31
Add Event listeners to elements using JavaScript
04:39
Event listeners click events
05:07
Source Code
00:33
Hover over elements make them change background color
08:28
Source Code
00:33
Image popup window
06:35
Source Code
00:32
Single page website section introduction what we are building
02:05
development environment setup
03:18
webpage setup
03:13
Source Code 1
00:08
Setup Nav Structure and Elements
03:57
Style NavBar CSS
05:17
Source Code 3
00:27
Add Placeholder Content to Sections
06:54
Tweak Header NavBar and Sections
06:47
Source Code 5
02:38
CSS HTML Build Sections
08:21
Build Page Footer.
04:56
Final Page Tweaks
05:48
JavaScript ScrollSpy Effect
08:26
Webpage Final Overview
05:02
Source Code
03:16
Web resources MDN
00:30
Center elements CSS
15:32
JavAscript using Countdown intervals
04:52
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng