HTML5 & CSS3 ♦ Build responsive website from scratch

0 Reviews

Teachers: Lukas Kliment

About: 3 hours, 9 quizzes, 37 lessons, Certificate of Completion

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.
SO
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 m … Read More

30 day moneyback guarantee

More Details

Course Description

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.
SO
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.

Curriculum

Module 1: HTML 5, CSS 3 ♦ How to make a website

Lesson 1: Introduction to HTML and CSS
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.
Lesson 2: Fresh Refresh
6 questions
Lesson 3: Coding our First HTML
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.
Lesson 4: Create the Content Containers
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.
Lesson 5: HTML First
4 questions
Lesson 6: Creating a Navigation Elements
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.
Lesson 7: Structure of our Gallery
The image gallery can be constructed using an unordered list...
Lesson 8: Our Gallery
In this video, we'll finish building the image gallery and fill it with content.
Lesson 9: Our footer
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.
Lesson 10: Diving to CSS and Normalizing
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.
Lesson 11: Little HTML and CSS review
5 questions
Lesson 12: Little CSS Start
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 :-)

http://www.w3schools.com/colors/colors_picker.asp

http://www.0to255.com/
Lesson 13: CSS Facts
5 questions
Lesson 14: Styling, Wrapping and ID Selector
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.
Lesson 15: Centering the Wrapper
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.
Lesson 16: Centering the Header
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.
Lesson 17: What we've already learned - CSS
5 questions
Lesson 18: Using Colors in our CSS
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 pickers: http://www.w3schools.com/colors/colors_picker.asp
http://www.0to255.com/
Lesson 19: Using Classes in 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.
Lesson 20: Organize Structure with Comments
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.
Lesson 21: Pick Fonts and Set Relative Units
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.
Lesson 22: Styling and Resizing
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.
Lesson 23: Customizing Colors and Fonts
5 questions
Lesson 24: Styling the Portfolio
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.
Lesson 25: Styling the Image Caption
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.
Lesson 26: Style Navigation with Unordered Lists
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.
Lesson 27: Polish the Navigation and Footer
Most of our site elements are now in place, but the navigation and footer could use some additional polish.
Lesson 28: Styling Web Pages and Navigation
5 questions
Lesson 29: Adding an About Page
Most websites are composed of multiple web pages. In this video, we'll learn how to add a second page.
Lesson 30: Styling 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.
Lesson 31: Adding a Contact 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.
Lesson 32: Styling Contact Page and Adding Iconography
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.
Lesson 33: Adding Pages to a Website
5 questions
Lesson 34: Responsive Web Design and Adding The Media Queries
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.
Lesson 35: Three Column Layout
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.
Lesson 36: Adjust the Profile Page and Header
Lesson 37: Responsive Web Design
5 questions

Reviews

There are no reviews

What You'll Learn

  1. At the end of this course, students will be able to write basic HTML and how to style web pages with CSS
  2. You will create website layout you can imagine
  3. You will use common techniques when creating basic responsive layout of webpage
  4. Apply HTML and CSS for web design projects
  5. For those beginners who are in the learning process this course will help them to accelerate this process of understanding

Requirements

  1. At least little bit understanding of HTML, CSS syntax and how we write
  2. 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

Your Teacher