Learn HTML & CSS: How To Start Your Web Development Career

Learn HTML & CSS To Jump Start Your Career In Web Development
4.5 (415 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
8,782 students enrolled
Free
Start Learning Now
  • Lectures 60
  • Length 4.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

UPDATE: This course is completely updated and current as of June 2016.

---------------------------------------------------------------------------------------------------------------------------

Creating a career in development has been the best choice I've made in life so far. 

It has allowed me to be geek and get paid making awesome apps that help people.

There is an abundant number of tech jobs in every major city, so you can live in a lot of cool places.

The average web developer makes around $76k a year.

A lot of tech companies allow their employees to work remotely.

Needless to say, this industry has been great to me :-)

And I want you to experience that too.

The course is split into 4 easy to follow sections:

1.) HTML Section

2.) CSS Section

3.) Code Challenge Final

4.) Course Project


In the HTML and CSS sections you create websites using HTML and CSS.

Add these websites to boost your resume for job interviews.

There are numerous code challenges to practice what you learn, as well as quizzes to make sure you know what you have learned.

In the code challenge final you build a responsive website for a mobile device.

In the course project you build a clone of the UK BBC news website and host it on Github for potential employers to see. This is how I got my first job interview as a web developer!

By the end of this course you will have everything you need to land a web developer job.


Got questions?


I am with you every step of the way.

If you have a bug you can't figure out, post your code in the discussion tab and I will take a look at it for you.

Remember, I want you to be successful.


The web development industry is growing at an exponential rate. Don't get left behind!

This course is free.

What excuse do you have to not take this course then? :)

Join Now!


Onward to success and freedom!


What are the requirements?

  • Internet Access
  • Google Chrome Browser

What am I going to get from this course?

  • Make Any Website Responsive & Mobile Friendly
  • Create Your Own HTML & CSS Websites From Scratch & Host Them For Free
  • Impress Employers With The BBC Website Clone You Will Make In The Course Project

What is the target audience?

  • Entrepreneurs
  • Beginner Programmers
  • People Seeking A New Career In Web Development
  • Web Designers Who Want To Implement Their Designs

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Your Coding Environment: Already Set Up For You - No Work Needed!
01:42

in this video you will set up the coding environment that you'll be working with in this course

  • Codepen is used for development because it makes changes in real time so you don't have to tab back and forth between your browser and text editor to see the changes. Remember, we want to get up and running as fast as possible
  • simple hello world with no html structure
  • create an account

So now that you have our coding environment set up you can jump into making websites right away.

Let's do it.

Section 2: Web Development Pillar #1: HTML - Learn The Foundation Of The Entire Internet
03:08

In this video you will learn what HTML is and how it differs from other programming languages.

  • It is the content of your web page.
    • If you have a blog, the HTML is the words of your blog post.
    • It is the WHAT
  • Take a look at a website without CSS. HTML is the RAW Content.
  • Look at source of the webpage
    • HTML is a markup language that uses tags. These tags are like tupperware containers you store different kind of food in. One container for your meat and the other for rice, etc.


You learned that HTML is the actual content of the webpage, such as headings and paragraphs.

You saw that HTML is a markup language, which means it uses tags that contain content to make visible on our webpage.

In the next video you will learn more about HTML tags and how to structure them properly

04:21

In this video we will dissect the structure of a webpage to understand what goes in each section and how to properly nest tags.

  • HTML is made up of nested tags.
    • That means that everything has it's proper place.
    • It's like having different tupperware containers for your food.
      • One has oatmeal and another has fish, etc,


<html> - Encompasses your entire webpage document.

<head> - Where all your meta-data goes. You will also include CSS & Javascript libraries here. Nothing in here gets displayed to the user.

