Udemy, Coursera, 2U/edX Face Lawsuits Over Meta Pixel Use

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Front End Web Development Bootcamp - Twitter Clone

via Skillshare

Go to class Write review

This course may be unavailable.

Overview

Front End Web Development Bootcamp - Build a Twitter Clone.

Welcome to the brand new course created by the CodeAndCreate team. 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. HTML

2. CSS

3. CSS Flexbox

4. CSS Grid

5. JavaScript

6. DOM

Before 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 Course

  • CSS Crash Course

  • CSS Flexbox

  • CSS Grid

We 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 Course

  • DOM Crash Course

Once 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!!!

Syllabus

  • Promo
  • Introduction
  • Setup
  • What is HTML
  • Basic HTML Document
  • HTML Headings and paragraphs
  • HTML Lists
  • Links
  • Images
  • Forms - Part 1
  • Forms - Part 2
  • Semantic Tags
  • What is CSS and how to write it
  • CSS Selectors
  • Colors
  • Text Formatting
  • Fonts
  • Box Model
  • Pseudo Classes
  • Pesudo 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
  • Introduction to CSS Flexbox
  • Flex Container Properties
  • Flex Item Properties
  • CSS Grid Introduction
  • CSS Grid Setup
  • How to create Grid
  • Fractional Units
  • 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 Tracks
  • max-content - min-content - minmax()
  • auto-fill and auto-fit
  • Project Twitter Clone Main Page Overview
  • Create Structure of Main Page
  • Add CSS to Main Page - Part 1
  • Add CSS to Main Page - Part 2
  • Add CSS to Main Page - Part 3
  • Add CSS to Main Page - Part 4
  • Add CSS to Footer of Main Page
  • Create Structure of Login Page
  • Layout of Elements
  • Add CSS to Navigation
  • Add CSS to Login - Part 1
  • Add CSS to Login - Part 2
  • Create Structure of Navigation
  • Add CSS to Navigation in News Feed Page
  • Create Structure of News Feed Header
  • Add CSS to News Feed Header - Part 1
  • Add CSS to News Feed Header - Part 2
  • Create Structure of Posts Section
  • Add CSS to Posts Section
  • Structure of 'Who to Follow' Section
  • Add CSS to 'Who to Follow' Section
  • Create Post Button
  • What is JavaScript
  • Variables in JavaScript
  • Data types in Javascript
  • Operators
  • Type Coercion
  • Conditional Statements
  • Functions
  • Arrow Functions
  • Arrays
  • Objects
  • Loops
  • Template Strings
  • What is DOM
  • How to Select and Manipulate Elements Part 1
  • How to Select and Manipulate Elements Part 2
  • DOM Styles and Classes
  • Events
  • Attributes in DOM
  • DOM Navigation
  • How to Create Elements in DOM
  • JavaScript Navigate to Login Page
  • JavaScript Main Page Validation
  • JavaScript Create Modal Box
  • JavaScript Login Page Validation
  • Create Structure of Modal Box
  • Add CSS to Modal Box - Part 1
  • Add CSS to Modal Box - Part 2
  • JavaScript Make Post Modal Work
  • Create Structure of Sidebar
  • Add CSS to Sideba - Part 1
  • Add CSS to Sidebar - Part 2
  • JavaScript Make Sidebar Work
  • Create Toggle Button
  • Switch to Dark Mode - Part 1
  • Switch to Dark Mode - Part 2
  • Make Project Responsive - Main Page
  • Make Project Responsive - Login Page
  • Make Project Responsive - News Feed Page

Taught by

George Lomidze

Reviews

Start your review of Front End Web Development Bootcamp - Twitter Clone

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.