The Complete 2020 Web Developer Master Course

This lecture introduces the concept of HTML tags, elements, and attributes.  You will use elements to create the HTML boilerplate, a foundation of all web sites.

We expand on the content from the last video by introducing more elements and using them to create a basic web page.  The page will have no styling.  We'll add styling to the page in a couple lectures from now, after covering basic CSS.

As an introduction to CSS we'll see how to select an element, and see how to change that selected elements color, background-color, font, & font-size.

After learning some CSS, we can go back to our simple page and apply some styles to it!

This lecture will shine a light on a very important concept in HTML; semantics.  HTML isn't just about putting content into your web site.  It's also used to convey meaning to search engines.

In this lecture we return to CSS and cover a few more ways of selecting elements, we also see how some selectors are more specific than others.

A shorter lecture; here I will show you how to set a background image to your site.  I will also show how to have the image always cover your whole page, without repeating, on all screen sizes.

Some HTML elements are block elements, some of them are inline elements.  What's the difference?  This lecture will explain it all in detail.  You will also see how to change a block element to an inline element, and vice-versa.

Here we learn about the HTML form & input tags.  And a whole host of attributes that can be used with them.

Even though it may not seem like it, basically everything in a web page is a box. 

The box model can be a bit confusing, but I promise, it isn't.  Once you have a grasp on the box model, designing web sites will be just that much easier.

In this lecture I will show you how to can use the <ul> & <li> elements to create a sweet navbar. 

It's pretty rare that you will be using tables in your every day web sites, but it's still good to now how to use them.

Did you know: Tables used to be used to control the entire layout of a site.  Developers would put everything in a site in one giant table.  And inside that table they would put other smaller tables to be individual sections of the site.  It was a dark and messy time.

This lecture will cover one of the most fundamental concepts in any programming languages; variables.

In my opinion, the three fundamentals for all programming languages are.

1. Variables (Covered in this lecture)

2. If Statement, for controlling the flow of the program.

3. Functions, for writing repeatable code.

It's important to be able to think like a computer, if you're going to be telling a computer what to do. 

Understanding expressions will give you an insight to how computers process values under the hood.

If statements allow you to run code only in certain circumstances.  Essentially controlling the flow of your program.

Here we'll learn about logical operators.  Logical operators give us more power when it comes to controlling the flow of the program using if statements.

Functions allow you to write code once, and run it as many times as you like.  I'll also show you how to use arguments in your functions that give you the ability to write really flexible code.

Arrays are sort of like storing multiple variables in a single container.  We'll also see a bunch on commonly used functions that can be called on your arrays.

This lecture provides a challenge for the student.  Good luck!

This lecture will cover object literals, or objects, for short.  You will also see the this keyword used for the first time.  Much more detail on that in a later section covering advanced JavaScript.

Another challenge for the student.  Good luck!

Here we'll see how JavaScript can coerce a value into a new type, to make an equality comparison return true.

We'll also see the difference between loosely equals and strictly equals. 

And finally we'll see that comparing objects for equality is much different than comparing to a primitive type.

In this lecture we'll repeat code as much as we want using for, and while loops.

This lecture is dedicated to handling math operations in JavaScript.  Basic stuff like addition, subtraction, multiplication, division, modulus, exponential, and order of operations.

The final challenge of this section. Good luck!

Did you know: Programming interviewers will sometimes ask potential employees to solve the Fizz Buzz challenge to determine whether or not the candidate knows how to write code.

In this video I'll show you how to more easily loop over arrays and objects.

In this lecture we will use JavaScript in a web site for the first time.  We will also use some built in JavaScript functions that weren't available in out environment from the last section.

Here we'll learn how to store an HTML element in a JavaScript variable.

Continuing from the last lecture, here we'll see how to store several elements in a JavaScript array.  Useful for looping through elements and updating many elements at the same time.

We will also be introduced to an array-like element, which is like an array, but not.  I'll show you how to turn an array-like into an actual array.

The query selector offers an easier way to get elements from the DOM.

An event is used to run code when certain things happen to your elements.  IE: They are clicked on, an input changes, etc.

In this lecture you will see how to add classes and update the inner text of your HTML elements dynamically with JavaScript.

jQuery is a library for JavaScript.  It basically let's you do more while writing less code.  It's awesome!

In this opening lecture we will set up the files for the project.

In this one we'll be creating the appearance of the app, using HTML & CSS.

In this short lecture, I'll show you how to play audio, using JavaScript.

Here we'll be setting up our event listeners to listen for inputs changes so we update our HTML timer element & timer data.

Here will run function when the buttons are pressed and also handle the enabling & disabling of buttons.

We will also see the ...rest operator for the first time.

Another short lecture, here we'll just make it so we can't change input values while the timer is on.

By the end of this lecture, our timer app will be completely functional. 

Viewport units are based of your screen size.  These units are by default responsive.

Relative units offer a better alternative than using pixels for font-sizes, padding, margin, almost everything, actually.

This is the first of a series of three lectures where I cover CSS animations.  Here we will see how to make better hover effects for buttons or links.

