Build Real-World Websites Using HTML5, CSS3, Flexbox, Grid, and Sass

1. Introduction

This video introduces you to the instructor and the course structure.

2. Structure of a Website

This video will explain the structure of a webpage; it will introduce the different components that build up the skeleton of a website.

3. Your First Website

In this video, you will build your very first website.

4. Get Your Free Unlimited Web Hosting

In this lecture, you will get your free web hosting so that you can upload your website on a remote server and share it with the whole world.

5. Share Your Website with the World

In this video, you will learn how to upload your website on the sever and share it with the world.

6. Share Your Website with the World - Cyberduck Version

In this lecture, you will set up fire FTP on our computer, which will make it easy for you to transfer files from and to the server with a simple drag and drop.

7. Share Your Website with the World - FileZilla Version

In this video, you will install and set up FileZilla on the computer and connect it to the server.

8. Headings

In this lecture, you will learn the syntax of HTML headings and add different headings to your website.

9. Paragraphs

In this lecture, you will learn the syntax of HTML paragraphs, create your first paragraph, and then create your second paragraph and add a line break inside it.

10. Links

In this lecture, you will add links to your website. This session will cover different types of links-links taking you to an external website, links taking you to a file in the same server you are working in, and links taking you to a certain HTML element in your website itself.

11. Images

In this video, you will add images to your website. This section will cover images located on your server as well as external images living on other servers. You will also add basic styling to pictures using basic attributes such as width and height.

12. Inline Versus Block Elements

In this lecture, you will understand the difference in behavior between the main two types of HTML elements-inline elements and block elements.

13. iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website

In this lecture, you will embed external websites inside your website using Iframes and add a nice relaxing YouTube video to your website.

14. Unordered Lists

In this lecture, you will create your first unordered list and add a nice sub-list inside your unordered list.

15. Ordered Lists

In this lecture, you will create a few types of ordered lists.

16. Description Lists

In this lecture, you will create a description/definition list defining the two main web technologies in this course: HTML and CSS.

17. Tables

In this lecture, you will create a simple HTML table consisting of three columns: Name, Company, and Data of Birth; then you will populate it using details of famous people like Mark Zuckerberg or Steve Jobs.

18. Entities

In this lecture, you will create HTML entities such as the copyright symbol or the less than sign.

19. Forms Part 1 - Activity: Create a Simple Login Form

In this lecture, you will create a simple login form using HTML text inputs and password inputs. You will add labels inside your form and a Login button to submit your form. I will briefly mention the different types of forms (get and post) that we will cover later in the PHP chapter.

20. Forms Part 2 - Activity: Create a Marketplace Checkout Form

In this lecture, you will create a nice Marketplace Checkout form, which will consist of fields such as customer address, their preferred shipping method, payment method, and so on. You will use new input types such as checkboxes and radio buttons.

21. Text Decoration

In this lecture, you will style text using basic HTML tags.

22. Comments

In this lecture, you will add comments to HTML code to make your code more readable.

1. Introduction

In this lecture, you will get introduced to CSS (Cascading Style Sheets), which you will use later to style and decorate your websites.

2. Inline CSS

In this lecture, you will learn how to style HTML elements using inline styling, which uses the style attribute that goes inside the element tag. In the first example, you will set the font-size and color of a paragraph.

3. Internal CSS

In this lecture, you will learn how to style HTML elements using internal CSS, which goes inside the head section of the website. You will learn how to select elements you would like to style and add styling to them.

4. External CSS

In this lecture, you will learn how to use external CSS to styling HTML elements. You will style your website this time using an external file that you will link to your website using the link element inside the head of your website.

5. Classes and IDs

In this lecture, you will get introduced to the class and ID concepts, which you will use to style different HTML elements with minimal code.

6. Div and Span

In this lecture, you will get introduced to the Div and Span concepts and use them to add styling to your website.

7. Box Model

In this lecture, you will be introduced to the box model, which you will use in the next few lectures to add padding, borders, and margins to HTML elements.

8. Box Model Padding

In this lecture, you will learn the padding concept and its syntax. You will add padding to div elements in your page.

9. Box Model: Border

In this lecture, you will learn the border concept and its syntax. You will add borders to div elements in your page.

10. Box Model: Outline

In this lecture, you will learn the outline concept and its syntax. You will add outlines to div elements in your page.

11. Box Model: Margin

In this lecture, you will learn the margin concept and its syntax. You will add margins to div elements in your page.

12. Background

In this lecture, you will get introduced to the background CSS properties and use them to style HTML elements using background images.

13. Floating

In this lecture, you will use the CSS float property to control how HTML elements float on a webpage.

14. Positioning

In this lecture, you will learn different types of CSS positioning: fixed, relative, and absolute positioning. You will use them to position HTML elements on your webpage. You will also use the z-index property to decide which element will show on top of the other if two HTML elements overlap.

15. Display