<title> - displays in the tab (doesn't work on codepen because we are coding in a sandbox environment)

meta description - snippet that search engine crawlers display on their search page results

<body> - Where all your content goes. This is the stuff that will be displayed for the user to see on the webpage.


In this video you learned the structure of a webpage using the html, head, and body tags.

You also learned how to properly nest your HTML tags.


In the next video you will make your first webpage that is a blog post about your favorite cakes

03:36

In this video you will create your first website that is a blog post about your favorite cakes.

  • <title> and <h1> tag tell the user what the main idea of the page is.
  • <h1> is the most relevant, and hence the largest heading size.
    • Usually will only have one <h1> per page.
  • <h6> is the least relevant, and the smallest heading size.


In this video you learned how to create your first website blog post by using headings and paragraphs to display to the user.


In the next video you will add lists to your blog post to make your content easier for users to read.


03:07

In this video you will add an ordered list and unordered list to your cake blog post.

  • Lists are important factor in usability because it helps users find what they are looking for quickly.
    • Users do not read webpages, they skim.
    • The bullets or numbers help them skim and find things they are looking for faster
  • Create an ordered list of your favorite cakes
  • Create an unordered list of the cities you ate cakes in


In this video you learned how to implement ordered and unordered lists.

You learned that using them frequently on your webpage is important in making your content easier to skim for your users.


In the next video you will put everything you learned so far together in your first coding challenge where you build a webpage about your dream cars that you will own some day.


VROOOOOOOM!


01:11

Here is your first coding challenge.

  • Create your own pen on Codepen and then share a link to your pen in the discussion once you finished and I will grade it
  • If you get stuck, rewatch the previous videos.
  • DO NOT watch the next video until you complete this challenge!! (NO CHEATING! :-) )

  1. Create a new webpage that has the title: "Cars I will own some day".
  2. Give your webpage an h1 heading "My Dream Cars"
  3. Create an unordered list of add-ons you want for your cars.
  4. Create an ordered list of your dream cars.
  5. Give each a list an h2 heading


  • It should look like the image in the video lecture


Again, Do NOT look at the next video until you have something similar to the screenshot here. If you get stuck, look back at the previous videos or google it.


In the next video I'll walk your through how I did this.

03:59

Let's walkthrough the solution for your first code challenge:

  • Best practice: write the closing tag write immeditely after you write the opening tag
  1. Create a new webpage that has the title: "Cars I will own some day".
  2. Give your webpage an h1 heading "My Dream Cars"
  3. Create an unordered list of addons you want for your cars.
  4. Create an ordered list of your dream cars.
  5. Give each a list an h2 heading


  • Check the downloads tab to see the link to my code challenge #1 pen and check out the code


Good job! You now understand what HTML is and the structure it uses. You also understand how to use headings and both ordered and unordered lists to structure your webpage to make your content easier to skim for your users.
You've come a long way in a VERY short time.



In the next video you'll learn how to use inline tags to bring your paragraphs to life.


02:51

In this video you will learn how to use inline tags to bring your paragraphs to life.

  • They are called inline because you can use them in a line
  • Examples:
    • <strong>
    • <em>
    • <span>
  • You can find a list of more inline tags by clicking on the link in the downloads tab to the right in the sidebar.


In this video you learned what inline tags are and how to use them to give your paragraphs some life.


In the next video you will learn about void tags and how they differ from regular HTML tags.

03:30

In this video you will learn the difference between void tags and the other HTML tags you've seen so far.

  • Void tags do not need a closing tag because they cannot contain anything within them.
  • Examples:
    • <input />
    • <img />
  • In the downloads tab you will find a link that show you the most used void tags


In this video you learned how void tags differ from regular HTML tags


In the next video you will learn about HTML attributes and how you can incorporate them into your HTML tags.

02:02

In this video you will learn how to incorporate HTML attributes to increase the functionality of the HTML tags you have used so far.

  • Some of our tags need additional meta data.
    • Attributes provide this meta data for our HTML tags
  • Example:
    • meta description=" "
    • img src=" "
    • a href=" "


In this video you learned how to provide meta data to your HTML tags by using attributes.


In the next video you will learn about HTML classes and how you can use them to organize your tags.

05:48

