Front End Web Development Bootcamp - Build a Twitter Clone

George Lomidze, Web Developer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
107 Lessons (12h 39m)
    • 1. Promo

      1:20
    • 2. Introduction

      2:58
    • 3. Setup

      1:47
    • 4. What is HTML?

      2:56
    • 5. Basic HTML Document

      6:34
    • 6. HTML Headings and Paragraphs

      8:43
    • 7. HTML Lists

      5:00
    • 8. Links

      4:39
    • 9. Images

      4:38
    • 10. Forms - Part 1

      5:50
    • 11. Forms - Part 2

      4:42
    • 12. HTML5 Semantic Elements

      5:04
    • 13. What is CSS and How to Write?

      7:51
    • 14. CSS Selectors

      9:00
    • 15. Colors

      5:34
    • 16. Text Formatting

      6:05
    • 17. Fonts

      9:37
    • 18. Box Model

      12:12
    • 19. Pseudo Classes

      7:21
    • 20. Pesudo Elements

      4:03
    • 21. Measurement Units - Part 1

      6:24
    • 22. Measurement Units -Part 2

      6:24
    • 23. Positions - Part 1

      6:12
    • 24. Positions - Part 2

      8:50
    • 25. Floats

      5:54
    • 26. Backgrounds - Part 1

      11:30
    • 27. Backgrounds - Part 2

      8:20
    • 28. Shadows

      7:56
    • 29. Transitions

      10:14
    • 30. Transforms - Part 1

      7:14
    • 31. Transforms - Part 2

      4:39
    • 32. Introduction to CSS Flexbox

      6:13
    • 33. Flex Container Properties

      14:55
    • 34. Flex Item Properties

      9:24
    • 35. CSS Grid Introduction

      4:46
    • 36. Setup

      5:29
    • 37. How to Create Grid

      6:19
    • 38. Fractional Units

      6:08
    • 39. How to Position Grid Items

      9:27
    • 40. Naming Grid Items

      9:28
    • 41. Naming Grid Items - Part 2

      10:02
    • 42. Naming Grid Areas

      5:07
    • 43. Explicit and Implicit Grids

      6:00
    • 44. Aligning Grid Items

      6:20
    • 45. Aligning Grid Tracks

      4:06
    • 46. max-content, min-content, minmax()

      4:57
    • 47. auto-fill and auto-fit

      4:39
    • 48. Project Overview

      7:13
    • 49. Create Structure of Main Page

      11:18
    • 50. Styling of Main Page - Part 1

      9:47
    • 51. Styling of Main Page - Part 2

      4:40
    • 52. Styling of Main Page - Part 3

      9:07
    • 53. Styling of Main Page - Part 4

      6:20
    • 54. Styling of Footer

      3:58
    • 55. Create Structure of Login Page

      7:16
    • 56. Align Elements

      5:19
    • 57. Styling of Navigation

      7:42
    • 58. Styling of Login - Part 1

      7:23
    • 59. Styling of Login - Part 2

      5:32
    • 60. Create Structure of Navigation

      5:13
    • 61. Styling of Navigation

      9:51
    • 62. Create Structure of News Feed Header

      3:41
    • 63. Styling of News Feed Header - Part 1

      6:18
    • 64. Styling of News Feed Header - Part 2

      4:46
    • 65. Create Structure of Posts

      6:30
    • 66. Styling of Posts

      7:44
    • 67. Styling of Who to Follow Section

      9:04
    • 68. Styling of Who to Follow Section

      9:04
    • 69. Create Post Button

      4:15
    • 70. What is JavaScript

      5:39
    • 71. Variables in JavaScript

      7:24
    • 72. Data types in Javascript

      6:22
    • 73. Operators

      6:12
    • 74. Type Coercion

      6:07
    • 75. Conditional Statements

      7:55
    • 76. Functions

      7:42
    • 77. Arrow functions

      4:00
    • 78. Arrays

      7:28
    • 79. Objetcs

      5:46
    • 80. Loops

      10:53
    • 81. Template Strings

      4:40
    • 82. What is DOM

      3:34
    • 83. Select and Manipulate on Elements - Part 1

      7:44
    • 84. Select and Manipulate on Elements - Part 2

      5:32
    • 85. DOM Styles and Classes

      11:05
    • 86. Events

      9:34
    • 87. Manipulate on Attributes

      5:08
    • 88. DOM Navigation

      6:14
    • 89. How to Create Elements in DOM

      5:14
    • 90. Navigate to Login Page

      8:08
    • 91. Main Page Validation

      5:32
    • 92. Create Modal Box

      7:52
    • 93. Login Page Validation

      6:30
    • 94. Create Structure of Modal Box

      6:03
    • 95. Styling of Modal Box

      6:57
    • 96. Styling of Modal Box - Part 2

      8:48
    • 97. Make Post Modal Work

      13:04
    • 98. Create Structure of Sidebar

      7:49
    • 99. Styling of Sidebar - Part 1

      8:36
    • 100. Styling of Sidebar - Part 2

      5:57
    • 101. Make Sidebar Work

      6:45
    • 102. Create Toggle Button

      8:58
    • 103. Switching to Dark Mode - Part 1

      10:26
    • 104. Switching to Dark Mode - Part 2

      8:07
    • 105. Make Main Page Responsive

      13:09
    • 106. Make Login Page Responsive

      12:10
    • 107. Make News Feed Page Responsive

      14:46

About This Class

Front End Web Development Bootcamp - Build a Twitter Clone.

Welcome to the brand new course created by 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 size, so, you'll be able to master the Responsive Web Design.

If you have any question throughout the course, then feel free and post them in the Q&A section, you will get fast and helpful answers.

JOIN US!!!