In this lecture, you will learn how to use the CSS properties: display and visibility to hide or show HTML elements. You will also learn the difference between these two properties.

16. Text Decoration

In this lecture, you will use how to use CSS properties (text-decoration, font-weight, and so on) to decorate text, that is, underline text, make text bold, add text shadow, and more.

17. Text Align

In this lecture, you will learn how to use CSS properties to align text just like you would do on a text editor like Microsoft Word.

18. Text Font

In this lecture, you will learn how to set text font family. You will also learn the difference between generic and specific families.

19. Text Effects

In this lecture, you will use CSS properties to control the behavior of text overflowing of an HTML element by breaking it, wrapping it, or hiding it.

20. Image Sprites

In this lecture, you will use image sprites to use only a part of an image in your webpage rather than the full picture.

21. Image Opacity

In this lecture, you will learn how to add opacity to HTML pictures and control how transparent they are.

22. Styling Lists

In this lecture, you will style two lists of European capitals using the CSS list properties.

23. Styling Links

In this lecture, you will style HTML links in different states: standard, active, visited.

24. Gradients

In this lecture, you will style a div using gradients.

25. 2D Transforms

In this lecture, you will apply 2D transformations to an HTML div: rotation, translation, skewing.

26. 3D Transforms

In this lecture, you will apply 3D transformations to an HTML div: 3D rotation.

27. Transitions

In this lecture, you will add nice transitions to HTML elements; you will make them change their dimensions and apply 2D or 3D transforms for a specific duration.

28. Animations

In this lecture, you will create nice animations on your webpage using the CSS animation property. We will animate a div by moving it, following a nice rectangular route and changing its color on the way.

1. Introduction

In this lecture, you will be introduced to the awesome features of the website you are about to build.

2. Header - Part 1

In this lecture, you will build the header section of your website using HTML and style using CSS.

3. Header - Part 2

In this video you will continue to build the header section of your website.

4. Menu

In this lecture, you will create the website menu and decorate it.

5. Introduction Box

In this lecture, you will create the introduction box and style it.

6. Sidebars - Part 1

In this lecture, you will add sidebars and fill them with lists and use CSS to style them.

7. Sidebars - Part 2

This video is a continuation of the previous video where you will be adding sidebars and using CSS to style them.

8. Footer and Congratulations

In this lecture, you will add a footer to your website and finish the project by checking your website's XHTML compliance online.

1. Flexbox: Introduction

This video introduces you to CSS with Flexbox, Grid, and Sass.

2. Flexbox: Basic Flexbox

In this video, you will create a basic Flexbox.

3. Flexbox: Align Flex Items

In this video, you will learn to align items inside your Flexbox.

4. Flexbox: Align Flex Lines

In this video, you will learn to align rows or columns inside Flexbox.

5. Flexbox: Resize Flex Items - Part 1

In this video, you will learn to resize your Flex items inside the Flexbox.

6. Flexbox: Resize Flex Items - Part 2

In this video, you will continue to resize your Flex items using a short code to make your coding easier.

7. Flexbox Application: Photo Gallery - Part 1

In this video, you will learn to create a fully responsive photo gallery.

8. Flexbox Application: Photo Gallery - Part 2

In this video, you will push the pictures back into your Flex items and sort out their sizing.

9. Flexbox Application: Amazon Checkout - Part 1

In this video, you will convert a simple form to a flexible form.

10. Flexbox Application: Amazon Checkout - Part 2

In this video, you will start filling in the elements you have created so far using Flexbox.

11. Flexbox Application: Amazon Checkout - Part 3

In this video, you will add content to the comments section.

12. Flexbox Application: Math Website - Part 1

In this video, you will convert the website you built earlier into a fully responsive website.

13. Flexbox Application: Math Website - Part 2

In this video, you will make the menu responsive using Flexbox.

14. Flexbox Application: Math Website - Part 3

In this video, you will make the sidebars responsive using Flexbox.

15. CSS Grid: Introduction and Basic Grid Template

This video explains the basic grid template.

16. CSS Grid: Implicit Versus Explicit Grid

This video explains implicit versus explicit grid.

17. CSS Grid: Grid Areas and Responsive Design

This video explains the grid areas in the CSS grid.

18. CSS Grid: Master the "grid-column" Property

This video explains the grid column property.

19. CSS Grid: Grid Coordinates

This video explains grid coordinates in CSS grid.

20. CSS Grid: Align Grid Items

This video explains how to align grid items in CSS.

21. CSS Grid Application: Photo Gallery

This video explains the photo gallery in the CSS grid application.

22. CSS Grid Application: Picture Grid

This video explains the picture grid.

23. Sass: Introduction - Installation - Nesting Syntax

This video explains Sass and the nesting syntax.

24. Sass: .scss Versus .sass - Variables

This video explains variables in Sass.

25. Sass: @import and @extend Directives

This video explains features such as @import and @extend available in Sass.

26. Sass: Mixins - Operators - Functions

This video explains operators and functions in Sass.