Build A YouTube Clone Using HTML, CSS and JS 100% Responsive

Name: Build A YouTube Clone Using HTML, CSS and JS 100% Responsive
Rating: 4.2 (18 reviews)

Best Practice: Master your Front-End Web Developer Skills By Building A YouTube Clone Using HTML, CSS, and JavaScript.

Created byA Coder In A Hoodie

Last updated 1/2022

English

What you'll learn

How to clone a real-world website such as YouTube.
How to make use of your HTML and CSS knowledge in creating a real project.
Create a 100% responsive website with multiple pages.
How to manage the layout of your web page based on CSS Grid and Flex Box.
Practice basic HTML concepts such as headings, paragraphs, lists, links, images, videos, forms and more….
Practice basic concepts of CSS such as selectors, colors, text formatting, backgrounds, flex-basis, hover, positions, pseudo-elements and classes, shadows
Practice basic concepts of JavaScript: variables, data types, objects, functions.
How to learn by doing.

Course content

3 sections • 12 lectures • 1h 54m total length

Introduction3:36
Setup6:29

Required Materials0:07
The Header22:22
The Side Bar16:49
Let's cover new elements that we are going to use in this lecture;
First: CSS elements for scrollbar:
::-webkit-scrollbar: the scrollbar.
::-webkit-scrollbar-thumb: the draggable scrolling handle.
::-webkit-scrollbar-track: the track (progress bar) of the scrollbar.
Second: the used Javascript:
document.write: Write into the HTML output stream
querySelector: it is a method that returns the first element that matches a specified CSS selector(s) in the document.
onclick: it is an event occurs when the user clicks on an element.
classlist: This property is useful to add, remove and toggle CSS classes on an element.
The Page Content14:09
Let's cover new elements that we are going to use in this lecture;
CSS Grid: It offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
The grid-row-gap property sets the gap between the rows
The grid-column-gap property sets the gap between the columns
The grid-template-columns sets the size of the columns, and how many columns in a grid layout
Make Page Responsive8:38
Let's cover new elements that we are going to use in this lecture;
@media: is used in media queries to apply different styles for different media devices(different screen sizes)

Requirements

Basic understanding of HTML and CSS is is preferred.

Description

Learn By Doing | Front-End Web Development | Build A YouTube Clone Using HTML, CSS and JavaScript 100% Responsive.

If you want to make use of your HTML and CSS knowledge in a world real project,
If you want to build a real video upload site just like YouTube,
If you want to learn how the most popular websites are created, then this is the right course for you. This course will guide you step by step in creating your own YouTube clone completely from scratch.

One of the best ways to improve your front-end web development skills is to clone existing websites.

Whether you are a complete beginner or an experienced programmer, this course will be massively beneficial to you.

Throughout this course, we are going to build a website that is 100% inspired by YouTube. We are going to build 2 pages. The first page is YouTube home page and the second one will be the video page.

We are going to make the website 100% responsive so that it works perfectly on any kind of devices such as laptops, tablets and mobile phones.

In this project, we are going to make use of:

1. HTML concepts such as headings, paragraphs, lists, links, images, videos, forms and more….

2. Basic concepts of CSS such as selectors, colors, text formatting, backgrounds, flex-basis, hover, positions, pseudo-elements and classes, shadows, borders and more...

3. CSS Flexbox and CSS Grid

4. Basic concepts of JavaScript Such as variables, data types, objects, functions.

If you have any questions throughout the course, then feel free to post them in the Q&A section, you will get fast and helpful answers.

Who this course is for:

Students who have the basic knowledge of Front-End Web Development and want to develop their skills
Students who want develop their web design skills
Students who are interested in front-end programming
Anyone who is interested in cloning 😊

Build A YouTube Clone Using HTML, CSS and JS 100% Responsive

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 10min

Home Page5 lectures • 1hr 2min

Video Page5 lectures • 42min

Requirements

Description

Who this course is for: