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

    • 2. Introduction

    • 3. Setup

    • 4. What is HTML

    • 5. Basic HTML Document

    • 6. HTML Headings and paragraphs

    • 7. HTML Lists

    • 8. Links

    • 9. Images

    • 10. Forms - Part 1

    • 11. Forms - Part 2

    • 12. Semantic Tags

    • 13. What is CSS and how to write it

    • 14. CSS Selectors

    • 15. Colors

    • 16. Text Formatting

    • 17. Fonts

    • 18. Box Model

    • 19. Pseudo Classes

    • 20. Pesudo Elements

    • 21. Measurement Units - Part 1

    • 22. Measurement Units - Part 2

    • 23. Positions - Part 1

    • 24. Positions - Part 2

    • 25. Floats

    • 26. Backgrounds - Part 1

    • 27. Backgrounds - Part 2

    • 28. Shadows

    • 29. Transitions

    • 30. Transforms - Part 1

    • 31. Transforms - Part 2

    • 32. Introduction to CSS Flexbox

    • 33. Flex Container Properties

    • 34. Flex Item Properties

    • 35. CSS Grid Introduction

    • 36. CSS Grid Setup

    • 37. How to create Grid

    • 38. Fractional Units

    • 39. How to position Grid items

    • 40. Naming Grid items - Part 1

    • 41. Naming Grid items - Part 2

    • 42. Naming Grid areas

    • 43. Explicit and Implicit Grids

    • 44. Aligning Grid items

    • 45. Aligning Grid Tracks

    • 46. max-content - min-content - minmax()

    • 47. auto-fill and auto-fit

    • 48. Project Twitter Clone Main Page Overview

    • 49. Create Structure of Main Page

    • 50. Add CSS to Main Page - Part 1

    • 51. Add CSS to Main Page - Part 2

    • 52. Add CSS to Main Page - Part 3

    • 53. Add CSS to Main Page - Part 4

    • 54. Add CSS to Footer of Main Page

    • 55. Create Structure of Login Page

    • 56. Layout of Elements

    • 57. Add CSS to Navigation

    • 58. Add CSS to Login - Part 1

    • 59. Add CSS to Login - Part 2

    • 60. Create Structure of Navigation

    • 61. Add CSS to Navigation in News Feed Page

    • 62. Create Structure of News Feed Header

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

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

    • 65. Create Structure of Posts Section

    • 66. Add CSS to Posts Section

    • 67. Structure of 'Who to Follow' Section

    • 68. Add CSS to 'Who to Follow' Section

    • 69. Create Post Button

    • 70. What is JavaScript

    • 71. Variables in JavaScript

    • 72. Data types in Javascript

    • 73. Operators

    • 74. Type Coercion

    • 75. Conditional Statements

    • 76. Functions

    • 77. Arrow Functions

    • 78. Arrays

    • 79. Objects

    • 80. Loops

    • 81. Template Strings

    • 82. What is DOM

    • 83. How to Select and Manipulate Elements Part 1

    • 84. How to Select and Manipulate Elements Part 2

    • 85. DOM Styles and Classes

    • 86. Events

    • 87. Attributes in DOM

    • 88. DOM Navigation

    • 89. How to Create Elements in DOM

    • 90. JavaScript Navigate to Login Page

    • 91. JavaScript Main Page Validation

    • 92. JavaScript Create Modal Box

    • 93. JavaScript Login Page Validation

    • 94. Create Structure of Modal Box

    • 95. Add CSS to Modal Box - Part 1

    • 96. Add CSS to Modal Box - Part 2

    • 97. JavaScript Make Post Modal Work

    • 98. Create Structure of Sidebar

    • 99. Add CSS to Sideba - Part 1

    • 100. Add CSS to Sidebar - Part 2

    • 101. JavaScript Make Sidebar Work

    • 102. Create Toggle Button

    • 103. Switch to Dark Mode - Part 1

    • 104. Switch to Dark Mode - Part 2

    • 105. Make Project Responsive - Main Page

    • 106. Make Project Responsive - Login Page

    • 107. Make Project Responsive - News Feed Page


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:


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.