In this video you will learn how to group your HTML code using classes.

  • Three primary reasons for using classes:
    • 1.) Your code will make sense to someone who is reading it for the first time.
      • Good for working with multiple people on same website project.
    • 2.) Classes make it easier to understand what you're looking at if you haven't looked at your code in months
      • That being said, give your classes a specific name, not ambiguous.
      • Example:
      • Give the top navigation a class of "top-nav" instead of "nav" because you can also have a footer nav and sidebar nav.
      • Also naming convention is to use a hyphen between words
    • 3.) Classes make changes in multiple places on the webpage possible.
      • This means faster production which is what we want! That's why we are using Codepen!


  • Example of organization using a HTML class:
    • blog post
      • group headings
      • group content


Here we have specific names for our classes so we know exactly what it is at first glance.


We also can change both of these headings' style through CSS at the same time rather than having to do it individually.


In the next video you will take grouping your HTML tags a step further with HTML IDs.

02:40

In this video you will continue to learn how to group your HTML tags using HTML IDs.

  • Classes are used in multiple places on your webpage, just as we saw in the last video.
  • If you have multiple blog posts then you should have the "blog-post" class in multiple places on your webpage.
    • IDs are unique and only used once.
      • So if you have two blog posts then the first one gets an ID of 1 and the other gets an ID of 2
  • This is important for instances when you want to change the style of blog post with an ID of 1 but not the blog post with and ID of 2



Now you know that you implement HTML classes for grouping related content and HTML IDs for unique content.



In the next video you will take your first Quiz.


Good luck!

5 questions

Now you will be quizzed over all of the HTML material up to this point.

Don't move forward unless you can get at least 80% correct.

06:09

In this video you will continue to learn how to place images on your webpage

Go over these attributes:
  • src
  • alt
    • for search engines to pick up on and get ranked in Google imags
      • show example


Images are an important part of a web page because images draw the user's eye over text.



Search engines also place emphasis on images for this same reason, because search engines cater to their users and what will give them the best experience.



In the next video you will learn how to turn your image into a link.


04:57

In this video you will learn how to create links for your webpage to increase usability and get your website ranked higher in search engine results.

a tag:

  • Use google.com for example link
    • href
    • target="blank"
      • keeps users on your site, which is better for your website ranking and so that the user still has your site active when they want to come back to it.
  • Inner link
    • a link that links to a page on your website
  • Outbound link
    • a link that links to a page outside of your website
  • Anchor text
    • the text you use in between your <a></a> tags


Now you know how to create links to the rest of your webpage or to other articles and websites that can enrich your user's experience.



In the next video you will dive into your second coding challenge!


02:15

Taking pictures and selfies with good is an Instagram sensation particularly beloved by teenage girls. Today you're taking part in that.

  1. Make an ordered list of your 4 favorite kinds of food
  2. Make the first list item strong
  3. Give the second one emphasis
  4. Give the third red text using span (use the docs or google search!)
  5. For the 4th item use an image instead of text.
    1. Just use google images to find a picture of it or take a picture of your meal using the camera on your phone
  6. Give each element in the list an id of its own name
  7. Group all of the food items that are text and give it a class of food-list


Share the pen in the discussion section so I can grade you, along with one thing that you learned in this challenge.



In the next video I will walk you through how I completed the challenge


04:52

Use instagram link for my selfie for extra credit!

  1. Make an ordered list of your 4 favorite kinds of food
  2. Make the first list item strong
  3. Give the second one emphasis
  4. Give the third red text using span (use the docs or google search!)
  5. For the 4th item use an image instead of text.
    1. Just use google images to find a picture of it or take a picture of your meal using the camera on your phone
  6. Give each element in the list an id of its own name
  7. Group all of the food items together and give it a class of food-list



I posted the link to my pen in the download tab to the right. Take a look at it and compare it to your own.



In the next video you will learn how to create forms that can capture information from your users.

04:57

In this video you will create a form to capture a user's name and e-mail.

HTML forms can be used for:

  • log in credentials
  • capture leads for email leads
  • get data needed for a function on your app to run, like zipcode for weather app

  • Create input field for name
    • have placeholder text
  • Create input field for email
    • placeholder text
  • Button
    • we can use javascript to send this information to an email, but we won't cover javascript in this course.



So you learned how to create a form and inputs to capture information from your users.


In the next video you will learn how to display a person's name, age and email in a table.



04:58

