Front End Web Development Bootcamp - Twitter Clone | George Lomidze | Skillshare

Front End Web Development Bootcamp - Twitter Clone

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
107 Lessons (12h 35m)
    • 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. Semantic Tags

      5:04
    • 13. What is CSS and how to write it

      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:39
    • 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. CSS Grid 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 - Part 1

      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 Twitter Clone Main Page Overview

      7:13
    • 49. Create Structure of Main Page

      11:18
    • 50. Add CSS to Main Page - Part 1

      9:47
    • 51. Add CSS to Main Page - Part 2

      4:40
    • 52. Add CSS to Main Page - Part 3

      9:07
    • 53. Add CSS to Main Page - Part 4

      6:20
    • 54. Add CSS to Footer of Main Page

      3:58
    • 55. Create Structure of Login Page

      7:16
    • 56. Layout of Elements

      5:19
    • 57. Add CSS to Navigation

      7:42
    • 58. Add CSS to Login - Part 1

      7:23
    • 59. Add CSS to Login - Part 2

      5:32
    • 60. Create Structure of Navigation

      5:13
    • 61. Add CSS to Navigation in News Feed Page

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

      3:41
    • 63. Add CSS to News Feed Header - Part 1

      6:18
    • 64. Add CSS to News Feed Header - Part 2

      4:46
    • 65. Create Structure of Posts Section

      6:30
    • 66. Add CSS to Posts Section

      7:44
    • 67. Structure of 'Who to Follow' Section

      4:44
    • 68. Add CSS to '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. Objects

      5:46
    • 80. Loops

      10:53
    • 81. Template Strings

      4:40
    • 82. What is DOM

      3:34
    • 83. How to Select and Manipulate Elements Part 1

      7:44
    • 84. How to Select and Manipulate Elements Part 2

      5:32
    • 85. DOM Styles and Classes

      11:05
    • 86. Events

      9:34
    • 87. Attributes in DOM

      5:08
    • 88. DOM Navigation

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

      5:14
    • 90. JavaScript Navigate to Login Page

      8:08
    • 91. JavaScript Main Page Validation

      5:32
    • 92. JavaScript Create Modal Box

      7:52
    • 93. JavaScript Login Page Validation

      6:30
    • 94. Create Structure of Modal Box

      6:03
    • 95. Add CSS to Modal Box - Part 1

      6:57
    • 96. Add CSS to Modal Box - Part 2

      8:48
    • 97. JavaScript Make Post Modal Work

      13:04
    • 98. Create Structure of Sidebar

      7:49
    • 99. Add CSS to Sideba - Part 1

      8:36
    • 100. Add CSS to Sidebar - Part 2

      5:57
    • 101. JavaScript Make Sidebar Work

      6:45
    • 102. Create Toggle Button

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

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

      8:07
    • 105. Make Project Responsive - Main Page

      13:09
    • 106. Make Project Responsive - Login Page

      12:10
    • 107. Make Project Responsive - News Feed Page

      14:46

About This Class

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