Front End Web Development Bootcamp - Build a Twitter Clone

Focused View

George Lomidze,Code And Create,Lasha Nozadze

12:33:49

15 View

1 - Welcome

1 - Introduction.mp4

03:25

2 - Setup.mp4

01:47

3 - Source Files.html

2 - HTML Crash Course

4 - HTMLCrashCourse.zip

4 - What Is HTML.mp4

02:56

5 - Basic HTML Document.mp4

06:35

6 - Headings Paragraphs and more.mp4

08:43

7 - Lists.mp4

05:00

8 - Links.mp4

04:39

9 - Images.mp4

04:38

10 - Forms Part 1.mp4

05:50

11 - Forms Part 2.mp4

04:42

12 - HTML5 Semantic Elements.mp4

05:04

3 - CSS Crash Course

13 - 002CSSCrashCourse.zip

13 - What is CSS and how to write it.mp4

07:51

14 - CSS Selectors.mp4

09:00

15 - Colors in CSS.mp4

05:34

16 - Text Formatting.mp4

06:05

17 - Fonts.mp4

09:37

18 - Box Model.mp4

12:12

19 - Pseudo Classes.mp4

07:21

20 - Pseudo Elements.mp4

04:03

21 - Measurement units Part 1.mp4

06:39

22 - Measurement units Part 2.mp4

06:24

23 - Positions Part 1.mp4

06:12

24 - Positions Part 2.mp4

08:50

25 - Floats.mp4

05:54

26 - Backgrounds Part 1.mp4

11:30

27 - Backgrounds Part 2.mp4

08:20

28 - Shadows.mp4

07:56

29 - Transitions.mp4

10:14

30 - Transforms Part 1.mp4

07:14

31 - Transforms Part 2.mp4

04:39

4 - CSS Flexbox

32 - 003CSSFlexbox.zip

32 - Introduction to CSS Flexbox.mp4

06:13

33 - Flex Container Properties.mp4

14:55

34 - Flex Item Properties.mp4

09:24

5 - CSS Grid

35 - 004CSSGrid.zip

35 - CSS Grid Introduction.mp4

04:46

36 - Setup.mp4

05:29

37 - How to create Grid.mp4

06:19

38 - Fractional Unit.mp4

06:08

39 - How to position Grid Items.mp4

09:27

40 - Naming Grid Items Part 1.mp4

09:28

41 - Naming Grid Items Part 2.mp4

10:02

42 - Naming Grid Areas.mp4

05:07

43 - Explicit and Implicit Grids.mp4

06:00

44 - Aligning Grid Items.mp4

06:20

45 - Aligning Grid Track.mp4

04:06

46 - maxcontent mincontent minmax.mp4

04:57

47 - autofill and autofit.mp4

04:39

6 - Project Build a Twitter Clone Main Page

48 - 005ProjectBuildaTwitterCloneMainPage.zip

48 - Project Overview.mp4

07:13

49 - Create Structure of Main Page.mp4

11:19

50 - Styling of Main Page Part 1.mp4

09:47

51 - Styling of Main Page Part 2.mp4

04:40

52 - Styling of Form Element.mp4

09:07

53 - Styling of Banner.mp4

06:20

54 - Styling of Footer.mp4

03:58

7 - Project Build a Twitter Clone Login Page

55 - 006ProjectBuildaTwitterCloneLoginPage.zip

55 - Create Structure of Login Page.mp4

07:16

56 - Layout of the Page.mp4

05:19

57 - Styling of Navigation.mp4

07:42

58 - Styling of Login Part 1.mp4

07:23

59 - Styling of Login Part 2.mp4

05:32

8 - Project Build a Twitter Clone News Feed Page

60 - 007ProjectBuildaTvitterCloneNewsFeedPage.zip

60 - Create Structure of Navigation.mp4

05:13

61 - Styling of Navigation.mp4

09:52

62 - Create structure of News Feed Header.mp4

03:41

63 - Styling of News Feed Header Part 1.mp4

06:18

64 - Styling of News Feed Header Part 2.mp4

04:46

65 - Create Structure of Posts.mp4

06:30

66 - Styling of Posts.mp4

07:44

67 - Create Structure of Section Who to follow.mp4

04:44

68 - Styling of Who to Follow Section.mp4

09:04

69 - Create Post Button.mp4

04:15

9 - JavaScript Crash Course

70 - 008JavaScriptCrashCourse.zip

70 - What is JavaScript.mp4

05:39

71 - Variables in JavaScript.mp4

07:24

72 - JavaScript Data types.mp4

06:22

73 - Operators.mp4

06:12

74 - Type Coercion.mp4

06:07

75 - Conditional Statements.mp4

07:56

76 - Functions.mp4

07:42

77 - Arrow Functions.mp4

04:00

78 - Arrays.mp4

07:28

79 - Objects.mp4

05:46

80 - Loops.mp4

10:53

81 - Template Strings.mp4

04:40

10 - DOM Crash Course

82 - 009DOMCrashCourse.zip

82 - What is DOM.mp4

03:34

83 - Select and manipulate the elements Part 1.mp4

07:44

84 - Select and manipulate the elements Part 2.mp4

05:32

85 - DOM styles and classes.mp4

11:05

86 - Events.mp4

09:34

87 - Manipulate the Attributes.mp4

05:08

88 - DOM Navigation.mp4

06:14

89 - How to Create Elements in DOM.mp4

05:14

11 - Project Build a Twitter Clone Add JavaScript to Main and Login Page

90 - 010ProjectBuildaTwitterCloneAddJavascript.zip