In this video you will create a table that contains the name, age and email of two of your friends.


  • Create the table for two friends
    • it's ugly, so you would want to style this better with bootstrap or your own css styles


Now you know how to display data to your users in the form of a table, which makes the data easy to skim for the user.



In the next video you will learn how to use semantic tags, which is a feature of HTML5, to better organize and specify sections in your webpage.

07:19

In this video you will create a webpage using semantic tags, which is a feature of HTML5.

You know a website uses HTML 5 if the beginning of the document begins with <!DOCTYPE html>

  • HTML5 is now supported by most modern browsers, so it's good to use semantic tags when you can to help crawlers better understand your webpage.
  • Semantic HTML, creating with proper order, is using the correct tag for the correct situation i,e, article tag for article
  • Redo cake blog post using semantic tags


Check the downloads tab for a link that shows all the semantic tags available to you.


Now you know how to incorporate semantic tags like article and footer into your webpage so that it is easier for you to style and so that the search engine crawlers can understand your webpage better so it can increase your webpage ranking.


In the next video you have your third coding challenge, where you create a form to get a user's email and then persuade them to sign up by displaying the benefits of hiring you on to their web development team.


01:11

For your third coding challenge you will

  1. Create an input form with a button that asks the user for their email
  2. Create a 3x3 table explaining the benefits of having you on their web development team


Save your pen and post it in the discussion section so I can grade it along with one thing that you learned.


In the next video I walk you through how I solved the challenge.

12:00

In this video, I will walk you through the solution for Code Challenge #3.

  1. Create an input form with a button that asks the user for their email
  2. Make a 3x3 table explaining the benefits of having you on their web development team
  3. FOR BONUS, use bootstrap to style the table and form


I posted the link to my pen in the downloads tab.


Take a look at it and compare it to your own.


In the next video I will recap what you have learned about HTML


Article

In this lecture I will recap all the HTML you have learned.

  1. Structure of webpage
    • nested tags
    • semantic tags
    • classes
    • ids
  2. text
    • paragraphs
    • headings
    • inline tags
  3. lists
    • ordered
    • unordered
  4. void tags
    • img
    • attributes
    • input for forms
  5. tables
  6. links
    • anchors
    • inbound
    • outbound

Congratulations! You really have learned a lot and can now make a wide variety of websites as well as fix HTML errors on other peoples' websites.

Next you will complete the HTML final and then move on to learning how to make your HTML pleasing to the eye by using CSS.

Article

For your HTML final you will look at my HTML code and add classes and IDs where needed.

  • Use proper naming
    • specific
    • hyphen
This seems simple, but you need to be in the habit of creating specific names so when you go into the next section for CSS you can stay error and confusion free.


Check out the downloads tab for the link to my pen.

After you're done post a link to your pen in the discussion section and I will grade you.

DON'T MOVE FORWARD UNTIL YOU COMPLETE THIS FINAL!


In the next section you will learn how to style your HTML using CSS.

Congrats!

Article

See below for HTML Documentation & Resources

Section 3: Web Development Pillar #2: CSS - How To Make Your Websites Look Professional
02:57

In this video you will learn how to use CSS to style your HTML content.


As you previously learned, HTML is the what, the content, and CSS is the how, the style.


  • CSS dictates how the HTML looks
  • Example:
    • body color is orange
    • p color is blue


What if you want one paragraph to be blue and the other green?


You will learn how to do this in the next video.


07:08

In this video you will use CSS classes to make one paragraph's color green and make another paragraph's color blue.

  • CSS classes work together with HTML classes.
  • Example:
    • give each paragraph a class
    • create CSS class for those HTML classes
      • CSS class always begins with a .
    • style the paragraphs accordingly
    • sidenote: you can use IDs, but you always want to use classes unless you absolutely have to use an ID


Here you see that you can style different elements on your webpage using HTML and CSS classes.


In the next video you will learn about using divs for styling your website.



04:34

In this video you will learn how to use div to create containers on your webpage that will give you better power of manipulation in your CSS styling.



  • Div is a container, also "divider"
    • everything within that container gets the rules applied to it unless it has a more specific rule (more on that in the next lecture on CSS Hierarchy)
    • great tool for aligning content on a page to make it look uniform



