Tailwind CSS and Nextjs | Learn by building project

Focused View

Kei Blokhin

5:30:10

144 View

1. Introduction

1. Introduction.mp4

02:35

2. What is Tailwind CSS.mp4

03:02

3. Working with color.mp4

04:21

4. Container and Spacing.mp4

04:27

5. Typography.mp4

05:08

6. Width & Height.mp4

04:17

7. Background & Shadow.mp4

05:43

8. Border & Border Radius.mp4

05:44

9. Flexbox.mp4

18:21

10. Buttons.mp4

05:59

11. Grid and Responsiveness.mp4

04:09

2. Section 2

1. Candystore project overview.mp4

02:05

2.1 candy store starter files.zip

2.2 candy-store-final-code.zip

2. Project setup next.js +tailwind css.mp4

02:44

3.1 candy store starter files.zip

3. Add fonts, set up global styles, add images.mp4

02:50

4.1 candy-store template.zip

4. Working with Figma template.mp4

01:08

5. Build Navbar.mp4

04:35

6. Build Burger Menu.mp4

03:20

7. Build Drawer.mp4

12:49

8. Build Hero Section.mp4

06:37

9. Building Main Header.mp4

16:38

10. Build Secondary Header.mp4

04:09

11. Building Footer.mp4

17:07

12. Build Layout.mp4

03:29

13. Build Best Sellers Section.mp4

13:19

14. Build Get Them Now Section.mp4

09:20

15. Build Rating Component.mp4

01:35

16. Build Product Component.mp4

04:07

17. Build Shop Products.mp4

12:11

18. Build Discover More Section.mp4

10:28

19. Build Recommended Section.mp4

07:15

20. Build Promocode component.mp4

05:35

21. Build Subtotal component.mp4

05:14

22. Build Cart Item component part 1.mp4

09:56

23. Build Cart Item component part 2.mp4

11:30

24. Build Cart Page.mp4

06:44

25. Build Category Component.mp4

04:32

26. Build Pagination Component.mp4

06:27

27. Build Candy Color Component.mp4

03:28

28. Build Price Component.mp4

06:11

29. Build Collection page part 1.mp4

11:39

30. Build Collection page part 2.mp4

09:32

31. Build Short Description component.mp4

10:04

32. Build Product Gallery component.mp4

04:50

33. Build AddToCart component part 1.mp4

11:19

34. Build AddToCart component part 2.mp4

07:41

35. Build Item page.mp4

04:38

36. Refactor Item page.mp4

04:02

37. Final refactoring.mp4

07:16

Description

Build candy store using Tailwind CSS and NEXTJS fun project-based course.

What You'll Learn?

Gain confidence using Tailwind Css
Learn how to customize theme and make you website design consistent
Reduce the hours of complicated coding
Learn how to use Figma to speed up development
Learn how to make any project responsive with breakpoints

Who is this for?

Anyone that wants to get better at creating website and UI layouts

People looking for the practical Next JS Tailwind css development guide

More details

Description
Build candy store using Tailwind CSS and NEXTJSÂ fun project-based course. We will start by learningÂ basics of Tailwind CSS.Â Then we going to build a completely responsive candy store website using Tailwind CSSÂ and NEXTJS. Let's take a look at the outline for this course...

FIRSTÂ PARTÂ OFÂ THISÂ COURSE

We will learn all about a certain aspect of Tailwind like typography, margin and padding, box shadows,Â containers, grid, flex e.t.c This allows us toÂ have basic understanding of TailwindÂ and will help to us to start building our main project.

SECONDÂ PARTÂ OFÂ THISÂ COURSE

We going to buildÂ completely responsive multi-page candy store website. Website have very modern and clean-looking design.Â Â In this section we going to build many different components. Also will have a bit of javaScript for things likeÂ drawer menu and showing current page name when navigating to different pages. Â Â You will learn how to add different fonts to project, also howÂ to configure global variables to make you website design consistent.Â
I provide Figma template to this project.Â So you not only gonna learn how to effectively build modern websites, but also how to use Figma to speed up developing process.
This section will give you all the knowledge you need to create powerful projects without the long-winded and time-consuming explanations.
Youâ€™ll learn how to build a beautiful multi-page website with effective user interfaces. Youâ€™ll gain a better understanding of how to make websites that are mobile friendly through in-depth, step by step video instruction, so youâ€™ll never feel overwhelmed.
By the end of the course, you will have developed a clearer understanding of how to useÂ Tailwind CSS and Nextjs as well as harnessing some powerful skills to enable you to create your own stunning websites in less time.

By the end of this course, you will
Gain confidence using Tailwind CSS
Learn how to make any project responsive with breakpoints
Learn how to customizeÂ theme and make you website design consistent
Learn best practices for folderÂ and files structure
Reduce the hours of complicated coding
Build on pre-existing designs
Learn how to use Figma to speed up development
Improve user experiences
Understand how and where to implement UI components
With clear tutorials and one-to-one support available for any questions you might have, this course is ideal for those who are ready to take the next step towards building their career as a frontend developer.
Who this course is for:
Anyone that wants to get better at creating website and UI layouts
People looking for the practical Next JS Tailwind css development guide

User Reviews

Rating

average 0

Total votes0

Focused display

Hi there! I’m a self-taught full stack developer. Through years of hard work and commitment to creating breath-taking projects I would like to share my knowledge with you.My goal is to save you from falling into some of the common, but frustrating, pitfalls that come with this industry, setting you up with the knowledge to achieve success in your career as a full-stack developer.I grew up in Kazakstan before moving to China, and then to Japan, where I’ve continued to improve my skills and expand my knowledge, ready to help you improve your developer skills.I’m passionate about full-stack development and I’ll be right here with you every step of the way. I use React, Nextjs, Typescript, Graphql, AWS , Express in my projects. My passion means I don’t believe in just giving you boring descriptive texts that you’ll have to force your way through and instead I want to encourage learning by guiding you as you build your own projects in real time, giving you a sense of accomplishment and showing your progression as you move through this course.My many years of experience and dedication to programming means that I can show you how to work with the essential programs you need to design stunning websites. If you want to step into the wonderful world of programming, join me and I’ll teach you everything you need to know to get started. I speak 4 languages Chinese, English, Russian and Japanese.

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.