This lecture will introduce a new CSS property called, transform.  This property accepts several CSS functions as a value. 

This property is ideal to animate, as it doesn't affect the layout of your page.

Keyframe animations offer a powerful way to create complex animations.

This lecture will take a look at the CSS position property, specifically what happens when you set it to the value of relative.  The first of many lectures focusing on the CSS position property.

Continuing our look at CSS position, this lecture dives deep into absolute positioning.  Absolute positioning can be a bit confusing at first, I hope to be able to remove some of that confusion.

Here we'll see how to position elements to the viewport.  Meaning they will always stay in the same place, even while the user scrolls through the page.

Finishing off out journey on CSS positioning, we'll look at sticky positioning, which is sort of a combination of relative and fixed positioning.

I'll also introduce you to font-awesome, a free library of icons that you can use in your websites.

This lecture will show you how you can use media queries to change the layout of your page based off the screen size.  Really useful for making creating responsive web sites.

In this section you'll be introduced to flexbox, a powerful technology for simplifying CSS layouts.

In this lecture I emphasize how the flex properties do their work either along the main, or cross axis.  And these axes can be changed using the flex-direction property.

Here we'll see how to enable the wrapping of flex items when they can no longer fit on along the main axis.

A challenge for the student! Good luck.

In this lecture I'll show you how to change how the flex items are aligned, similar to justify-content, but for the cross axis.

Let's see how to make flex items grow when there is still space available in the container.

Another challenge for the student! Good luck :)

Aligning items is similar to the CSS vertical-align property, but for flex items, and better.

See how you can change the order of the flex items, useful for when changing the layout with media query breakpoints.

The final flexbox challenge.  Good luck.

In this video we will install node & npm.  Then we'll use npm to install node-sass locally on our computers.  This will let us use sass whenever we want.

Here I'll show you how to compile a Sass file(s) into a CSS file(s).

Here I'll show you some of the ways that Sass differs in syntax from CSS.

Variables are a super powerful feature of Sass that let's you write very DRY code.  I'll show you how to use variables and the different types of variables available in Sass.

In this lecture I'll explain the concept of variable shadowing.

Functions in Sass are very similar as functions used in JavaScript.  You can use Sass functions to take some hassle away from doing some common calculations used in CSS.

Mixins are similar to functions, the only different is that that print code into your compiled CSS file, rather than returning a value.

This video presents a challenge for the student.

Extends is a feature that allows you to build on top of other CSS rules.  Similar to extending a class in an object oriented programming language.

This video presents a challenge for the student.

Basically if statements for CSS.  You can use these for your functions or mixins.

Here I'll show you how to use loops in Sass.  Useful for looping through lists and printing out similar styles without needing for repetitive selectors or declarations.

After this video, you'll be able to compile many Sass files into 1 single CSS file.  Really useful for keeping your code organized.

In this video we will prepare our project by setting up the Sass files and creating the boilerplate.

In this lecture I will go over some other CSS concepts that I haven't yet covered.

In this lecture we will start creating out project by starting with the landing page.

The animations that happen when we click enter site can be a bit confusing at first.  In this lecture, with the help of Photoshop, I'll show you exactly what happens when the user clicks enter site.

In this lecture we will start creating the enter site animations by starting with the dimmed background sliding in.

Here will create the main content that is seen above the fold after the user enters the site.

In this lecture we'll write write all the markup for the sidebar.  Including the parts that are hidden off screen by default.

In this video we will start styling the sidebar and form.

By the end of this lecture, we will be completely done with everything above the fold. Well done!

Here we will continue creating the project by creating the next section directly under the fold.

The Current Users section is pretty basic.  But we will be adding some custom JavaScript to make the section be a bit more dynamic.

In this lecture we will create the locations section of the project.

The testimonial section is a little complex, so I decided to break it down into 2 separate lectures.  In this video we will get the background design created, then create the content in the next one.

Here we will finish the testimonial section of the project.

We are very close to finishing the project.  In this video we will create the Deal of the Week section.

In the final lecture for this project, we'll create the footer section.  Great!

This video doesn't actually have anything to do with  HTML5, I just didn't know where else to put.  I think this is a good place for it because at this point you will have had experience using atom. 

In this lecture I will show you some of the new input types, as well as some older input types that I haven't yet had a chance to use.

In this video I will show you how to insert video into your pages and how to set video as the background for your pages.

In this video I will show you how to embed data into your HTML by using the data-* attribute.

In this short lecture I will show you to make sure your HTML code is up to the standards of HTML5.

Although not new in HTML5, it is important for any Web Developer to understands how to insert favicons into their pages.

Here we will see how to use the Dialog element to create pop ups in our pages.

In this first lecture covering HTML5 API's I'll show you how to add custom form validation messages to your HTML forms.

The geolocation API lets you collect a users coordinates.

The HTML5 Web Storage API lets you store data in a users browsers and read the data every time they visit the site.

This video presents a challenge for the student.

IndexedDB is a database system that will store data on a users browser.  It's similar to Web Storage, but a lot more powerful & a lot more complex.

Continues detailing how to use CRUD operations with IndexedDB.