Get started as a front-end web developer using HTML, CSS, JavaScript, jQuery, and Bootstrap!
☑ 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
If you would like to get started as a front-end web developer, you are going to LOVE this course! Work on projects ranging from a simple HTML page to a complete JavaScript based Google Chrome extension. We will cover the following technologies in this course:
- Web development basics with HTML
- Cascading Style Sheets (CSS)
- JavaScript programming
- jQuery JavaScript library
- Bootstrap framework
We will work on 3 class projects throughout this 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.
This course covers the most popular web development frameworks, and will get you started on your path towards becoming a full-stack web developer!
Still not sold? Check out a few of the awesome reviews this course has received!
“Excellent Course! Highly Recommend It! Such a great hands on experience with this course.”
“Very nice course, covers all the stuff you need, good voice and good explanation makes it perfect for people that are new to HTML. Also there’s some best practices recommendations which are useful even for advanced developers.”
“Excellence in giving the optimal set of tools for web development beginners seeking a well-rounded start for professional web development.”
Thank you for taking the time to read this, and we hope to see you in the course!
English
Language
Welcome to the Course!
Introduction to the course
Atom setup
Web Development Basics – HTML
HTML document structure
HTML elements – div and span
HTML elements – i, b, p, and a
HTML elements – ul, li, and ol
HTML elements – header and footer
HTML elements – section, main, and article
HTML elements – h1-h6 and aside
HTML tables
Project #1 – HTML text site
Advanced HTML Concepts
Images
Forms
Inputs
Checkboxes
Radio buttons
Select, option, and buttons
HTML5 videos
HTML5 audio
Doctypes
Meta tags
Introduction to Cascading Style Sheets (CSS)
Targeting color and background
Element specificity
ID targeting, margin, and border
Padding, margin, and float
Max-width and background-image
Switching over to an IDE
Font weight, style, and family
Text decorations
Text spacing
Text decoration modification
Text shadow
Advanced CSS
Pseudo-states
Border radius
Positions
Pseudo-elements
Z-index
Viewpoint width and height, overflowing content
Transition property
JavaScript for Beginners
Intro to JavaScript
Alerts and console logging
Integers, strings, and variables
Undefined variables and modifying values of variables
Boolean operators
Comparing values
If statements
For loops
Defining functions
Event handling
Setting an elements innerHTML
More JavaScript Concepts
Arrays pt.1
Arrays pt.2
Arrays pt.3
Textareas and getting the value of inputs
Functions – parameters and return values
Multiple parameters in functions
Flexible function parameters
Exercise – find the missing number
Exercise solution
Classes explained
Class constructor, instance variables, and static variables
Extending classes
Getting Started with jQuery
jQuery setup
Targeting elements
Event handling
Dropdown menus
Making our dropdown disappear
Multiple targets, events, and attr method
Prepend, append, and html
preventDefault
event.which and switch properties
Custom context menu, pageY, and pageX
is method
More jQuery
Writing our own version of jQuery
Find method
First and last
Focusin and focusout
Contains, is, and hasClass
Each method
Callbacks
CSS
Bootstrap Basics
Bootstrap setup
Navbar pt.1
Navbar pt.2
Forms pt.1
Forms pt.2
Buttons
Project #2 – Pipboy from Fallout 4
Setup
Navbar
Main page
Pipboy image and footer
Colors
Font and styling main nav
Scanlines
Navigation styling
Tabs
Progress bars
Stat bars
Footer fixes
Damage and resistance
Icons
Inventory template
Item list
Weapon stat container
Finishing touches with JavaScript
Project #3 – Google Chrome Extension
Problem solving
Manifest files
Basic setup
Getting video URLs
Injecting JavaScript
Getting pretty objects for each URL
Creating download options list
Communicating between the page and extension
Chrome downloads API and background scripts
Receiving messages and downloading files
Styling our extension and publishing
Final Thoughts
Tips for getting started as a professional web developer