The Complete Front-End Web Development Course
About Course
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
What Will You 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
Course Content
Welcome to course
-
Introduction to the course
00:00 -
Atom Setup
00:00
Web Development Basics -HTML
-
HTML Document Structure
00:00 -
HTML elements – div and span
00:00 -
HTML elements – i, b, p, and a
00:00 -
HTML elements – ul, li, and ol
00:00 -
HTML elements – header and footer
00:00 -
HTML elements – section, main, and article
00:00 -
HTML elements – h1-h6 and aside
00:00 -
HTML tables
00:00 -
Project #1 – HTML text site
00:00
Advance HTML Concepts
-
Images
00:00 -
Forms
00:00 -
Inputs
00:00 -
Checkboxes
00:00 -
Radio buttons
00:00 -
Select, option, and buttons
00:00 -
HTML5 videos
00:00 -
HTML5 audio
00:00 -
Doctypes
00:00 -
Meta tags
00:00
Introduction to Cascading Style Sheets(CSS)
-
Targeting color and background
00:00 -
Element specificity
00:00 -
ID targeting, margin, and border
00:00 -
Padding, margin, and float
00:00 -
Max-width and background-image
00:00 -
Switching over to an IDE
00:00 -
Font weight, style, and family
00:00 -
Text decorations
00:00 -
Text spacing
00:00 -
Text decoration modification
00:00 -
Text shadow
00:00
Advance CSS
-
Pseudo-states
00:00 -
Border radius
00:00 -
Positions
00:00 -
Pseudo-elements
00:00 -
Z-index
00:00 -
Viewpoint width and height, overflowing content
00:00 -
Transition property
00:00
JavaScript for Beginners
-
Intro to JavaScript
00:00 -
Alerts and console logging
00:00 -
Integers, strings, and variables
00:00 -
Undefined variables and modifying values of variables
00:00 -
Boolean operators
00:00 -
Comparing values
00:00 -
If statements
00:00 -
For loops
00:00 -
Defining functions
00:00 -
Event handling
00:00 -
Setting an elements innerHTML
00:00
More JavaScripts Concepts
-
Arrays pt.1
00:00 -
Arrays pt.2
00:00 -
Arrays pt.3
00:00 -
Textareas and getting the value of inputs
00:00 -
Functions – parameters and return values
00:00 -
Multiple parameters in functions
00:00 -
Flexible function parameters
00:00 -
Exercise – find the missing number
00:00 -
Exercise solution
00:00 -
Classes explained
00:00 -
Class constructor, instance variables, and static variables
00:00 -
Extending classes
00:00
Getting Started with JQuery
-
jQuery setup
00:00 -
Targeting elements
00:00 -
Event handling
00:00 -
Dropdown menus
00:00 -
Making our dropdown disappear
00:00 -
Multiple targets, events, and attr method
00:00 -
Prepend, append, and html
00:00 -
preventDefault
00:00 -
event.which and switch properties
00:00 -
Custom context menu, pageY, and pageX
00:00 -
is method
00:00
More JQuery
-
Writing our own version of jQuery
00:00 -
Find method
00:00 -
First and last
00:00 -
Focusin and focusout
00:00 -
Contains, is, and hasClass
00:00 -
Each method
00:00 -
Callbacks
00:00 -
CSS
00:00
Bootstrap Basics
-
Bootstrap setup
00:00 -
Navbar pt.1
00:00 -
Navbar pt.2
00:00 -
Forms pt.1
00:00 -
Forms pt.2
00:00 -
Buttons
00:00
Final Thoughts
-
Tips for getting started as a professional web developer
00:00