Now you know how to incorporate divs into your HTML code so that you can style your elements to look uniform.

You also saw that div is a container, and everything within that container receives the styling rules given to that container.



In the next video you will learn the hierarchy of CSS and how it dictates which rules are applied to certain elements on the website.


03:54

In this video you will learn how hierarchy in CSS determines which elements are styled by certain CSS rules.


  • The more specific rule over-rules the more general rule
    • Example:
      • an id will over-rule any other rule because it is most specific


Now you can see why specificity is important not only in helping you name your elements, but also in applying styles to them as well.


In the next video you will learn how to style and align text using CSS rules.

04:07

In this video you will use CSS text properties to align three different paragraphs and given them a bold styling.


  • You can select the paragraphs to manipulate them all, or put them all in a single div container and manipulate them that way
  • You can create multiple CSS classes and give multiple classes to each paragraph to style them how you want.


Open the pen and add some more of your own styles. I posted more CSS text styles below for you to play with.



Now you know how to style your text by using text-properties and CSS classes.


In the next video you will complete your first CSS code challenge where you will create two paragraphs and give them some properties.



00:51

In this code challenge you will:

  1. Create two paragraphs
  2. Align one to the left and the other to the right
  3. Give the p on the left a background color of green
  4. Give the p on the right a font color of blue
  5. Change the font family of both p to Tahoma


After you are finished, share your pen in the discussion tab to the right along with one thing that you learned so I can grade you.



In the next video I will walk you through how I solved this code challenge.

04:30

Let's walkthrough the solution for Code Challenge #4:



  1. Create two paragraphs
  2. align one to the left and the other to the right
  3. Give the p on the left a background color of green
  4. Give the p on the right a font color of blue
  5. Change the font family of both p to Tahoma
    1. use the classes. Do NOT select them using p because that is bad practice
      1. it's bad practice because you always want to be as specific as possible. It's like giving a folder in a filing cabinet for all of your documents. Specificity prevents sloppy errors and saves time in the long run.



Check out the link to my pen in the downloads tab and compare it to your code.



In the next video you will learn about the different measurements used in CSS.



04:58

In this lecture you will learn the different measurements used to style elements in CSS.


  • We will cover the most used measurements only:
    • pixels
    • ems
  • Ems are responsive - they adjust to the size of an 'm' character for the browser displaying the texted
  • Pixels are always fixed
  • % is also used sometimes, but never for text.
    • Usually used for adjusting containers, like divs and images, to fit different page and browser widths



I've added more documentation for CSS measurements below




In the next video you will learn about boxes in CSS, which includes the infamous padding and margins.

04:42

In this video you will learn how to create an manipulate boxes in CSS.


  • Boxes include all containers, images, etc.
  • We want to use the border-box model so we don't have to calculate the size of the box with the padding and border.
    • content-box is the default model that places border and padding outside the box rather than inside.
      • makes it a pain in the butt to manipulate.


Open the pen and play around with the padding and margins.


Get familiar with boxes because the majority of CSS is creating and manipulating boxes.



Now you know how to create and manipulate CSS boxes and why we prefer to use the border-box model, because it takes away the calculation we otherwise would have to do if the padding and border made the box bigger.



In the next video you will learn how to float your boxes on your webpage so that you can have your images in a line instead of stacked on top of each other.

05:47

In this video you will learn how to float elements on your webpage to improve document flow on your website.


  • Elements that are stacked can be put on the same line by floating them.
    • float: left; float: right;
  • Clearfix forces the parent container to contain its child containers
    • overflow: auto;
  • Clearing a float is like creating a new line for elements on the page
    • clear: both;



Open the pen and play around with floating the elements.



Now you know how to float elements on the page so that your website looks more appealing to the user.


In the next video you will complete your next code challenge, which is all about manipulating CSS Boxes.


Have fun!

Article

In this challenge you will practice your skills with CSS boxes.

