Front End Web Development Bootcamp - Build A Twitter Clone

Build a Twitter Clone using HTML, CSS, CSS Flexbox, CSS Grid, and JavaScript. Master your Front End Web Developer Skills

What you'll learn
You will start from Basics of HTML and learn things like: Basic HTML Document, headings, paragraphs, lists, links, images, forms and much more.
You will learn about the basic concepts of CSS: selectors, colors, text formatting, backgrounds, positions, pseudo-elements and classes, shadows and more…
You will get deep understanding of CSS Flexbox
You will learn how to manage the layout of you web page based on CSS Grid
You will be able to build UI of Twitter based on HTML and CSS
After completing HTML and CSS crash courses, you will move on and learn some basic concepts of JavaScript: variables, data types, objects, functions, arrays, loops and much more…
You will learn about how to interact with HTML document using Document Object Model
Once you are familiar with JavaScript and HTML, you will be able to add some functionality to the project
Finally we will make the project fully responsive on different screen sizes
Requirements
Text Editor
Modern Web Browser
No prior knowledge is required
Description
Front End Web Development Bootcamp - Build a Twitter Clone.If you want to learn how the most popular and widely-used websites are created, then this is the right course for you.Throughout the course, we are going to build a clone of Twitter. The project will be created based on:1. HTML2. CSS3. CSS Flexbox4. CSS Grid5. JavaScript6. DOMBefore building the project, you will be able to go through the crash courses of all the mentioned technologies. We will start with HTML and CSS. After completing the following sections:HTML Crash CourseCSS Crash CourseCSS FlexboxCSS GridWe will build three different pages of Twitter - Main Page, Login Page and News Feed Page based on HTML and CSS. After that, comes:JavaScript Crash CourseDOM Crash CourseOnce we are familiar with JavaScript and DOM, we will add some functionality to our project. We will create some validation in order to navigate between different pages, also, you will be able to build different modal boxes, sidebar and dark mode.Finally, we will make our project fully responsive on different screen sizes, so, you'll be able to master the Responsive Web Design.If you have any questions throughout the course, then feel free and post them in the Q&A section, you will get fast and helpful answers.JOIN US!!!

Overview

Section 1: Welcome

Lecture 1 Introduction

Lecture 2 Setup

Lecture 3 Source Files

Section 2: HTML Crash Course

Lecture 4 What Is HTML?

Lecture 5 Basic HTML Document

Lecture 6 Headings, Paragraphs and more…

Lecture 7 Lists

Lecture 8 Links

Lecture 9 Images

Lecture 10 Forms - Part 1

Lecture 11 Forms - Part 2

Lecture 12 HTML5 Semantic Elements

Section 3: CSS Crash Course

Lecture 13 What is CSS and how to write it

Lecture 14 CSS Selectors

Lecture 15 Colors in CSS

Lecture 16 Text Formatting

Lecture 17 Fonts

Lecture 18 Box Model

Lecture 19 Pseudo Classes

Lecture 20 Pseudo Elements

Lecture 21 Measurement units - Part 1

Lecture 22 Measurement units - Part 2

Lecture 23 Positions - Part 1

Lecture 24 Positions - Part 2

Lecture 25 Floats

Lecture 26 Backgrounds - Part 1

Lecture 27 Backgrounds - Part 2

Lecture 28 Shadows

Lecture 29 Transitions

Lecture 30 Transforms - Part 1

Lecture 31 Transforms - Part 2

Section 4: CSS Flexbox

Lecture 32 Introduction to CSS Flexbox

Lecture 33 Flex Container Properties

Lecture 34 Flex Item Properties

Section 5: CSS Grid

Lecture 35 CSS Grid Introduction

Lecture 36 Setup

Lecture 37 How to create Grid

Lecture 38 Fractional Unit

Lecture 39 How to position Grid Items

Lecture 40 Naming Grid Items - Part 1

Lecture 41 Naming Grid Items - Part 2

Lecture 42 Naming Grid Areas

Lecture 43 Explicit and Implicit Grids

Lecture 44 Aligning Grid Items

Lecture 45 Aligning Grid Track

Lecture 46 max-content, min-content, minmax()

Lecture 47 auto-fill and auto-fit

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

Lecture 48 Project Overview

Lecture 49 Create Structure of Main Page

Lecture 50 Styling of Main Page - Part 1

Lecture 51 Styling of Main Page - Part 2

Lecture 52 Styling of Form Element

Lecture 53 Styling of Banner

Lecture 54 Styling of Footer

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

Lecture 55 Create Structure of Login Page

Lecture 56 Layout of the Page

Lecture 57 Styling of Navigation

Lecture 58 Styling of Login - Part 1

Lecture 59 Styling of Login - Part 2

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

Lecture 60 Create Structure of Navigation

Lecture 61 Styling of Navigation

Lecture 62 Create structure of News Feed Header

Lecture 63 Styling of News Feed Header - Part 1

Lecture 64 Styling of News Feed Header - Part 2

Lecture 65 Create Structure of Posts

Lecture 66 Styling of Posts

Lecture 67 Create Structure of Section - "Who to follow"

Lecture 68 Styling of "Who to Follow" Section

Lecture 69 Create Post Button

Section 9: JavaScript Crash Course

Lecture 70 What is JavaScript?

Lecture 71 Variables in JavaScript

Lecture 72 JavaScript Data types

Lecture 73 Operators

Lecture 74 Type Coercion

Lecture 75 Conditional Statements

Lecture 76 Functions

Lecture 77 Arrow Functions

Lecture 78 Arrays

Lecture 79 Objects

Lecture 80 Loops

Lecture 81 Template Strings

Section 10: DOM Crash Course

Lecture 82 What is DOM?

Lecture 83 Select and manipulate the elements - Part 1

Lecture 84 Select and manipulate the elements - Part 2

Lecture 85 DOM styles and classes

Lecture 86 Events

Lecture 87 Manipulate the Attributes

Lecture 88 DOM Navigation

Lecture 89 How to Create Elements in DOM

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

Lecture 90 Navigate to Login Page

Lecture 91 Main Page Validation

Lecture 92 Create Modal Box

Lecture 93 Login Page Validation

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

Lecture 94 Create Structure of Post Modal

Lecture 95 Styling of Post Modal - Part 1

Lecture 96 Styling of Post Modal - Part 2

Lecture 97 Make Post Modal Work

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

Lecture 98 Create Structure of Sidebar

Lecture 99 Styling of Sidebar - Part 1

Lecture 100 Styling of Sidebar - Part 2

Lecture 101 Make Sidebar Work

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

Lecture 102 Create a Toggle Button

Lecture 103 Switching to Dark Mode - Part 1

Lecture 104 Switching to Dark Mode - Part 2

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

Lecture 105 Make Main Page Responsive

Lecture 106 Make Login Page Responsive

Lecture 107 Make News Feed Page Responsive

Section 16: BONUS

Lecture 108 Bonus Lecture: Check Out

Students who want to learn three core technologies of Front End We Development: HTML, CSS, and JavaScript,Students who have zero experience in programming,Students who have the basic knowledge of Front End Web Development and want to develop their skills,Students who want develop Web Design skills