HTML and CSS BootCamp for Beginners
4.4 (37 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.
1,778 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML and CSS BootCamp for Beginners to your Wishlist.

Add to Wishlist

HTML and CSS BootCamp for Beginners

4.4 (37 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.
1,778 students enrolled
Created by Nauman Sajid
Last updated 1/2017
Curiosity Sale
Current price: $10 Original price: $30 Discount: 67% off
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 44 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Know what coding is and how it works
  • Be able to write code in HTML and CSS - thereby being able to produce static webpages
  • Have the foundation knowledge to move onto learning other languages
View Curriculum
  • This course is for complete Beginners
  • No prior knowledge is required

Start your journey in Web Development and Design the right way! This course will allow you to embark upon your journey of programming in a stress-free, fun and enjoyable way. 

Programming has become an increasingly sought after and necessary skill, not only for employers, but for anyone looking to standout from the crowd in this modern tech-heavy world. Starting off your journey can feel daunting and confusing. You may be overwhelmed with the vast range of languages you can learn or vast range of niches and speciality fields in the coding world. This course will make sure you get what you require and nothing less! You'll be learning the essential at a decent pace so that you'll be able to start coding in no time!

HTML and CSS are 2 core languages every new programmer should know. In this course you'll learn the ABC's of both as well as getting ample practice creating real life, functional websites. So what are you waiting for? Get the course today and become a super coder!

Who is the target audience?
  • Beginner level programmers
  • Students wanting to learn how to code but do not know where to start
  • Students interested in web development and programming
Students Who Viewed This Course Also Viewed
Curriculum For This Course
48 Lectures
Lets take it from the Top....
3 Lectures 14:11

I'l be showing you the various different code editors available, both free and paid, and how to download and install them.

Preview 06:03

We'll look at the basic structure of a real live website (Wikipedia) and explore the various tags/elements that go into making a website.

Preview 05:52
HTML Basics
7 Lectures 39:25

A quick powerpoint presentation on the basics of HTML - it's purpose, syntax and usage. 

What is HTML?

Coding our very first webpage in this lecture. 

HTML Structure

We'll look at the two key HTML tags - namely paragraphs and headings.

Headings and Paragraphs

Diving deeper into HTML, we'll look at the emphasis and strong tags. I'll describe their function and usage.

Emphasis and Strong Tags

I'll show you how to add links to your website. You can use links to connect your page to other pages within your website or to other pages outside your website.


Another important usage of HTML is to add lists, ordered and unordered lists. I'll be showing you how lists work in HTML and how to code them.


Tables can be used to for many different purposes. The grid format of tables allows you to enter data as well as enhancing the design of your website. I'll show you how to add tables in HTML.


Just a few questions to reinforce what we learnt in section 1!

HTML Basics Quiz
8 questions
6 Lectures 47:52

Images enhance the visual aesthetics to a website. In this lecture, we'll be looking at how to add images to your website.


Forms are a common feature on websites. It's important you learn how to add them and the different input values you can have. I'll show you how in this lecture.


IDs and Classes are probably the two most used HTML tags. We'll explore what they are and how to use them correctly.

IDs and Classes

Span and Div tags can add to the functionality of your website. I'll show you what they are, what they do and why they are so powerful.

Span and Div Tags

HTML Special Characters

In this lecture we'll be looking to use the skills we've learnt so far to create a basic HTML coded social network profile. You can create your own as you're following along. We'll add images, personal information (name , DOB etc.) and some skills and hobbies. Remember, practice makes perfect! So practice, practice, practice.

Social Network Profile Exercise

HTML Level II Quiz
4 questions
2 Lectures 26:29

HTML5 is a newer form of HTML and adds more meaning to the website. We'll look at the main HTML5 input tags and their functions

HTML5 Inputs

Diving deeper in HTML5 we'll look at some other HTML5 inputs

More HTML5 Inputs
CSS Basics
10 Lectures 01:12:10

Introduction to CSS and how you can use it to enhance the design of your website. 

What is CSS?

Before you jump into CSS you need to know the rules by which CSS works. In this lecture we'l cover how CSS chooses what styling to give to what element, based on which styling came first, priority etc.

Inheritance of Styles

More rules and technicalities about CSS that you should be aware of. Last PowerPoint I promise!

Box Model

Inline CSS is CSS done inside your HTML code. It is not best practise and you shouldn't do it. However, for the sake of knowledge it is good that you are aware of it as you might see it in other people code in the future.

Inline CSS

Internal CSS is CSS done within your HTML code but is separated and has a section to itself. I'll show you how to do this and its benefits and disadvantages.

Internal CSS

External CSS is best practice and how you should be coding your CSS. It involves having a separate external file in which you write all your CSS code. 

External CSS

Styling IDs and Classes lets you save a lot of time by allowing you to style large chunks of your HTML in one go. You can also use IDs to get really specific in your styling. Both are powerful tools that make your website look awesome.

IDs and Class Selectors

Descendant Selectors gives you more finer control with regards to styling your HTML content. I'll be showing you what I mean by this in the lecture.

Descendant Selectors

Grouping Selectors

Specificity allows you to get super picky as to what you want to style. With large HTML and CSS files you may want to get very "specific" with how you want to style one particular element or tag. Knowing the specificity rules (the point system) you can easily style what you want. The powerpoint will explain what specificity is and the point system. Don't worry! It's not as complicated as you think

CSS Level II
5 Lectures 48:33

Probably the most common thing you will style is text - since the majority of any website is text. Knowing the different techniques available to you can really help you create one super awesome website.

Text Styling

Borders allow you to give a neat outline to elements on your page. Any element can be given a border, it doesn't have to be a table. In this lecture we'll be looking at some of the cool things you can do with borders.


Everybody likes to add a bit of colour to their life. It is the same with websites! A suitable and attractive colour scheme can differentiate a good website from a great website. Learn the different ways you can add colour to your website in the lecture. 


Images add more vibrancy to a website. Learn everything you need to know about images in this lecture!

Background Images

Styling links can add the finer touches to a website. A standard website will have quite a few links on it, for navigation purposes. They do not have to be external links, even link that link the different pages in a website together can add up. Therefore, styling them can make a whole world of difference to how your website ends up looking.

Links Styling
4 Lectures 32:05

All elements can fall into 3 categories: Block, Inline and Inline Block. Each category behaves a different way on a webpage. Knowing how to manipulate them can let you have more control over the design and layout. The lecture will cover what each category is and how it behaves.

Block, Inline and Inline-Block

Magazine and Newspaper layouts are a common deign feature - especially on blogging websites. Floats lets you achieve that look. Learning floats can be a bit challenging. But don't worry, we'll take 2 lectures to make sure we cover them in the right level detail. 

Float and Clear

Floats and Clear Continued..

Positioning lets you, well "position" stuff! The name is pretty self explanatory. Designing is all about positioning content in a particular way. Therefore, learning about CSS positioning is very important. 

CSS Positioning
5 Lectures 35:34

CSS3 lets you do further styling. In this lecture we'll be looking at how you can manipulate shapes, particularly boxes, to achieve the design you are looking for.

Box Sizing in CSS3

CSS3 Colors allows you to add further styling to your website. There are some cool tricks that you can do which are really helpful in adding a bit more vibrancy to a webpage. 

Colors CSS3

Following on from CSS3 colors, gradients give you an even finer control.

Gradients CSS3

Shadows CSS3

Columns CSS3
Your very own personal website
6 Lectures 01:02:38

In this final section, we'll be looking at using all the skills we've learnt to create a personal/ blogging website. I'll show you what the final layout should look like and what we'll be working towards.

Final Project - Intro

We start our final project by coding the basic HTML structure. We'll work on the homepage to begin with, adding the logo, navigation bar, images and the footer.

Coding the HTML

Now that we have our homepage coded, it is time to style it. Feel free to style it any way you desire - if you do style it differently, please make sure you share it on the student forum. I'll be showing you how to style it so you can get the look we saw in the introduction video of this course. 

Styling it in CSS

In this lecture we'll finalise the styling and by the end you should have a really cool looking webpage designed and ready to go. 

Adding the finishing touches

We'll start coding the contact form. I have opened the coding and designing of the about me and skills webpage as a challenge. Do share your designs in the forum.

Contact Form

The last lecture of the course. We'll finish the contact form page and some final words at the end.

Contact Form Continued..
About the Instructor
Nauman Sajid
4.3 Average rating
65 Reviews
2,424 Students
3 Courses
Web Developer

Hi There,

I'm a former Udemy student who has come back to share and give back to the community which has taught me so much. I will be focused on coding and web development and hope that I can provide useful insights so that others can benefit. Being a student myself not so long ago, I know how frustrating it can be when you cannot relate to the level at which an instructor is teaching - Or simply do not see the relevance of a particular topic. Therefore, I design my courses specifically with the target audience in mind and stick to the key points - so you don't get bored or feel like you're learning something irrelevant. My courses will be short, relevant and to the point! So you can rest assured that you wont be wasting time learning stuff that is of no use. You'll learn what's important without wasting any time and by the end have a mastery over the topic.