Create Instagram Clone Using HTML & CSS

Focused View

Mustafa Alawi

5:04:50

400 View

1. Course Content

1. Introduction.mp4

04:50

2. Tools you need.mp4

01:13

3. Project folder.mp4

01:31

4. Project structure.mp4

03:06

5. Bootstrap.mp4

01:13

6. Fontawesome.mp4

01:35

7. Nav.mp4

06:20

8. Nav design.mp4

09:17

9. Search.mp4

06:48

10. UI.mp4

11:54

11. Left column.mp4

05:24

12. Scrollbar.mp4

03:42

13. Post username.mp4

11:15

14. Post image.mp4

01:54

15. Post design.mp4

15:37

16. Reaction design.mp4

04:27

17. Right column.mp4

09:22

18. Suggestions.mp4

10:26

19. Home responsive.mp4

07:53

20. Login page.mp4

12:21

21. Login slider.mp4

11:38

22. Form design.mp4

18:09

23. Or.mp4

05:31

24. Stores.mp4

05:04

25. Footer.mp4

05:33

26. Login responsive.mp4

04:12

27. Dark mode.mp4

10:40

28. Profile ui.mp4

17:55

29. Profile bio.mp4

06:54

30. Gallery design.mp4

11:50

31. Gallery responsive.mp4

05:10

32. User profile.mp4

05:56

33. Camera page.mp4

08:45

34. Search page.mp4

06:55

35. Search results.mp4

07:48

36. Edit profile.mp4

11:50

37. Single post.mp4

04:34

38. Discover.mp4

04:28

39. Pagination.mp4

01:26

40. Sign up page.mp4

03:31

41. Verify signup form.mp4

07:22

42. Verify form.mp4

06:21

43. Testing.mp4

03:10

2. Project files

1.1 html-insta.zip

1. Project files.html

Description

Create Instagram Clone Using HTML & CSS From Scratch

What You'll Learn?

You will learn how to create Instagram website from scratch
You will learn how to structure your project
You will learn how to use HTML and CSS effectively
You will learn how to design a complete responsive user interface
How to use different CSS techniques to make your website look amazing
You will learn how to use Bootstrap the right way
You will learn how to build login page
You will learn how to design profile page
You will learn how to design a feed page
You will learn important web design tips & tricks
You will learn how to work on every single page an Instagram website needs
And much more...

Who is this for?

Web developers who want to build real-world projects.

Front-end web developers who want to intensify their skills.

Web designers

More details

Description
Do you wanna build real-world projects?
Do you wanna create an amazing Instagram clone?

In this course I'm going to teach you how to create a complete Instagram Clone using HTML & CSS.
You will be taught how to build a complete Instagram clone using HTML & CSS. You will also be taken step-by-step where every single thing will be explained thoroughly to make sure you understood and use it in your project. I'll start off by structuring the project and then move on to the user interface and then you will be given the logic behind successfully creating and completing the project.
Moreover, you will be taught important design concepts, such as responsive web design, to make sure you will be able to build websites that look amazing and attract customers. Being able to build websites that look outstandingly gorgeous will serve you in two ways. First you will be able to work as a web designer, which is one of the jobs that are in-demand. Second you will be able to build your own brilliant websites.
Note: This course takes you step by step from the beginning, however, having some understanding of CSS & HTML is highly recommended.

Who is this course for?
This course is perfect for:
Web developers who want to build real-life projects & become professional web designers.
Developers who want to specialize web design.

What is different about this course?
Well, instead of teaching you concepts you will never use in your career, I'm teaching you the "how to" in very simple steps so that you understand everything easily and you learn how to create real-world project.

What is the goal of this course?
The goal is to make learners of this course capable of building large-scale real-world websites using HTML &Â CSS. And building a website like Instagram is undoubtedly the best way to reach this goal.

Topics covered in this course:
1. How to create every single page in an Instagram clone
2. How to structure your project.
3. How to incorporate Bootstrap.
4. How to optimize your code.
5. How to build a user-friendly user interface.
6. How to create every single section just like Instagram.
7. How to select colors and fonts just like Instagram.
8. How to make your website responsive.
9. Advanced CSS tips and tricks.
10. How to make website images fit your design perfectly.
11. And much much more...

Wish you an incredible learning experience.
Who this course is for:
Web developers who want to build real-world projects.
Front-end web developers who want to intensify their skills.
Web designers

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, it's Mustafa Alawi, a Software engineer & entrepreneur. I've basically seven years of experience in web development & software development. I also work as a consultant helping small-businesses. And have a great passion for business & entrepreneurship and founded CalmAndCode.I like teaching people and providing them with the knowledge that I have as I'm talented at simplifying complex theories and matters. And one of my goals is to help my students find success and reach their goals. My way of teaching focuses on helping students applying what they learn to make sure they're capable of using what they learn in the real world.Moreover, I work on entrepreneurial projects from time to time.

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.