Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreLearn HTML & CSS: How To Start Your Web Development Career
Rating: 4.5 out of 54.5(3,652 ratings)
81,692 students
Learn HTML & CSS: How To Start Your Web Development Career
Learn HTML & CSS To Jump Start Your Career In Web Development
Created byMichael Bowen
Last updated 12/2015
English
What you'll learn
- 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
Explore related topics
Course content
6 sections • 60 lectures • 4h 32m total length
- How To Sign Up For Codepen For Free - The Only Tool Needed In This Course1: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.
- Learn What HTML (Hyper Text Markup Language) Really Is & How To Create Websites3: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
- It is the content of your web page.
- Learn The Correct Structure Of A HTML Webpage - MOST PROGRAMMERS GET THIS WRONG!4: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
- HTML is made up of nested tags.
- Create Your First Website From Scratch - A Blog Post About Your Favorite Cakes3: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.
- Learn The Secret On How To Instantly Increase Your Website Usability With Lists3: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!
- Lists are important factor in usability because it helps users find what they are looking for quickly.
- Web Development Code Challenge #1: You Create A Website About Your Favorite Cars1: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! :-) )
- Create a new webpage that has the title: "Cars I will own some day".
- Give your webpage an h1 heading "My Dream Cars"
- Create an unordered list of add-ons you want for your cars.
- Create an ordered list of your dream cars.
- 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.
- Web Development Code Challenge #1 Solution & WalkThrough3: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
- Create a new webpage that has the title: "Cars I will own some day".
- Give your webpage an h1 heading "My Dream Cars"
- Create an unordered list of addons you want for your cars.
- Create an ordered list of your dream cars.
- 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.
- How To Make Your Website Text Enticing To Your Visitors By Using Inline Tags2: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.
- How To Use Void Tags - They Aren't Like Regular HTML Tags!3: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.
- Learn To Use HTML Attributes In Your HTML Tags To Increase Website Functionality2: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.
- Some of our tags need additional meta data.
- How To Use Proper HTML Classes To Organize & Prepare Your HTML Code For CSS5: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!
- 1.) Your code will make sense to someone who is reading it for the first time.
- Example of organization using a HTML class:
- blog post
- group headings
- group content
- blog post
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.
- Three primary reasons for using classes:
- How To Use Proper HTML IDs To Organize & Prepare Your HTML Code For CSS2: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
- IDs are unique and only used once.
- 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!
- Learn HTML Quiz - Make Sure You Have A Strong HTML Foundation Before Moving On
- How To Use Images To Create Better Content For Your Websites6: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
- for search engines to pick up on and get ranked in Google imags
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.
- Instantly Increase Your Website Usability and SEO Rankings With Links4: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!
- Use google.com for example link
- Web Development Code Challenge #2: You Create A Website For Your Selfies2:15
Taking pictures and selfies with good is an Instagram sensation particularly beloved by teenage girls. Today you're taking part in that.
- Make an ordered list of your 4 favorite kinds of food
- Make the first list item strong
- Give the second one emphasis
- Give the third red text using span (use the docs or google search!)
- For the 4th item use an image instead of text.
- Just use google images to find a picture of it or take a picture of your meal using the camera on your phone
- Give each element in the list an id of its own name
- 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
- Web Development Code Challenge #2 Solution & WalkThrough4:52
Use instagram link for my selfie for extra credit!
- Make an ordered list of your 4 favorite kinds of food
- Make the first list item strong
- Give the second one emphasis
- Give the third red text using span (use the docs or google search!)
- For the 4th item use an image instead of text.
- Just use google images to find a picture of it or take a picture of your meal using the camera on your phone
- Give each element in the list an id of its own name
- 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.
- How To Use HTML Forms To Grab Input From Your Users & Create Mailing Lists4: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.
- Learn To Use HTML Tables To Display Information & Data To Your Website Visitors4: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
- 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.
- Create the table for two friends
- How To Use HTML5 Semantic Tags To Organize Your HTML Code7: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.
- Web Development Code Challenge #3: You Create A Mailing List Opt-In1:11
For your third coding challenge you will
- Create an input form with a button that asks the user for their email
- 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.
- Web Development Code Challenge #3 Solution & WalkThrough12:00
In this video, I will walk you through the solution for Code Challenge #3.
- Create an input form with a button that asks the user for their email
- Make a 3x3 table explaining the benefits of having you on their web development team
- 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
- HTML Key Takeaways & Cheatsheet - Print This & Post It On Your Wall0:18
In this lecture I will recap all the HTML you have learned.
- Structure of webpage
- nested tags
- semantic tags
- classes
- ids
- text
- paragraphs
- headings
- inline tags
- lists
- ordered
- unordered
- void tags
- img
- attributes
- input for forms
- tables
- 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.
- Structure of webpage
- HTML Final: Make Sure You Understand Proper Naming For HTML Classes & IDs0:25
For your HTML final you will look at my HTML code and add classes and IDs where needed.
- Use proper naming
- specific
- hyphen
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!
- Use proper naming
- HTML Documentation Resources For Further Examples And Clarification0:02
See below for HTML Documentation & Resources
- Learn What CSS (Cascading Style Sheets) Really Is & How To Apply It To Your HTML2: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.
- How To Properly Use CSS Classes & IDs To Style Your HTML Code - GET THIS RIGHT7: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.
- Learn To Implement The Mysterious CSS Div - The Foundation Of CSS Webpage Styles4: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.
- Div is a container, also "divider"
- Learn CSS Hierarchy & How To Grasp The Power Of CSS Specificity In Your Styles3: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
- Example:
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.
- The more specific rule over-rules the more general rule
- Learn How To Make Your Website Content Even More Enticing With CSS Text Styles4: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.
- Web Development Code Challenge #4: Align Me Correctly0:51
In this code challenge you will:
- Create two paragraphs
- Align one to the left and the other to the right
- Give the p on the left a background color of green
- Give the p on the right a font color of blue
- 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.
- Web Development Code Challenge #4 Solution & WalkThrough4:30
Let's walkthrough the solution for Code Challenge #4:
- Create two paragraphs
- align one to the left and the other to the right
- Give the p on the left a background color of green
- Give the p on the right a font color of blue
- Change the font family of both p to Tahoma
- use the classes. Do NOT select them using p because that is bad practice
- 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.
- use the classes. Do NOT select them using p because that is bad practice
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.
- How To Use Different CSS Measurements To Scale Fonts, Images, & Other Elements4: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.
- We will cover the most used measurements only:
- Learn All About CSS Boxes - Margin, Padding, Border, Height, & Width4: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.
- content-box is the default model that places border and padding outside the box rather than inside.
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.
- How To Make Your Webpage Flow Smoothly To The Eye Using CSS Document Flow5: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!
- Elements that are stacked can be put on the same line by floating them.
- Web Development Code Challenge #5: Boxes In Boxes0:51
In this challenge you will practice your skills with CSS boxes.
- Web Development Code Challenge #5 Solution & Walkthrough5:58
- Create a box with a width of 300px and a height of 600px.
- Give that box a border of 5px and solid black
- Give it a padding of 20px
- Horizontally center the box
- Create another box within the first box with a height of 50% and a width of 90%.
- Give it a border of 1px solid black
- Align the box to the center of its parent container (the first box)
- Give the box some text and align it to the center.
- Give the text some padding so it's not squished at the top
- Create two more boxes and place them within the first box
- Give them a height and width of 50%
- Give them a border of 1px solid black
- Center them horizontally within their parent container
- 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.
- How To Position Any Element AnyWhere On The Page Using CSS Positioning6: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!
- CSS Boxes Quiz - Make Sure You Understand Margin, Positioning & Measurements
- Web Development Code Challenge #6: Float Like A Butterfly, Position Like A King0:25
See the links below for the image and template you need for this challenge.
- Web Development Code Challenge #6 Solution & WalkThrough5: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.
- How To Make Your Website Viewable Across All Modern Browsers Using CSS Resets2: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.
- How To Make Your Website Responsive For Mobile Devices Using Media Queries5: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.
- max-width is for the designated width and under
- Learn How To Use CSS Frameworks To Quickly Development & Scale Your Websites1: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.
- CSS Key Takeaways & Cheatsheet - Print This & Post It On Your Wall0:24
CSS Cheatsheet for reference
- CSS Documentation Resources For Further Examples And Clarification0:03
See below for CSS documentation and resources.
- Web Dev Code Challenge Final: Create A Responsive Mobile Website From Scratch3:08
- Web Dev Code Challenge Final Solution & Walkthrough Part 112:49
Part 1
- Web Dev Code Challenge Final Solution & Walkthrough Part 212:19
Part 2
- Web Dev Code Challenge Final Solution & Walkthrough Part 312:17
Part 3
- Intro To the Course Project: Clone The UK BBC Website By Hand2:05
This course project will be split up into several parts so you can start and stop as you please without losing your place.
- How To Create The Skeleton For the Website From Scratch12:03
In this video you learn how to create a skeleton by using containers to create sections for the navigation, content body, etc.
- How To Recreate The Top Navigation Bar15:47
In this video you learn how to recreate the top navigation bar of the UK BBC website.
- Recreating The Top Navigation Bar Part 26:08
- How To Recreate The News Header Bar Section1:46
In this video you learn how to recreate the news header bar section.
- How To Recreate The Category Navigation Bar5:05
In this video you learn how to recreate the category navigation bar.
- How To Recreate The Location Navigation Bar6:55
In this video you learn how to recreate the location navigation bar.
- How To Recreate The Location Navigation Bar Part 21:34
In this video we fix the borders in the location navigation bar.
- How To Recreate The Content Section5:38
In this video you learn how to recreate the content section.
- How To Recreate The Media Sidebar5:00
In this video you learn how to recreate the media sidebar on the right side of the UK BBC website.
- How To Host Your BBC Clone Project To Github For Employers To See for FREE!8: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.
- Where To Go From Here1:23
GO PRACTICE
Requirements
- Internet Access
- Google Chrome Browser
Description
UPDATE: This course is completely updated and current as of February 2017.
---------------------------------------------------------------------------------------------------------------------------
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!
Who this course is for:
- Entrepreneurs
- Beginner Programmers
- People Seeking A New Career In Web Development
- Web Designers Who Want To Implement Their Designs