HTML5 & CSS3 ♦ Build responsive website from scratch
4.2 (10 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.
155 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 & CSS3 ♦ Build responsive website from scratch to your Wishlist.

Add to Wishlist

HTML5 & CSS3 ♦ Build responsive website from scratch

Learn and summarize information about basic HTML and CSS responsive website.
4.2 (10 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.
155 students enrolled
Created by Luke Kliment
Last updated 11/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • At the end of this course, students will be able to write basic HTML and how to style web pages with CSS.
  • You will create website layout you can imagine.
  • You will use common techniques when creating basic responsive layout of webpage.
  • Apply HTML and CSS for web design projects,
  • For those beginners who are in the learning process this course will help them to accelerate this process of understanding
View Curriculum
  • At least little bit understanding of HTML, CSS syntax and how we write.
  • But also I will explain every part of code I will write so don't worry If you don't have that much skill for now.

If you’ve never built a website before and you have at least a little bit of coding or design experience, this is the place to start. In this project, we learn how to build a modern portfolio website for desktops, tablets, and mobile devices. We start with basic HTML and CSS syntax. Next, we learn how to build custom web pages with an image gallery and contact page.


We will learn step by step how to organize structure of our porfolio website. I will explain every part of the code so if you will follow along with me, you will no longer need to ask me anything. BUT If you will have some problems feel free to contact me and ask me anything about the course curriculum. I'll be glad to answer to you.

I'm also providing source code so you can jump in quickly when you get stuck to check the syntax or start you new project.

By the end of the course you will be able to expand your portfolio with different website designs. 

Learn the tools and resources used to create web code and so on.

Who is the target audience?
  • This course is for those who has at least little bit of information about HTML and CSS.
  • This course is definitely not for the people who don't have any skills about programming languages HTML, CSS and don't know anything about code or syntax.
  • I will explain every part of code I will write so you can be also on the "level 1" and go throught this course.
  • Anyone who wants to create websites faster on "professional" way
  • Anyone who wants to learn how to create a website from scratch
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
HTML 5 & CSS 3 ♦ How to make a website
28 Lectures 02:48:33

In this quick tutorial, we’ll check out an example of the HTML and CSS structure. Then, we’ll learn how to code our first HTML element, which will help form the structure of our website. Finally, we’ll finish up by styling our website with some simple CSS. These two languages, HTML and CSS, form the basic building blocks of any web project.

  • <link> - The link element connects other files to an HTML document, such as CSS or JavaScript files.

Preview 03:57

Fresh Refresh
6 questions

HTML is a special computer language that describes the structure of a document. With HTML, we can build web pages that contain text, images, and many other types of content. We’ll dig into the latest advancements in HTML by creating a simple page structure.

  • <!DOCTYPE html> - The document type element tells the browser what kind of content to expect in a web page.
  • <html> - The container or document root for the HTML document.
  • <head> - The head of the document is a container for meta information about the HTML document itself.
  • <body> - The body of the document contains the content and remaining structure of the document.
  • <title> - The title of the document typically appears in browser tabs and search engine results.
  • <meta charset="utf-8"> - The character set, typically set to UTF-8 to help describe how the page is formatted.

Preview 05:10

In order to add content to the page, we need to create containers for that content. In this video, we'll add the header, footer, and sections to our page.

  • <header> - The header element helps to structure the content. This is different from the head element, which is just for document metadata.
  • <section> - Sections break up logical groupings of information, just like sections of a newspaper.
  • <footer> - The footer element is a complement to the header element. It represents the bottom of a content area.
  • <h2> - The second level headline element, similar to first level headlines. Typically these appear slightly smaller by default.
  • <p> - The paragraph element should contain text in sentence or paragraph form.

Preview 05:31

HTML First
4 questions

Navigation allows site visitors to get around to the different pages of a website. We'll use the nav element and an unordered list to create our navigation.

  • <a> - The anchor element allows for two HTML pages to be linked together.
  • <nav> - The navigation element is a semantic element that wraps any type of site navigation.
  • <ul> - The unordered list element contains list item elements and is typically styled with bullet points by default.
  • <li> - The list item element makes it possible to format text in a list form. Each list item element should go inside of an ordered or unordered list element.

Creating a Navigation Elements

The image gallery can be constructed using an unordered list...
Download images:!ww1EAYyY!qCDk3kNfYHtuw4utNagd2A

  • <img> - The image element is a self closing element with two required attributes. The source (src) attribute points to the image file and the alternate (alt) attribute describes the image using text.
Structure of our Gallery

In this video, we'll finish building the image gallery and fill it with content.

Our Gallery

The footer of a website typically contains basic information about the site, such as associated links and a copyright. In this video, we'll learn how to use the footer element.

Our Footer

Including CSS into the HTML will link the two pages together. This will allow us to add visual presentation to our HTML. We will also show the file what is ussually uses to reset the predefined browser CSS indentation.

Diving to CSS and Normalizing

Little HTML and CSS review
5 questions

CSS is an initialism that stands for Cascading Style Sheets. Let's look at some simple examples of how styles can cascade and override other styles.

By the way... The best website where you can copy your HEXA color codes to your own website are here :-)

Little CSS Start

CSS Facts
5 questions

Stylesheets make it easy to update the styling for many pages at once. In this video, we'll learn how to use ID selectors in HTML and CSS.

  • ID Selector - CSS selector that selects a single element based on its ID attribute.

Styling, Wrapping and ID Selector

Many websites use a "wrapper div" to center the page in the middle of the site and contain the layout to a specific width. In this video, we'll learn how to use auto margins, max-width property and padding to center our page and contain it.

  • max-width - Sets the maximum width of an element. Accepts any CSS length unit.
  • margin - Sets the space around the exterior four sides of an element. Accepts any CSS length unit.
  • padding - Sets the space on the interior four sides of an element. Accepts any CSS length unit.

Centering the Wrapper

Modern websites are built with mobile devices in mind from the start. Instead of building a "desktop" version of our site and working our way down, it's much easier to create the mobile experience first and then layer in complexity for larger screen resolutions. In this video, we'll just add some additional CSS to our header and center it.

Centering the Header

What we've already learned - CSS
5 questions

Color in CSS can be written in several different ways. One of the most common methods for creating color is to use hexadecimal values. These values can be a bit complex at first, so let's spend some time going over them.

Color picker:

  • Hexadecimal - A base-16 number system that uses the letters "A" through "F" to represent the numerals 10 through 15.

Using Colors in our CSS

There are many different ways to select elements with CSS. One of the most common methods is to apply a class to an HTML element, which makes it easier to reuse CSS for multiple parts of the page.

  • Class Selector - Selects any HTML element that contains a matching class attribute.

Using Classes in CSS

The next step is to pick fonts and resize them, but we should organize our CSS before we continue. It will only become more complex, so we should add some comments and sort our declarations accordingly.

  • Comment - A reminder or visual cue in computer code that's meant to be readable by programmers. Comments are typically not interpreted by the browser and shouldn't impact a website's function in any way.

Organize Structure with Comments

Web pages are mostly text, so interesting typography can bring a page to life. Adding new fonts to pages is easy with 3rd party services.

  • font-family - Defines which fonts should be applied to text.
  • font-size - Sets the size of text in either relative or absolute units.

Pick Fonts and Set Relative Units

Not every part of a web page is equal. Using different font sizes, we can add importance to some areas like the logo and downplay other areas like the footer.

Styling and Resizing

Customizing Colors and Fonts
5 questions

In order to convert split portfolio into multiple columns, we'll need to carefully calculate the width and margins for each image. Once completed, the page will start taking shape across multiple screen resolutions.

  • list-style - Sets the style of numbers or bullet points for ordered and unordered lists. The marks can also be removed entirely with the value "none".
  • float - Allows an element to be taken out of the normal flow and placed to the left or right of its container. Text and other inline elements will wrap around it.

Styling the Portfolio

The gallery images are placed on the page correctly, but the captions need additional styling. In this video, we'll also fix an issue caused by the interaction between the gallery and the footer.

  • clear - The clear property specifies whether an element can be adjacent to floated elements or if it should be moved down and "clear" any floated elements.

Styling the Image Caption

Similar to the gallery, horizontal navigation can be created by rearranging an unordered list. In this video, we'll fix some issues with the header and then start styling the navigation.

  • display - Sets whether an element should be rendered as a block element, inline element, or inline-block element.

Style Navigation with Unordered Lists

Most of our site elements are now in place, but the navigation and footer could use some additional polish.

Polish the Navigation and Footer

Styling Web Pages and Navigation
5 questions

Most websites are composed of multiple web pages. In this video, we'll learn how to add a second page.

  • index.html - A special HTML filename that almost every web server recognizes as the "home page" of a website.

Adding an About Page

When adding new pages to a website, most of the CSS can be reused. However, it's often helpful to add a few customizations.

  • border-radius - Defines the roundness of a border corner. Accepts any CSS length unit.

Styling an About Page

The contact page is similar to the about page we added previously. Special contact links will allow site visitors to email us directly or call us on a mobile phone browser.

Adding a Contact Page

Icons are small images that can help communicate information visually. By adding icons to our contact page, we can give site visitors a better visual indicator for each contact link.

  • background-image - Accepts an image path that applies the file to the background of an element.
  • background-size - Sets the size of background images.
  • background-repeat - Sets whether or not a background image should be repeated. By default, backgrounds will repeat.

Styling Contact Page and Adding Iconography

Adding Pages to a Website
5 questions

  • Responsive Web Design - A technique for creating websites that work on multiple screen resolutions via the combination of fluid images, fluid grids, and media queries.
  • @media - Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.

    Responsive Web Design and Adding The Media Queries

    • :nth-child(An+B) - The nth-child pseudo-class matches A(n)+B-1 siblings in the document tree. The A value that precedes n is required. By itself, this will match every "nth" element in a group. Both A and B must be integers.

    In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.

    Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.

    Three Column Layout

    • border - CSS shorthand property that allows for a visual outline or "border" to be applied to an element. Accepts a length unit to define the border-width, a keyword to define the border-style, and a color unit for the border-color.
    Adjust the Profile Page and Header

    Responsive Web Design
    5 questions
    About the Instructor
    Luke Kliment
    4.2 Average rating
    10 Reviews
    160 Students
    2 Courses
    Web Developer & Coder

    Tech geek. Experienced, passionate web developer and graphic designer. I'm passionate in helping other people reach their goals so I decided to share my knowledge with you guys. I love to learn and also teach people about programming and so much more..

    I like to talk about things fully understandable, so even If you are totally different from others and you don't understand what others do, I'm here for you to open your mind and make your developing dreams become reality.

    From Slovakia I have over 4 years skills in IT and I decided to share my information and teach other people how to walk in IT world.                                                            

    Keep it coding and follow your ideas!
    Cya in the videos :-)