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

Table of contents

  1. Chapter 1 : Welcome
    1. Introduction
    2. Setup
  2. Chapter 2 : HTML Crash Course
    1. What is HTML
    2. Basic HTML Document
    3. Headings, Paragraphs and more
    4. Lists
    5. Links
    6. Images
    7. Forms - Part 1
    8. Forms - Part 2
    9. HTML5 Semantic Elements
  3. Chapter 3 : CSS Crash Course
    1. What is CSS and how to write it
    2. CSS Selectors
    3. Colors in CSS
    4. Text Formatting
    5. Fonts
    6. Box Model
    7. Pseudo Classes
    8. Pseudo Elements
    9. Measurement units - Part 1
    10. Measurement units - Part 2
    11. Positions - Part 1
    12. Positions - Part 2
    13. Floats
    14. Backgrounds - Part 1
    15. Backgrounds - Part 2
    16. Shadows
    17. Transitions
    18. Transforms - Part 1
    19. Transforms - Part 2
  4. Chapter 4 : CSS Flexbox
    1. Introduction to CSS Flexbox
    2. Flex Container Properties
    3. Flex Item Properties
  5. Chapter 5 : CSS Grid
    1. CSS Grid Introduction
    2. Setup
    3. How to create Grid
    4. Fractional Unit
    5. How to position Grid Items
    6. Naming Grid Items - Part 1
    7. Naming Grid Items - Part 2
    8. Naming Grid Areas
    9. Explicit and Implicit Grids
    10. Aligning Grid Items
    11. Aligning Grid Track
    12. max-content, min-content, minmax()
    13. auto-fill and auto-fit
  6. Chapter 6 : Project - Build a Twitter Clone (Main Page)
    1. Project Overview
    2. Create Structure of Main Page
    3. Styling of Main Page - Part 1
    4. Styling of Main Page - Part 2
    5. Styling of Form Element
    6. Styling of Banner
    7. Styling of Footer
  7. Chapter 7 : Project - Build a Twitter Clone (Login Page)
    1. Create Structure of Login Page
    2. Layout of the Page
    3. Styling of Navigation
    4. Styling of Login - Part 1
    5. Styling of Login - Part 2
  8. Chapter 8 : Project - Build a Twitter Clone (News Feed Page)
    1. Create Structure of Navigation
    2. Styling of Navigation
    3. Create structure of News Feed Header
    4. Styling of News Feed Header - Part 1
    5. Styling of News Feed Header - Part 2
    6. Create Structure of Posts
    7. Styling of Posts
    8. Create Structure of Section - "Who to follow"
    9. Styling of "Who to follow" Section
    10. Create Post Button
  9. Chapter 9 : JavaScript Crash Course
    1. What is JavaScript?
    2. Variables in JavaScript
    3. JavaScript Data types
    4. Operators
    5. Type Coercion
    6. Conditional Statements
    7. Functions
    8. Arrow Functions
    9. Arrays
    10. Objects
    11. Loops
    12. Template Strings
  10. Chapter 10 : DOM Crash Course
    1. What is DOM?
    2. Select and manipulate the elements - Part 1
    3. Select and manipulate the elements - Part 2
    4. DOM styles and classes
    5. Events
    6. Manipulate the Attributes
    7. DOM Navigation
    8. How to Create Elements in DOM
  11. Chapter 11 : Project - Build a Twitter Clone (Add JavaScript to Main and Login Page
    1. Navigate to Login Page
    2. Main Page Validation
    3. Create Modal Box
    4. Login Page Validation
  12. Chapter 12 : Project - Build a Twitter Clone (Post Modal Box)
    1. Create Structure of Post Modal
    2. Styling of Post Modal - Part 1
    3. Styling of Post Modal - Part 2
    4. Make Post Modal Work
  13. Chapter 13 : Project - Build a Twitter Clone (Sidebar)
    1. Create Structure of Sidebar
    2. Styling of Sidebar - Part 1
    3. Styling of Sidebar - Part 2
    4. Make Sidebar Work
  14. Chapter 14 : Project - Build a Twitter Clone (Dark Mode)
    1. Create a Toggle Button
    2. Switching to Dark Mode - Part 1
    3. Switching to Dark Mode - Part 2
  15. Chapter 15 : Project - Build a Twitter Clone (Responsive Web Design)
    1. Make Main Page Responsive
    2. Make Login Page Responsive
    3. Make News Feed Page Responsive

Product information

  • Title: Frontend Web Development Bootcamp - Build a Twitter Clone
  • Author(s): George Lomidze
  • Release date: April 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800200975