05:58


  1. Create a box with a width of 300px and a height of 600px.
  2. Give that box a border of 5px and solid black
  3. Give it a padding of 20px
  4. Horizontally center the box
  5. Create another box within the first box with a height of 50% and a width of 90%.
    1. Give it a border of 1px solid black
    2. Align the box to the center of its parent container (the first box)
    3. Give the box some text and align it to the center.
    4. Give the text some padding so it's not squished at the top
  6. Create two more boxes and place them within the first box
    1. Give them a height and width of 50%
    2. Give them a border of 1px solid black
    3. Center them horizontally within their parent container
    4. Give them text and align it to the center



Good job completing this challenge!



In the next video you will learn more about positioning elements in CSS.

06:57

In this video you will learn how to position different elements where ever you want on your website.


  • Static - default, not positioned
  • Relative - position relative to the page
  • Fixed - element is fixed in that space no matter what
  • Absolute - element is fixed within that space of its parent container no matter what


I encourage you to fork my pen and play around with this until you have a good grasp of positioning elements.


Positioning is a crucial skill in web development.




In the next lecture you will complete a quiz over what you have learned so far about CSS boxes and positioning.



Good luck!





5 questions

This quiz is to test you over what you know about CSS boxes.

Article

See the links below for the image and template you need for this challenge.

05:36

Good job completing this challenge!


How did you do? Let me know in the discussion group.



In the next video you will learn how to make your website responsive by using media queries.

02:08

In this video you will learn how to apply CSS resets to make your code consistent across all browsers.


Each browser renders code differently, so some fonts may work on one browser and not on another.


This is frustrating, and as a solution, CSS resets were created.


Apply the styles of these resets to your website to make them consistent across most modern browsers.



In this video you learned how to make your website consistent in rendering across most modern browsers by using CSS resets.


In the next video you will learn how to make your website responsive for mobile devices and different viewport sizes using media queries.

05:47

In this video you will learn how to use media queries to make your websites responsive.


  • max-width is for the designated width and under
    • "This element can be this width or less"
  • min-width is for the designated width and more
    • "This element can be this width or more:
  • You can use percentages to make your website elements responsive
    • They adapt to the size of the screen viewing the webpage.



Add some of your own rules and media queries to the pen.







In the next video you will learn about CSS frameworks, when to use them and how.

01:38

In this lecture you will learn about CSS frameworks.


Frameworks are used to speed up development because they provide a lot of built in functionality so you don't have to start from scratch.


Take a look at some of your options and look at the CSS style sheets and JS files they provide.


Pretty handy!




In the next lecture you will get a CSS cheatsheet and key takeaways.

Article

CSS Cheatsheet for reference

Article

See below for CSS documentation and resources.

Section 4: Final Web Development Code Challenge - Add This Website To Your Resume
Web Dev Code Challenge Final: Create A Responsive Mobile Website From Scratch
03:08
12:49

Part 1

12:19

Part 2

12:17

Part 3

Section 5: Web Development Course Project: You Create a BBC.com Clone By Hand From Scratch
02:05

This course project will be split up into several parts so you can start and stop as you please without losing your place.

12:03

In this video you learn how to create a skeleton by using containers to create sections for the navigation, content body, etc.

15:47

In this video you learn how to recreate the top navigation bar of the UK BBC website.

Recreating The Top Navigation Bar Part 2
06:08
01:46

In this video you learn how to recreate the news header bar section.

05:05

In this video you learn how to recreate the category navigation bar.

06:55

In this video you learn how to recreate the location navigation bar.

01:34

In this video we fix the borders in the location navigation bar.

05:38

In this video you learn how to recreate the content section.

05:00

In this video you learn how to recreate the media sidebar on the right side of the UK BBC website.

08:27

In this video you learn how to host your course project to the web so employers can see it and you can link it to your resume.

Section 6: Web Development Course Conclusion - Congratulations!
01:23

GO PRACTICE

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Michael Bowen, Front End Web Developer & Local SEO Marketer

I attended UT Austin for Computer Science from 2013-2015.

Currently, I work as a designer, front end web developer, and local SEO marketer for local businesses, such as septic tank systems and maid services.

My skillset includes HTML, CSS, Javascript, Swift, Sketch, and Xcode.

Check out my GitHub profile - username is mbowen13

Ready to start learning?
Start Learning Now