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

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Front End Web Development Bootcamp - Twitter Clone

teacher avatar George Lomidze, Developer / Designer / Online Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

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
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

444

Students

--

Projects

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

Meet Your Teacher

Teacher Profile Image

George Lomidze

Developer / Designer / Online Teacher

Teacher

Hi,

I'm George, a full-stack Web Developer / Designer, Co-Founder of 'Code And Create' and an author of several classes on Skillshare.

I'm excited that I'm here and have a chance to help people to learn one of the most interesting and powerful fields today.

I decided to share my knowledge and experience with the world and that's the main reason why I'm here at Skillshare.

I'm specialized in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, jQuery, React, React Native, NodeJS, Git, and more...

Looking forward to seeing you inside my classes and help you to become a professional web developer.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the