Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

PacktPub Frontend Web Development Bootcamp – Build a Twitter Clone

Video Introducing this tutorial


Welcome:
Introduction
Setup

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

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

CSS Flexbox:
Introduction to CSS Flexbox
Flex Container Properties
Flex Item Properties

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

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

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

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

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

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

Project - Build a Twitter Clone (Add JavaScript to Main and Login Page:
Navigate to Login Page
Main Page Validation
Create Modal Box
Login Page Validation

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

Project - Build a Twitter Clone (Sidebar):
Create Structure of Sidebar
Styling of Sidebar - Part 1
Styling of Sidebar - Part 2
Make Sidebar Work

Project - Build a Twitter Clone (Dark Mode):
Create a Toggle Button
Switching to Dark Mode - Part 1
Switching to Dark Mode - Part 2

Project - Build a Twitter Clone (Responsive Web Design):
Make Main Page Responsive
Make Login Page Responsive
Make News Feed Page Responsive