Nextjs 14, Tailwind CSS Create Modern Portfolio Website

Name: Nextjs 14, Tailwind CSS Create Modern Portfolio Website
Rating: 4.8 (10 reviews)

Master Nextjs 14 and Tailwind CSS: Build Your Own Cutting-Edge Portfolio Website with Modern Techniques

Created byShakil Khan

Last updated 2/2024

English

What you'll learn

You will learn Next js 14
You will learn Tailwind css
You will learn clean coding
You will learn dark and light theme
You will learn masonry layout
You will learn how to maintain the image aspect ratio

Course content

10 sections • 44 lectures • 4h 40m total length

Prerequisite1:58
In this video, I will talk about the prerequisite for this course, in this course we will use nextjs and nextjs is a reactjs framework so before this vidoe you must know the basics of reactjs, and second vs code must be installed in your computer and third nodejs must be installed in your computer.
Download Source Code4:02
In this video, I will show you from where you can get the final project source code, actually I have uploaded source code on github and from there you can download the source code.

Create Next.js Project4:02
In this video, we will create a new nextjs 14 project.
Next.js Folder Structure3:29
Nextjs and tailwind css, In this video I will explain the folder structure of nextjs 14.
Next.js Routing6:49
Next js Tailwind css, In this video I will explain you the next js routing system, that how next js routing works.
Next.js Server Side vs Client Side Components4:09
Nextjs and Tailwindcss, in this video we will talk about next js server side components and client side components.
What is Tailwind CSS?6:47
Next js and Tailwindcss, in this video we are going to explore Tailwind css that what is tailwindcss and why to use tailwind css, Tailwind css is a utility based css framework for building custom user interfaces unlike bootstrap because bootstrap gives you free build components but in Tailwind css we can create our own buttons, forms, tables etc.
Set Font Family5:09

Section Intro0:31
In this video, I will give you the overview of this section that, what we will do in this section.
Install Next Themes Package10:37
Nextjs, Tailwind css, in this video we will install the next-themes package, it basically help use the switch between dark and light theme.
Create Switch Component8:52
Nextjs 14 and Tailwindcss, in this video, we are going to create a switch component.
Make Switch Component Dynamic8:37
Nextjs and Tailwindcss, in this video will make the switch component dynamic.

Section Intro0:19
In this video, I will give an overview of this section, that we will do in this section.
Let's Start Header Section13:06
Nextjs 14 and Tailwindcss, in this video we will start the header section.
Add More Header Data14:41
Nextjs 14 and Tailwindcss, in this video, we will add more data about the user like job title, address, education, and experience.
Make Header Responsive7:26
In this video, we will make the header section responsive.

Intro0:26
In this video, I will give you an overview of this section that will do actually in this section.
Setup Data For Contacts Section6:10
In this video, we are going to, setup data for the contacts section.
Style Contacts Section17:59
In this video, we will style the contacts section which we created in the previous video.
About Section Data5:46
In this video, we will add data of the about section.
Style About Section7:37
In this video, we will style the about section, in the previous video we created data for the about section now we will style that data.

Intro1:02
In this video, I will give you an overview of this section actually what we will create in this section.
Projects Data2:33
In this video, we will set data for projects section.
Use Projects Data10:07
In this video, we will use the projects array, simply we will loop the projects array.
Image Aspect Ratio5:23
In this video, we will talk about an image aspect ration, that what is aspect ratio and how to use aspect ration.
Create Model9:49
In this video, we will create a model for project details because so far we have displayed only project image, title and description now if we want to see all project details for that we need model.
Make Model Dynamic7:48
In this video, we will make the model dynamic which means we have to add open and close model functionality.
Display Project Details in Model16:09
In this video, we will display the project details in the model component.

Intro0:46
Reviews Data7:31
In this video, we will setup data for the reviews section.
Loop Reviews9:14
In this video, we are going to loop the review array we have already the reviews array we just need to import it and loop it.
Masonry Layout5:31
In this video, we will use a masonry layout, Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise to fill the gaps.
Show More Button9:45
In this video, we are going to create show more button, initially we will show only 6 reviews and when we click on show more button then we will show 6 more reviews.
Create Footer Component4:09
In this video, we are going to create the footer component.

Upload Source Code on Github5:21
In this video, we will upload our project on github.
Deploy on Vercel5:59
In this video, we are going to deploy our website on vercel.
Fix Issue3:51
In this video, we are going to fix one issue and the issue is project images and testimonials cards overlapping the theme switch component, and to solve that problem simply we have to increase z index of theme switch component.

Requirements

Basic React knowledge is required

Description

Embark on a journey to master NextJS 14 and Tailwind CSS with our comprehensive Udemy course designed to empower you in building a cutting-edge portfolio website. Whether you're a seasoned developer looking to level up your skills or a beginner eager to dive into the world of modern web development, this course is tailored to suit your learning needs.

With NextJS 14, you'll harness the power of server-side rendering, static site generation, and seamless client-side navigation, all while enjoying the benefits of a streamlined development experience. You'll learn to leverage Next JS's efficient routing system, enabling you to create dynamic web applications with ease.

In parallel, you'll explore the versatility of Tailwind CSS, a utility-first CSS framework that enables rapid UI development without sacrificing flexibility or design freedom. By mastering Tailwind CSS, you'll discover how to craft visually stunning layouts and responsive designs effortlessly.

Throughout the course, you'll follow along with practical, hands-on tutorials, where you'll build a modern portfolio website from scratch. From structuring your project to styling components and implementing interactive features, you'll gain invaluable insights and best practices every step of the way.

By the end of this course, you'll not only have a polished portfolio website to showcase your skills but also a deep understanding of NextJS 14 and Tailwind CSS, empowering you to tackle a wide range of web development projects with confidence. Enroll now and unlock the secrets to creating professional-grade websites with NextJS and Tailwind CSS.

Who this course is for:

For everyone who's want to enhance their nextjs and tailwindcss skills

Nextjs 14, Tailwind CSS Create Modern Portfolio Website

What you'll learn

Explore related topics

Course content

Resources & Requirements2 lectures • 6min

Next JS Basics6 lectures • 30min

Dark and Light Theme Setting4 lectures • 29min

Header4 lectures • 36min

Contacts & About5 lectures • 38min

Skills3 lectures • 14min

Work History4 lectures • 23min

Projects7 lectures • 53min

Reviews6 lectures • 37min

Deployment3 lectures • 15min

Requirements

Description

Who this course is for: