The Complete Front-End Web Development Course

Focused View

Joseph Delgadillo,Nick Germaine

16:48:36

47 View

01 - Welcome to the Course!

001 Introduction to the course.mp4

01:46

002 Atom setup.mp4

05:16

02 - Web Development Basics - HTML

001 HTML document structure.mp4

04:05

002 HTML elements - div and span.mp4

06:44

003 HTML elements - i, b, p, and a.mp4

06:28

004 HTML elements - ul, li, and ol.mp4

05:23

005 HTML elements - header and footer.mp4

05:21

006 HTML elements - section, main, and article.mp4

08:14

007 HTML elements - h1-h6 and aside.mp4

03:16

008 HTML tables.mp4

09:56

009 Project #1 - HTML text site.mp4

08:30

03 - Advanced HTML Concepts

001 Images.mp4

03:31

002 Forms.mp4

04:48

003 Inputs.mp4

07:01

004 Checkboxes.mp4

04:55

005 Radio buttons.mp4

04:40

006 Select, option, and buttons.mp4

06:19

007 HTML5 videos.mp4

07:14

008 HTML5 audio.mp4

04:35

009 Doctypes.mp4

02:59

010 Meta tags.mp4

07:13

04 - Introduction to Cascading Style Sheets (CSS)

001 Targeting color and background.mp4

15:58

002 Element specificity.mp4

03:48

003 ID targeting, margin, and border.mp4

11:50

004 Padding, margin, and float.mp4

08:11

005 Max-width and background-image.mp4

16:43

006 Switching over to an IDE.mp4

01:45

007 Font weight, style, and family.mp4

13:43

008 Text decorations.mp4

03:51

009 Text spacing.mp4

03:54

010 Text decoration modification.mp4

04:16

011 Text shadow.mp4

07:42

05 - Advanced CSS

001 Pseudo-states.mp4

08:52

002 Border radius.mp4

08:27

003 Positions.mp4

09:04

004 Pseudo-elements.mp4

06:54

005 Z-index.mp4

05:50

006 Viewpoint width and height, overflowing content.mp4

07:20

007 Transition property.mp4

05:30

06 - JavaScript for Beginners

001 Intro to JavaScript.mp4

04:23

002 Alerts and console logging.mp4

05:44

003 Integers, strings, and variables.mp4

06:49

004 Undefined variables and modifying values of variables.mp4

05:27

005 Boolean operators.mp4

02:48

006 Comparing values.mp4

05:10

007 If statements.mp4

10:53

008 For loops.mp4

03:19

009 Defining functions.mp4

06:04

010 Event handling.mp4

09:06

011 Setting an elements innerHTML.mp4

02:49

07 - More JavaScript Concepts

001 Arrays pt.1.mp4

05:57

002 Arrays pt.2.mp4

06:55

003 Arrays pt.3.mp4

05:24

004 Textareas and getting the value of inputs.mp4

13:43

005 Functions - parameters and return values.mp4

07:34

006 Multiple parameters in functions.mp4

05:01

007 Flexible function parameters.mp4

11:57

008 Exercise - find the missing number.mp4

07:52

009 Exercise solution.mp4

07:33

010 Classes explained.mp4

04:55

011 Class constructor, instance variables, and static variables.mp4

09:07

012 Extending classes.mp4

13:39

08 - Getting Started with jQuery

001 jQuery setup.mp4

06:17

002 Targeting elements.mp4

04:10

003 Event handling.mp4

10:48

004 Dropdown menus.mp4

22:22

005 Making our dropdown disappear.mp4

04:36

006 Multiple targets, events, and attr method.mp4

08:45

007 Prepend, append, and html.mp4

05:16

008 preventDefault.mp4

06:11

009 event.which and switch properties.mp4

09:01

010 Custom context menu, pageY, and pageX.mp4

13:28

011 is method.mp4

07:54

09 - More jQuery

001 Writing our own version of jQuery.mp4

17:23

002 Find method.mp4

04:40

003 First and last.mp4

01:59

004 Focusin and focusout.mp4

11:21

005 Contains, is, and hasClass.mp4

07:08

006 Each method.mp4

02:36

007 Callbacks.mp4

07:14

008 CSS.mp4

05:03

10 - Bootstrap Basics

001 Bootstrap setup.mp4

06:48

002 Navbar pt.1.mp4

06:44

003 Navbar pt.2.mp4

10:41

004 Forms pt.1.mp4

13:59

005 Forms pt.2.mp4

04:41

006 Buttons.mp4

05:43

11 - Project #2 - Pipboy from Fallout 4

001 Setup.mp4

