Build an HTML5 and CSS3 Website in 35 Minutes

Learn the basics of building websites in a lunchbreak!
4.1 (23 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,904 students enrolled
25% off
Take This Course
  • Lectures 17
  • Length 42 mins
  • Skill Level Beginner Level
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


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.

About This Course

Published 3/2015 English Closed captions available

Course Description

At the end of this course, you will be able to build simple html5 and css3 web pages. You will also have enough knowledge of jQuery (a JavaScript library) to be able to add interactivity to your web pages. You will also understand how to read other people's jQuery files, which can really go a long way in building websites.

You will also learn something very valuable, and that is, how these 3 technologies (html, css, javascript) work together to make a web site.

You will also enjoy the course as it is tailored to beginners. It is very short, and there is no abstract, hard-to-understand jargon. We're putting everything into practice from the start. You, as the student, will be able to grasp the most important concepts off the bat.

This is a great opportunity to get your web development efforts on the right track, in virtually no time.

What are the requirements?

  • No previous knowledge required

What am I going to get from this course?

  • Work with html files
  • Add css to html files
  • Add basic jQuery to their pages
  • Understand how html, css, and jQuery work together to make a webpage
  • Build their own simple html web pages

Who is the target audience?

  • This course is built for beginners

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.


Section 1: Introduction

This is the welcome to the course lecture .


The software I'll be using in this course.

Section 2: Building the Layout

An overview of things that you will learn from completing Lecture 3

In Lecture 3 - Getting to know HTML, you'll learn that:

  1. Plain text files can be displayed in browsers
  2. We can change the extension of a plain text file, the .txt extension, into .html extension
  3. "HTML" stands for hypertext markup language"
  4. "Hypertext" means "text with links"
  5. "Markup" in web terms refers to annotating text with opening tags: <>, and closing tags: </>.
  6. There are a number of different tags, such as <p>, <br>, <nav>, <h1>, etc.
  7. Tags are used to describe the contents, or better yet, the structure of the text inside those tags
  8. How to markup our Site title with the <h1> tag (the "heading one" tag)
  9. How to markup our navigation
  10. Tags can be nested, and this is called encapsulation. It simply means that the child tags have to be closed before their parent tags.

An overview of things that you will learn from completing Lecture 4

In Lecture 4 - Adding links, you'll learn:

  1. How to turn a piece of text into a real link that points to a location on the web
  2. What is the href attribute

An overview of things that you will learn from completing Lecture 5

In Lecture 5 - What every HTML5 page must have, you'll learn:

  1. Every HTML5 document should have the <!DOCTYPE html> declaration
  2. HTML documents begin and end with <html> tags
  3. The whole document is split into 2 parts, the head and the body
  4. The head holds the meta information, such as the site title, the encoding, and other meta information
  5. The body holds the actual content of the webpage
  6. When making web pages, we have to think about the users of our webpage, both humans and webcrawlers etc.

An overview of things that you will learn from completing Lecture 6

In Lecture 6 - Adding CSS to our HTML, you'll learn:

  1. How to add styles to html by adding the <style> tag to the head of our document
  2. How to declare a style
  3. CSS has a bunch of keywords to manipulate the look of our website
  4. How to target our <body> tag and apply the CSS declaration: background: gray; to it
  5. Specifying hex values
  6. Why hex values have 6 digits, and how they can be abbreviated to only 3 digits
  7. When working with margins and paddings, we declare the Top, Right, Bottom, Left values, and we can remember it using the TRBL acronym ("TROUBLE")
  8. The descendant selector "ul li" selects all the li selectors inside the ul selector
  9. Line items are usually displayed as block level elements
  10. A block level element stretches the entire length of its parent element, and in this case it creates a block.
  11. A number of block level elements declared one after the other in our html, would stack up on top of each other in our webpage
  12. We can line up block level elements in a row, by assigning them with the display property of "inline".
  13. How to remove text decoration with text-decoration: none;
  14. Adding width to our html elements
  15. A basic example of using floats

An overview of things that you will learn from completing Lecture 7

In Lecture 7 - Moving our CSS to a separate file, you'll learn:

  1. One of the rules of web development is the separation of the structure and design
  2. How to move the css from the <style> tag in our html, to a separate css file.
  3. How to "tell" our html to look for an external stylesheet (by using the <link> tag)
  4. When to use the <div> tag
  5. What are css classes, how to declare them and use them
  6. What are css ids, how to declare them and use them
  7. In our css, we can specify ids with a hash sign (#), and we can specify classes with a dot (.)
  8. Floats break the normal document flow of html documents
  9. A clearfix is used to clear floats, that is, to return to normal document flow

An overview of things that you will learn from completing Lecture 8

In Lecture 8 - Adding buttons to our links, you'll learn:

  1. Using the border css declaration
  2. Using margin-right
  3. Using css comments to comment out lines
  4. Adding padding, margins, and borders to our <a> tags to turn our regular links into buttons

An overview of things that you will learn from completing Lecture 9

In Lecture 9 - Setting the width of our page and centering our website, you'll learn:

  1. Specifying the width of our site in pixels
  2. Centering an element (using magin: 0 auto)

An overview of things that you will learn from completing Lecture 10

In Lecture 10 - Improving our navigation with pseudo classes, you'll learn:

  1. Using a:link pseudo class
  2. Using a:hover pseudo class
  3. Using a:visited pseudo class
  4. Using a:last-child pseudo class

An overview of things that you will learn from completing Lecture 11

In Lecture 11 - Source ordering, you'll learn:

  1. Demonstration of how html structure and css display of this structure are separated and how moving around html tags in our html structure is not a good thing to do if we want to change the look of the website
  2. In other words, we should use css
  3. How to move our sidebar to the left, or to the rigth, by simply switching the float properties on the two elements we're targeting (in our case, we were targeting the <article> and the <aside> tags)

An overview of things that you will learn from completing Lecture 12

In Lecture 12 - Adding interactivity with jQuery - Overview, you'll learn:

  1. A demonstration of how we can simply toggle the display of content on our webpage using jQuery

An overview of things that you will learn from completing Lecture 13

In Lecture 13 - Downloading jQuery and including it in our page, you'll learn:

  1. jQuery is a library of JavaScript
  2. jQuery is a good way to start learning JavaScript
  3. How to dowload jQuery from the official website, and how to add it to our html files
  4. How to add your custom JS files (after adding the jQuery file)

An overview of things that you will learn from completing Lecture 14

In Lecture 14 - A crash course in jQuery syntax, you'll learn:

  1. $() is the same as jQuery()
  2. jQuery() is used to avoid conflicts with other JavaScript libraries
  3. What is a function
  4. What is an anonymous function and how to declare it
  5. Why we use () in functions, and how we add parameters
  6. The curly brackets {} are used to visually group blocks of code

An overview of things that you will learn from completing Lecture 15

In Lecture 15 - Hiding distractions on our web page with jQuery, you'll learn:

  1. jQuery allows us to listen for events and manipulate almost everything on our page based on those events
  2. We don't have to know how jQuery works in order to use it
  3. An explanation of $(document).ready();
  4. Adding an annonymous function to $(document).ready()
  5. How to listen for a click event that happens on a button, using jQuery
  6. How to specify the target(s) of our toggle effect using jQuery
Section 3: Wrapping Up

In Lecture 16, we're reflecting on what we've learned.

4 pages

This is the Appendix 1 file, with the detailed description of all the things we have learned in each Lecture of this course.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ajdin Imsirovic, Web Developer

Ajdin Imsirovic holds a major in English Language and Literature. He's been hacking html and css for the last 15 years, and the WAMP stack for the last 5, all the while working in a range of industries, most of which were unrelated to coding. He hopes to use his diverse set of skills to create and teach technology in a unique, user friendly manner. Currently living in Bosnia, he works as a web developer, exploring his interests in education and entrepreneurial business.

Life long learning is important to Ajdin, a dedication which grew through his employment history. In the future, Ajdin plans to develop his programming skills further, and to realize at least a dozen personal projects in development right now.

Ready to start learning?
Take This Course