1. Promo: 2. Introduction: If you're new to up development or if you already have some knowledge in it and you want to develop your skills, then you come to the right place. This is the course which will teach you three core technologies off front and Web development from scratch technologists, which is the most popular and why leaves Day, HTML, CSS and JavaScript. Welcome to Front and Web development Food. Come build a Twitter clone Hi and George and this is Lasha. We are the creators and designers of this course and represent code and create. So in this course we're going to be teaching you the main concepts of HTML, CSS and JavaScript with several crash courses and then, based on those technologist will build a Twitter clone a long wait. It won't be the exact copy off. Twitter, for the most part, will be similar on the user interface, and also we will add some functionality to it. Let's talk a little about the course content. We're going to start from the HTML crash course in which we will go through some main constants of HTML. After that, we will move on to CSS, in which you were going about basics and not onto the basic stuff. Once we're done with CSS Crash Course Room, you want to see us as flax books, which is a one day national layout. More do, and it allows us to manage the alignment of elements on the page. Next comes CSS greet, which, like the Flex books, is used to create the layout of the page. But unlike the flats books, it is a two dimensional layout. Once we go through those sections, then we'll start building projects in which you will get a solid experience in HTML and CSS , who will design all three pages of the project. I'm in the main page, logging page and news, but this should be just designed without functionality. After that, we will move on and start learning about JavaScript with child soup Crash course. It should be followed by the dump Crash course Dump is a document object model which are also to interact with and manipulate on the HTML document with the help off chalice have to go through. Those two sections will add some functionality to our project, and for that we will use Java. Finally, once we finish building our projects, going making responsive for all different sizes. So you will learn about how the responsive Web design works. This course can see itself lots of different sections and topics. If you feel confident in any of them, you can feel free skipping and jump directly into the section which you are interested in. So do not wait, join us and I want to. 3. Setup: actually, before we start writing the code, we need to set up some tools, and those tools are just tax editor and the modern Web browser. Throughout the course, we're going to be using visual studio code, which is a free and also one of my favorite text editors. As for the Web browser, I'm going to use mostly Google Chrome. But besides that, in a couple of sections, we will be using Mozilla Firefox as well. Actually, you might have your own favorite code editor or Web browser, and it's absolutely okay you can a few free and use them. But nowadays I think that the V s code Google, Chrome and Mozilla far folks are off the best and handed tools to use. I'm sure that you already know how to install and use Google chrome, so I'm not going to waste time of that. As for the B s code in orders downloaded, you have to visit code dot visual studio dot com. Then you have to click this bottom and Donald. Once it is downloaded, that's go ahead and start the installation process. We have to check year. I accept the agreement. Click next, then I'm going to check the first cheque books. You know, there to create the short could I couldn't ask them. And also make sure that those boxes are checked as well. It will blow us to open files and folders with GS code by rightly click next and then click and stop. Actually, I have a word. The installed GS code. So I'm not going to do it again. All right, So once you install B is called, then you will be ready to go. So see you in the next video. 4. What is HTML: all right, so now it's time to start talking about HTML. The very first question that have to answer is off course, but following what is HTML? So in this video, we will briefly discuss what HTML actually is, what it stands for and what its main job. If there is anyone who wants to start learning Web development, it's impossible to do that without starting with HTML. It's very simple to learn, but at the same time it's extremely important to know. So html. I'm in the abbreviation itself stands for hypertext markup language. The first thing that you have to keep in mind is that HTML is not a programming language. You cannot program anything at any level using HTML. In general, every programming language works based on some logic. For example, in case of conditional statements. If some condition is true, then we do one thing, and if the condition is false, then we do another thing. In HTML. We don't have such watching, so it is a static language, and it's used to build blocks off the webpage. In other words, it describes the structure off your webpage. I'm in the content, which is represented by let's say headings, paragraphs, images, lease input elements and accept her up is created with HTML. If you visit any website, the content that you see, for example, information that comes from the server is rendered as the HTML document behind the scenes off every website, there might be lots of different logic. I'm in lots of different work, but eventually, as a result, every user sees information represented by HTML documents. So I believe you guess very well how important it is to know HTML and the good news. What we already have mentioned is that it's really simple to learn and use nowadays. The current version off html is HTM of five, so HTM of four is all ordered the past and throughout the section will be using, of course, html five. In order to use HTML, we don't need any server or some kind of compiler because the browser is able to read and display HTML document without any help off other tools. I mean servers or compilers, and so what? HTML files should have dots. Html extensions. All the elements are represented by tax, but browsers do not display those tax. They use them to display the content off the page. All right, so that was a little introduction about what HTML is and what it is used for. If you're an absolute beginner and for now, you're a little bit confused, then you don't have to worry. Bear with me, because step by step, you will get your hands dirty, and you'll get good knowledge in it. Okay, That's it for now. See you in the next video. 5. Basic HTML Document: All right, so now it's the practice time. In the last lecture, we had a brief overview off what HTML is, and now in this video, we're going to create our very first basic HTML document. First of all, let's go ahead and create a new folder on the desktop. Let's call it html crash course, and then inside it, let's create a new file with name in next HTML. As you remember from the previous lecture, every HTML file should have a dot html extension. Actually, there is a chance that we might not see this extension off the file by default. In order to make it visible, you have to go to view. And then you have to make sure that this little box is checked. Once you check this box. Then as the extension off the file, you might see dot txt and you just need to get rid of it. All right. Once you name the file in the correct way, let's go ahead and open it with your text editor. In our case, I'm going to open it with V s code. Actually, you are able to create a file from your text a difference well for that, you can either click this little icon here or by right click. You can choose to create a file or new file, whatever you see in your text editor. All right, let's go ahead and start building a basic HTM A structure. The first tug that we have to create is called dark type HTML. We have to open angle bracket. Then we need to place exclamation mark and then, in upper case, we have to write DOC type and then in lower case HTML. Actually, it is a declaration which represents the type off the document. It tells the browser that the page represents an HTML five document. As you see, I have written dog type in uppercase, but it's not case sensitive. It's just a convention writing in the upper kits. Okay, dog type is followed by HTML tag. As you see, the tax editor helped us on it. Auto completed the element. I mean, it added to html alone. The closing tuck. By the way, in HTML, most of the elements have opening and closing tux closing tucks are represented with a forward slash, but besides them, we also have self closing tux and you will meet them in the coming lectures. All right, so the HTML element is used to wrap the entire HTML document. Next, we have to create another element, which is called the Had. This element includes information such as a title for the document. Also, we can insert inside of it Scripps styles, some met attacks and also links for different files or sources. Everything that we insert inside of the head element is not going to be displayed on the webpage. All right, let's go ahead. An insert here element called Title, which is represented by Title Tug and as the content That's right here. Basic html document. Okay, lets say, using control s and then around this fall in the browser, there are a few different ways to do that. I'm going to run the file from the File Explorer. Let's just double click the file on it should be opened in Google Chrome. So it's concede the webpages completely empty for now because we haven't created any content yet. The only thing that you can see here is the title, which is displayed on the top off the browser. So that's the place where the title off your weapon is going to be displayed. All right. So in order to create and display the content off your webpage, first of all, you have to insert in your HTML document element called body, which actually will wrap the entire content off the webpage. I'm in the content that is going to be visible. So, for example, if we institute some text, let's say hello world that if you save it and reload the page, then it's going to be displayed on the page. So again, everything that passed inside the body element is always visible on the page. All right, so that's the basic structure off html document. Those are the main elements which you need to create in order to make your HTML document working properly. Before we finish this lecture, I'm going to show you one more thing. Envious coat. There is a building package called Amit. If you're using different tax editor, then you should install it manually from the extension manager. So I am. It allows us to create an element with some shortcuts, and, using it were able to create the basic HTM a structure with just a simple step. Let's go ahead until it everything from here. Then we have to place exclamation mark. And if I hit the tab, then it automatically will generate the basic structure off html document. At a glance, you can see that it's a little bit different from what we have created in this video. You see here some other elements I mean some matter tax and also inside HTM attack. There is specified language as English basically met. Attack provides some metadata about HTML document. They are used to specify, for example, page description, some keywords which you need for search engine optimization and also some other meta data. In our case, the V s code has generated three different metadata. The 1st 1 I mean Char said Attribute, specifies the character encoding for the HTML document. The 2nd 1 is used for their webpage responsiveness, and also we have here the 3rd 1 which closes to make our webpage compatible for older versions off Internet Explorer. Actually, those things may sound a little bit complicated for now, but you don't have to pay much attention to those things at this point. OK, so in this lecture, we have learned about how to create the basic structure off html document. Next, we're going to learn how to create different elements in HTML, and for that let's move on to the next lecture. 6. HTML Headings and paragraphs: all right. So in the previous lecture, we saw how to create the basic structure off html document. And also we have learned about how to run HTML files in the browser. In this video, we're going to describe some specific HTML elements, and you will see how to display different types of texts on the webpage before we move on and started writing some code. I want to show you how to create comments in the HTML document. Basically, comments are used to describe the code or to make some notes. And also you can use comments in order to pose the coat. I mean to terminate working it. Okay, So to create a comment, you have to open angle bracket followed by the exclamation mark. Then we need to double dishes. I'm going to ease of use, um, text. Let's say headings, because we're going to discuss how to use headings in HTML. And then we had to close the comment again, using double dash and angle bracket without exclamation mark. So now this text is treated as the comment. If I save and then reload the page, we won't get any text on the page. Actually, in the V s code, there is a short cut to create comments you need to press control and forward slash, and the comment will be generated automatically. All right. So, as we said, we're going to learn about how to use headings. In HTML, we have six types of headings. Let's go ahead and create the 1st 1 For that, I'm going to use H one tug with it text heading one. So if I reload the page that the text will be displayed, as you can see, its size is bigger than the size off playing text. Actually, the having element has some default styles and in order to show it and going to use Google chrome developer tools in order to open it, there are a few different ways you can either click these little menu I can hear then over over mortals and select developer tooth. Or you can use right click and select Inspector page. Or you can just press F 12 bottom and the development tools should be opened. As you see at the bottom of the page, there is open a new window, which consists of several parts inside the elements top. We see the structure off our HTML document. It is placed on the left side off the developer tooth window. You can find here the comments which we have just created and also the heading armed. Actually, we're able to manipulate on our coat from here so that you can use a right click, then choose added as HTML. So if I change here the text that's right, test and then if I heat control with Enter the tax will be edited and changed inside here and also on the pages. Well, actually, this kind of editing is not permanent. We cannot change the actual coat. If I refresh the page, then we will get the previous conflict back. All right, on the right hand side off the developer tools, we confined styles off our elements. As we said by default, the H one element has some default styles. For example, that display block it's phone sizes to GM's. It has some margin as well on etcetera. Actually, it is some CSS stuff which will be discussed in the next section, So do not worry much about them right now. Okay, Right after styles, we see another top called computed, which actually gives us some additional information about the styles, often element you can find here that the color off the taxes black also the phone sizes computed in pixels to eat yams is equivalent to 32 pixels. And also here are some other default styles as well. All right, so the developer tools is really a helpful and useful tool, and we will be using it frequently throughout the course. Let's go back to your HTML headings. As we said, we can define six different types of heading elements. Next one is represented by the age to tug, so let's open it and ride the content heading to. So if I reload the page that we will get here the second heading, which is slightly smaller than the previous one by default, it has a smaller phone size if we check it from the developer tools, but we'll see that it's fun. Size is equal to 1.5 PM, which is equivalent to 24 pixels, all right, in the exact same way we can define the rest of the headings. I'm going to duplicate this line of code four times, actually, in order to duplicate the code, we have to press shift out and the down arrow as a coach should be duplicated. Now we have to change the tug names and the content. The next one is going to be a church three. In order to change tag names quickly, I'm going to use multicourse er. In my case, I should press control and then I place course of for several times whatever I want. If the control key doesn't work for you, then the alternate shortcut could be an I'll keep. Okay, let's go ahead and change quickly tug names and they're heading names as well. So if I reload the page, then we will get six different heading announce. They are distinct from each other with phone sites. All right, so that's all about HTML. Heading elements off roll. We have six different types of headings. The next element that I want to show you is a paragraph. Let's make here a new comment, write paragraphs. So in order to create a paragraph, we have to use the P tug. Basically, paragraphs are used to represent some kind of big text. I mean, the tax like the article I'm going to insert here some dummy text. For that, we can use Lauren Ipsum, which actually ellos is to generate some text. In order to do that, I'm going to use Amit. We have to write your shortcut alarm. And then we need to specify how many words we want to insert. Let's say 40 that if we pressed up who will get some dummy tax? Okay, let's go ahead and reload the page. As you see we got here. Paragraph on the page, like heading Paragraph has its default styles as well. All right. As can see, all the elements that are displayed on the page are placed on a new line. Which elements takes up the full with off the page there is available. It happens because headings and paragraphs are block level elements. In HTML, every elements can be considered as a block level or in line level. In the case, off online elements they take up with that is required to display the content off element, and they are not placed on a new line as an example off the line element, we can consider spot elements in general. This Pontiac is used to add a hook to apart off the text For example, if you want to call or some part of tax from CSS, you can wrap this text with a span element by default. It won't change anything to detect. All right, let's instant here. Hello, then duplicate this line of code and change the content. Right world. Let's safe that. Reload the page. As you can see, those two words are placed side by sight. They did not take up a new line on the page. They just take up the width that is required to display the content, often element. In order to prove that I'm going to click this little icon here, which actually allows us to highlight elements on the page. If I hover over the headings and also the paragraph, you will see that they take up full with that is available on the page because Espy said, they are block level elements. As for SPAN elements they take up with that is needed to display the content. So actually, that's the main difference between a line and block level elements. All right, actually, that said what I wanted to show you in this lecture, let's take a quick break here and move onto the next lecture 7. HTML Lists: all right. In the last lecture, we have discussed how to create different types off texting HTML using headings and paragraphs. And now in this video, we're going to be talking about how to create different types of lists in HTML. Okay, As you notice, I have placed text editor and browser side by side because I think it will make our working process more convenient. Before we start creating HD Malisse, I'm going to install one package called Life Server which will hello a still run code without reloading page each time. Once we said the coat, then it will be displayed on the page automatically. So we have