90 - Navigate to Login Page.mp4

08:08

91 - Main Page Validation.mp4

05:32

92 - Create Modal Box.mp4

07:52

93 - Login Page Validation.mp4

06:30

12 - Project Build a Twitter Clone Post Modal Box

94 - Create Structure of Post Modal.mp4

06:03

94 - Section011ProjectBuildaTwitterClonePostModalBox.zip

95 - Styling of Post Modal Part 1.mp4

06:57

96 - Styling of Post Modal Part 2.mp4

08:48

97 - Make Post Modal Work.mp4

13:04

13 - Project Build a Twitter Clone Sidebar

98 - Create Structure of Sidebar.mp4

07:49

98 - Section012ProjectBuildaTwitterCloneSidebar.zip

99 - Styling of Sidebar Part 1.mp4

08:36

100 - Styling of Sidebar Part 2.mp4

05:57

101 - Make Sidebar Work.mp4

06:45

14 - Project Build a Twitter Clone Dark Mode

102 - Create a Toggle Button.mp4

08:58

102 - Section013ProjectBuildaTwitterCloneDarkMode.zip

103 - Switching to Dark Mode Part 1.mp4

10:27

104 - Switching to Dark Mode Part 2.mp4

08:07

15 - Project Build a Twitter Clone Responsive Web Design

105 - Make Main Page Responsive.mp4

13:09

105 - Section014ProjectBuildaTwitterCloneResponsiveWebDesign.zip

106 - Make Login Page Responsive.mp4

12:10

107 - Make News Feed Page Responsive.mp4

14:46

16 - BONUS

108 - Bonus Lecture Check Out.html

Description

Build a Twitter Clone using HTML, CSS, CSS Flexbox, CSS Grid, and JavaScript. Master your Front End Web Developer Skills

What You'll Learn?

You will start from Basics of HTML and learn things like: Basic HTML Document, headings, paragraphs, lists, links, images, forms and much more.
You will learn about the basic concepts of CSS: selectors, colors, text formatting, backgrounds, positions, pseudo-elements and classes, shadows and more...
You will get deep understanding of CSS Flexbox
You will learn how to manage the layout of you web page based on CSS Grid
You will be able to build UI of Twitter based on HTML and CSS
After completing HTML and CSS crash courses, you will move on and learn some basic concepts of JavaScript: variables, data types, objects, functions, arrays, loops and much more...
You will learn about how to interact with HTML document using Document Object Model
Once you are familiar with JavaScript and HTML, you will be able to add some functionality to the project
Finally we will make the project fully responsive on different screen sizes

Who is this for?

Students who want to learn three core technologies of Front End We Development: HTML, CSS, and JavaScript

Students who have zero experience in programming

Students who have the basic knowledge of Front End Web Development and want to develop their skills

Students who want develop Web Design skills

What You Need to Know?

Text Editor

Modern Web Browser

No prior knowledge is required

More details

Description
Front End Web Development Bootcamp - Build a Twitter Clone.
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!!!

Who this course is for:
Students who want to learn three core technologies of Front End We Development: HTML, CSS, and JavaScript
Students who have zero experience in programming
Students who have the basic knowledge of Front End Web Development and want to develop their skills
Students who want develop Web Design skills

User Reviews

Rating

average 0

Total votes0

Focused display

Front End Web Development

George Lomidze

Instructor's Courses

George Lomidze is a full-stack web developer/designer, co-founder at ‘Code and Create’, and an author of several best-selling courses on Udemy. He is excited that he has a chance to help people learn one of the most interesting and hottest fields in the world. He specializes in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, React, React Native, NodeJS, MongoDB, Express, and many more. He is looking forward to seeing you follow his courses and helping you become a professional web developer. He is also the founder of MicroGrinder Poker School, an online poker school dedicated to micro stakes poker players, where he provides a wide array of free and low-cost poker resources and poker training, including poker strategy articles and poker training videos series. He is also the Amazon #1 best-selling author of Essential Poker Math, Expanded Edition.

Code And Create

Instructor's Courses

'Code And Create' is a Web Development company with professional web developers, web designers, and experienced online instructors. 'Code And Create' creates online educational courses. Most of them are the best-selling ones on the Udemy platform.We are specialized in multiple technologies and programming languages such as HTML5, CSS3, SASS, Bootstrap, Material Design, JavaScript, ReactJS, Angular, VueJS, NodeJS, MongoDB, PHP, MySQL, Python and much more...We are excited to be here and we are eager to share our knowledge and experience.Looking forward to seeing you inside our courses.

Lasha Nozadze

Instructor's Courses

Founder Of 'CodeAndCreate'.Hi, I'm Lasha! I'm a self-taught full-stack Web Developer / Designer, Software Engineer with several years of experience and author of several bestselling courses on Udemy. When I got into programming, guessed that I've found a new life and I feel excited about it, because I believe, programming is one of the hottest fields in 21st century. My experience in web development covers the following technologies, such as HTML5, CSS3, SASS, Bootstrap, JavaScript, React, Node.js, PHP, MySQL and much more... I'm glad to tell you that, teaching became my another passion. I'm so grateful and excited that I got a chance to share my knowledge and experience with you. I have created a web development company, called 'CodeAndCreate', with my friend George. 'CodeAndCreate' is a company that serves to the following purpose: "Code, Create and Share your knowledge to make the world better!"As I've mentioned, I'm a self-taught programmer, without any college or university graduation. I faced to a lot of troubles and difficulties until I came here, therefore I exactly know what you really need. So, waiting for you!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.