Frontend Web Development Bootcamp - Build a Twitter Clone

Video description

Master frontend web development using HTML, CSS, CSS Flexbox, CSS Grid, and JavaScript

About This Video

Learn HTML, CSS, JavaScript, and DOM in a single course
Explore basic to advanced fundamental concepts of frontend web development
Build a fully responsive web app that works across different screen devices

In Detail

If you want to learn how the most popular and widely used websites are created, this Frontend Web …

Frontend Web Development Bootcamp - Build a Twitter Clone

Video description

Master frontend web development using HTML, CSS, CSS Flexbox, CSS Grid, and JavaScript

About This Video

Learn HTML, CSS, JavaScript, and DOM in a single course
Explore basic to advanced fundamental concepts of frontend web development
Build a fully responsive web app that works across different screen devices

In Detail

If you want to learn how the most popular and widely used websites are created, this Frontend Web Development Bootcamp is for you. In this course, you'll build a website by cloning Twitter. Before you start building the website, you'll be taken through each of the technologies that you need to be well-versed with to build this project.

Starting with HTML and CSS, you'll build three different pages for your app - the main page, login page, and newsfeed page. Once you've got to grips with JavaScript and DOM, you'll add some functionality to your project. With the step-by-step instructions, this course will guide you in creating some validation to navigate between different pages. You'll also be able to build different modal boxes, create a sidebar, and add a dark mode. Finally, you'll make your project fully responsive on different screen sizes, so it's compatible with all types of devices.

By the end of the course, you'll have learned the skills necessary to master Responsive Web Design.

Who this book is for

This course is for anyone who wants to learn the three core technologies of frontend web development: HTML, CSS, and JavaScript. No programming experience required

Publisher resources

Download Example Code

Chapter 1 : Welcome

Introduction

Setup

Chapter 2 : HTML Crash Course

What is HTML

Basic HTML Document

Headings, Paragraphs and more

Lists

Links

Images

Forms - Part 1

Forms - Part 2

HTML5 Semantic Elements

Chapter 3 : CSS Crash Course

What is CSS and how to write it

CSS Selectors

Colors in CSS

Text Formatting

Fonts

Box Model

Pseudo Classes

Pseudo Elements

Measurement units - Part 1

Measurement units - Part 2

Positions - Part 1

Positions - Part 2

Floats

Backgrounds - Part 1

Backgrounds - Part 2

Shadows

Transitions

Transforms - Part 1

Transforms - Part 2

Chapter 4 : CSS Flexbox

Introduction to CSS Flexbox

Flex Container Properties

Flex Item Properties

Chapter 5 : CSS Grid

CSS Grid Introduction

Setup

How to create Grid

Fractional Unit

How to position Grid Items

Naming Grid Items - Part 1

Naming Grid Items - Part 2

Naming Grid Areas

Explicit and Implicit Grids

Aligning Grid Items

Aligning Grid Track

max-content, min-content, minmax()

auto-fill and auto-fit

Chapter 6 : Project - Build a Twitter Clone (Main Page)

Project Overview

Create Structure of Main Page

Styling of Main Page - Part 1

Styling of Main Page - Part 2

Styling of Form Element

Styling of Banner

Styling of Footer

Chapter 7 : Project - Build a Twitter Clone (Login Page)

Create Structure of Login Page

Layout of the Page

Styling of Navigation

Styling of Login - Part 1

Styling of Login - Part 2

Chapter 8 : Project - Build a Twitter Clone (News Feed Page)

Create Structure of Navigation

Styling of Navigation

Create structure of News Feed Header

Styling of News Feed Header - Part 1

Styling of News Feed Header - Part 2

Create Structure of Posts

Styling of Posts

Create Structure of Section - “Who to follow”

Styling of “Who to follow” Section

Create Post Button

Chapter 9 : JavaScript Crash Course

What is JavaScript?

Variables in JavaScript

JavaScript Data types

Operators

Type Coercion

Conditional Statements

Functions

Arrow Functions

Arrays

Objects

Loops

Template Strings

Chapter 10 : DOM Crash Course

What is DOM?

Select and manipulate the elements - Part 1

Select and manipulate the elements - Part 2

DOM styles and classes

Events

Manipulate the Attributes

DOM Navigation

How to Create Elements in DOM

Chapter 11 : Project - Build a Twitter Clone (Add JavaScript to Main and Login Page

Navigate to Login Page

Main Page Validation

Create Modal Box

Chapter 12 : Project - Build a Twitter Clone (Post Modal Box)

Create Structure of Post Modal

Styling of Post Modal - Part 1

Styling of Post Modal - Part 2

Make Post Modal Work

Chapter 13 : Project - Build a Twitter Clone (Sidebar)

Create Structure of Sidebar

Styling of Sidebar - Part 1

Styling of Sidebar - Part 2

Make Sidebar Work

Chapter 14 : Project - Build a Twitter Clone (Dark Mode)

Create a Toggle Button

Switching to Dark Mode - Part 1

Switching to Dark Mode - Part 2

Chapter 15 : Project - Build a Twitter Clone (Responsive Web Design)

Make Main Page Responsive

Make Login Page Responsive

Make News Feed Page Responsive

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.