Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Front End Web Development

Front-end Web developer MasterClass HTML CSS JavaScript

Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples
Rating: 4.1 out of 54.1 (80 ratings)
412 students
Created by Laurence Svekis
Last updated 11/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Create interactive websites from scratch
  • Become familiar with coding and creating web pages and applications

Course content

14 sections • 249 lectures • 17h 31m total length

  • Preview06:42
  • Preview05:40
  • Quick Resources to Get started with
    00:28

  • Preview03: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

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

Instructor

Laurence Svekis
Instructor, GDE, Application Developer
Laurence Svekis
  • 4.3 Instructor Rating
  • 43,798 Reviews
  • 732,294 Students
  • 374 Courses

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998.  I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides."

"Learning, understanding with a strong passion for education.  The internet has provided us with new opportunities to expand and share knowledge."

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online.  Technology connects us all in many ways.  It opens up doors to those who embrace it and learn how to make those connections real.

"My courses are designed to help you achieve your goals, learn and update skills"

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications.  Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO. 

"Understanding technology provides a means to better connect with users.  It also opens so many doors.   Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with you!"

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.