Learn HTML & CSS: How To Start Your Web Development Career
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.
Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
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.
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? :)
Onward to success and freedom!
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Your Coding Environment: Already Set Up For You - No Work Needed!|
in this video you will set up the coding environment that you'll be working with in this course
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|
In this video you will learn what HTML is and how it differs from other programming languages.
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
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> - Encompasses your entire webpage document.
<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
In this video you will create your first website that is a blog post about your favorite cakes.
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.
In this video you will add an ordered list and unordered list to your cake blog post.
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.
Here is your first coding challenge.
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.
Let's walkthrough the solution for your first code challenge:
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.
In this video you will learn how to use inline tags to bring your paragraphs to life.
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.
In this video you will learn the difference between void tags and the other HTML tags you've seen so far.
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.
In this video you will learn how to incorporate HTML attributes to increase the functionality of the HTML tags you have used so far.
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.
In this video you will learn how to group your HTML code using classes.
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.
In this video you will continue to learn how to group your HTML tags using HTML IDs.
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.
|Quiz 1||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.
In this video you will continue to learn how to place images on your webpage
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.
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.
In the next video you will dive into your second coding challenge!
Taking pictures and selfies with good is an Instagram sensation particularly beloved by teenage girls. Today you're taking part in that.
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
Use instagram link for my selfie for extra credit!
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.
In this video you will create a form to capture a user's name and e-mail.
HTML forms can be used for:
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.
In this video you will create a table that contains the name, age and email of two of your friends.
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.
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>
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.
For your third coding challenge you will
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.
In this video, I will walk you through the solution for Code Challenge #3.
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
In this lecture I will recap all the HTML you have learned.
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.
For your HTML final you will look at my HTML code and add classes and IDs where needed.
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.
See below for HTML Documentation & Resources
|Section 3: Web Development Pillar #2: CSS - How To Make Your Websites Look Professional|
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.
What if you want one paragraph to be blue and the other green?
You will learn how to do this in the next video.
In this video you will use CSS classes to make one paragraph's color green and make another paragraph's color blue.
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.
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.
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.
In this video you will learn how hierarchy in CSS determines which elements are styled by certain CSS rules.
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.
In this video you will use CSS text properties to align three different paragraphs and given them a bold styling.
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.
In this code challenge you will:
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.
Let's walkthrough the solution for Code Challenge #4:
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.
In this lecture you will learn the different measurements used to style elements in CSS.
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.
In this video you will learn how to create an manipulate boxes in CSS.
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.
In this video you will learn how to float elements on your webpage to improve document flow on your website.
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.
In this challenge you will practice your skills with CSS boxes.
Good job completing this challenge!
In the next video you will learn more about positioning elements in CSS.
In this video you will learn how to position different elements where ever you want on your website.
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.
|Quiz 2||5 questions|
This quiz is to test you over what you know about CSS boxes.
See the links below for the image and template you need for this challenge.
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.
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.
In this video you will learn how to use media queries to make your websites responsive.
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.
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.
In the next lecture you will get a CSS cheatsheet and key takeaways.
CSS Cheatsheet for reference
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
|Section 5: Web Development Course Project: You Create a BBC.com Clone By Hand From Scratch|
This course project will be split up into several parts so you can start and stop as you please without losing your place.
In this video you learn how to create a skeleton by using containers to create sections for the navigation, content body, etc.
In this video you learn how to recreate the top navigation bar of the UK BBC website.
Recreating The Top Navigation Bar Part 2
In this video you learn how to recreate the news header bar section.
In this video you learn how to recreate the category navigation bar.
In this video you learn how to recreate the location navigation bar.
In this video we fix the borders in the location navigation bar.
In this video you learn how to recreate the content section.
In this video you learn how to recreate the media sidebar on the right side of the UK BBC website.
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!|
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.
Check out my GitHub profile - username is mbowen13