09:14

002 Navbar.mp4

07:35

003 Main page.mp4

06:45

004 Pipboy image and footer.mp4

13:25

005 Colors.mp4

05:03

006 Font and styling main nav.mp4

13:03

007 Scanlines.mp4

06:19

008 Navigation styling.mp4

09:43

009 Tabs.mp4

08:57

010 Progress bars.mp4

10:11

011 Stat bars.mp4

13:35

012 Footer fixes.mp4

02:08

013 Damage and resistance.mp4

05:27

014 Icons.mp4

12:51

015 Inventory template.mp4

04:11

016 Item list.mp4

13:02

017 Weapon stat container.mp4

11:05

018 Finishing touches with JavaScript.mp4

17:53

12 - Project #3 - Google Chrome Extension

001 Problem solving.mp4

05:15

002 Manifest files.mp4

05:56

003 Basic setup.mp4

03:14

004 Getting video URLs.mp4

02:07

005 Injecting JavaScript.mp4

05:56

006 Getting pretty objects for each URL.mp4

04:46

007 Creating download options list.mp4

16:29

008 Communicating between the page and extension.mp4

09:25

009 Chrome downloads API and background scripts.mp4

07:59

010 Receiving messages and downloading files.mp4

05:44

011 Styling our extension and publishing.mp4

09:13

13 - Final Thoughts

001 Tips for getting started as a professional web developer.mp4

16:08

14 - BONUS - Coding Another Google Chrome Extension

001 Introduction and manifest.mp4

21:57

002 Content scripts.mp4

16:04

003 Messaging different parts of the extension.mp4

10:13

004 Creating share popup.mp4

08:21

005 Icons.mp4

10:55

006 Building an image downloader.mp4

13:34

007 Interacting with the DOM.mp4

28:47

008 Uploading to the Google Chrome Web Store.mp4

07:17

009 Source code.html

Description

Get started as a front-end web developer using HTML, CSS, JavaScript, jQuery, and Bootstrap!

What You'll Learn?

Build a simple HTML text site
Style web pages using CSS
Program websites with JavaScript
Build a Pipboy using Bootstrap
Build and publish a Google Chrome Extension

Who is this for?

Anyone who would like to learn front-end web development

What You Need to Know?

No previous development experience required

Access to various open-source (free) software.

More details

Description
If you would like to learn web development and get a job in the tech industry, you are going to LOVE this course! Learn HTML, CSS, JavaScript, Bootstrap and more with over 15 hours of HD video tutorials! This course was designed to be extremely beginner friendly. We will begin with the very basics of HTML and build a simple web page. By the end of this course, you will be able to develop and publish your very own Google Chrome extension! In this course we will focus on coding exercises and projects. Your time will not be wasted reviewing unnecessarily long PowerPoint presentations. Upon completing this course, you will have a solid portfolio of development projects to show potential employers!

3 Coding Projects in the course:
â€¢ Simple text site - We will use what we learned in the HTML sections to
create a simple text site. This project will help you learn HTML structure
and the essential elements.
â€¢ Fallout inspired Pip-Boy - We will take what we learned in the CSS and
Bootstrap sections of the course to code a Pip-Boy from the game
Fallout. This project will help you learn the design elements of modern
web development.
â€¢ Google Chrome extension - We will finish the course by programming a
JavaScript based Google Chrome extension. This project will help you
understand the logical parts of web development.

Topics covered in the course:
â€¢ Web development basics with HTML
â€¢ Cascading Style Sheets (CSS)
â€¢ JavaScript programming
â€¢ jQuery JavaScript library
â€¢ Bootstrap framework

Still not sold? Check out a few of the awesome reviews this course has received from customers:
â€¢ "Excellent course! Highly recommend it! Provides great hands-on experience with web development.â€œ
â€¢ "I really like how when the author makes a mistake he takes the time to show us how he is wrong and corrects it rather than editing it out of the video. Very easy to follow and informative course!â€œ
â€¢ "I am really enjoying the experience of learning a new skill. I used to believe that web design was way too complicated for me to learn but so far in this course I have been keeping up and having fun."
Who this course is for:
Anyone who would like to learn front-end web development

User Reviews

Rating

average 0

Total votes0

Focused display

Joseph Delgadillo is the founder of JTD Courses, an education technology company. He has been active in the online learning industry since 2015 and has worked with several prominent companies. As of 2023, over 1 million students across the globe have enrolled in his courses covering network security, Python programming, web development and more.

Nick Germaine

Instructor's Courses

I'm a Canadian software engineer. I like clean designs, efficient backends, and long walks on the beach,

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.