Front End Web Development Bootcamp - Twitter Clone
George Lomidze, Developer / Designer / Online Teacher
Watch this class and thousands more
Watch this class and thousands more
Lessons in This Class
-
-
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
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 profileHands-on Class Project
The class consists of a couple of different sections. You should start with the theoretical lectures of HTML, CSS, CSS Flexbox and CSS Grid, JavaScript, DOM. After that, you should do the following exercises:
Exercise #1
a) Create HTML markup for the main page
b) Add CSS to the main page
Exercise #2
a) Create HTML markup for the login page
b) Add CSS to the login page
Exercise #3
a) Create HTML markup for the news feed page
b) Add CSS to the news feed page
Exercise #4
a) Add JavaScript to the project and manage the navigation between different pages
b) Validate the main page
c) Create a modal box
d) Validate Login Page
Exercise #5
a) Create HTML markup for post modal
b) Add CSS to post modal
c) Add JavaScript to post modal
Exercise #6
a) Create HTML markup for sidebar
b) Add CSS to sidebar
c) Add JavaScript to sidebar
Exercise #7
a) Create a toggle button
b) Manage to switch to the dark mode
Exercise #8
a) Make Project Responsive
b) Post the finished work under the projects section
GOOD LUCK!!!
Class Ratings
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