Nextjs 14, Tailwind Css Create Modern Portfolio Website

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

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

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.

Overview

Section 1: Resources & Requirements

Lecture 1 Prerequisite

Lecture 2 Download Source Code

Section 2: Next JS Basics

Lecture 3 Create Next.js Project

Lecture 4 Next.js Folder Structure

Lecture 5 Next.js Routing

Lecture 6 Next.js Server Side vs Client Side Components

Lecture 7 What is Tailwind CSS?

Lecture 8 Set Font Family

Section 3: Dark and Light Theme Setting

Lecture 9 Section Intro

Lecture 10 Install Next Themes Package

Lecture 11 Create Switch Component

Lecture 12 Make Switch Component Dynamic

Section 4: Header

Lecture 13 Section Intro

Lecture 14 Let's Start Header Section

Lecture 15 Add More Header Data

Lecture 16 Make Header Responsive

Section 5: Contacts & About

Lecture 17 Intro

Lecture 18 Setup Data For Contacts Section

Lecture 19 Style Contacts Section

Lecture 20 About Section Data

Lecture 21 Style About Section

Section 6: Skills

Lecture 22 Intro

Lecture 23 Skills Data

Lecture 24 Loop Skills Array

Section 7: Work History

Lecture 25 Intro

Lecture 26 Work History Section Data

Lecture 27 Use Work History Data

Lecture 28 Loop Skills and Options

Section 8: Projects

Lecture 29 Intro

Lecture 30 Projects Data

Lecture 31 Use Projects Data

Lecture 32 Image Aspect Ratio

Lecture 33 Create Model

Lecture 34 Make Model Dynamic

Lecture 35 Display Project Details in Model

Section 9: Reviews

Lecture 36 Intro

Lecture 37 Reviews Data

Lecture 38 Loop Reviews

Lecture 39 Masonry Layout

Lecture 40 Show More Button

Lecture 41 Create Footer Component

Section 10: Deployment

Lecture 42 Upload Source Code on Github

Lecture 43 Deploy on Vercel

Lecture 44 Fix Issue

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