Ultimate Next.js 14 Portfolio Website (Zero To Hero) 2024

Focused View

Ehizeex Okwuose

10:13:47

266 View

1. Introduction

1. Introduction.mp4

02:46

2. How To Use The Website. Very Important.mp4

03:01

3. Website Demo.mp4

08:57

2. Introduction To Nextjs

1. What Exactly is Nextjs.mp4

01:31

2. Nodejs Installations.mp4

02:52

3. Visual Studio Code Installations.mp4

02:48

4. Visual Studio Code Extensions.mp4

02:51

5. Nextjs Installations.mp4

03:46

6. Nextjs Boiler Plate.mp4

04:57

7. Clean up the boiler plate.mp4

01:54

8. App Router.mp4

05:30

9. Nexted Route.mp4

02:48

10. Dynamic Route.mp4

09:14

11. Nexted Dynamic Route.mp4

05:01

12. Error Page.mp4

02:31

13. File Colocation.mp4

02:52

14. Private Route.mp4

02:50

15. Route Group.mp4

06:48

16. Layout.mp4

05:02

17. Layout Route Group.mp4

08:49

18. MetaData Routing.mp4

08:26

19. Title Field (Title metadata).mp4

07:10

20. Links and Navigations.mp4

08:26

21. Conditionally style a link.mp4

10:29

22. error message (error handling).mp4

06:09

23. Template.mp4

05:02

24. Loading bar.mp4

02:37

3. Building the ultimate Nextjs 14 Portfolio website

1. Nodejs and VsCode Installation. Installing Vs code Extension.mp4

05:16

2. Nextjs13 Installation.mp4

04:08

3. Project Structure.mp4

04:23

4. Import and Settings.mp4

04:10

4. Home Component Design

1. Home Layout SetUp.mp4

03:05

2. Home Layout Breakdown.mp4

01:49

3. Home Item Design.mp4

20:34

4. Skill box Design.mp4

11:52

5. Code Resource.html

5. Header Component

1. Window on-scroll event.mp4

08:49

2. Implement pageYoffSet.mp4

04:36

3. Navigation Links.mp4

08:27

4. Header navigation drawer Menu.mp4

07:24

5. Home Link Challenge.mp4

02:34

6. Open and close navigation menu button.mp4

09:19

7. Menu Drawer Navigation Links.mp4

13:24

8. Navigation Drawer Challenge (Fixing the height ).mp4

01:44

9. Navigation Drawer Social Media Icons.mp4

09:28

6. Portfolio Component

1. Portfolio screen layout and item display.mp4

11:37

2. Portfolio Card.mp4

19:08

3. Portfolio card slider implementation.mp4

06:13

4. Dynamic Route.mp4

07:20

5. Get the id on a new page (Dyamically).mp4

05:23

6. Portfolio Header overlay.mp4

10:04

7. Portfolio Single page Design (Portfolio Detail Design).mp4

13:12

8. Portfolio Space Challenge (Assignment).mp4

02:04

9. Next and Previous Button.mp4

14:32

7. AboutMe Component And Design

1. About-me Layout Set-up.mp4

14:21

2. About Me Logic.mp4

06:31

3. Grid Button Implementation.mp4

21:20

4. Skill Card display.mp4

11:52

5. Skill Count.mp4

06:02

6. Button Flip.mp4

07:19

7. Flip Animation.mp4

07:37

8. Testimonial Component Design

1. Testimonial slider settings.mp4

04:10

2. Testimonial slider design.mp4

16:17

9. Footer Component Design

1. Footer Badge.mp4

09:47

2. Footer Icons.mp4

08:59

3. Footer Items.mp4

07:01

4. Display Social Media Icons.mp4

09:12

5. Footer Menu on Mobile Device.mp4

12:52

6. Footer Drop Down Menu on Mobile Device.mp4

07:47

10. Contact Page (Contact form and Node mailer Implementation)

1. Contact Page Header Design.mp4

13:40

2. Contact Page Menu Card.mp4

17:14

3. Contact Form Layout.mp4

16:20

4. Contact Form.mp4

10:55

5. Controlled Input (Contact Form).mp4

11:01

6. Node amiler API Using Nextjs13.mp4

14:45

7. API Consumption.mp4

09:17

8. Progress Bar.mp4

04:18

11. Call To Action Button

1. Call to action button implementation and logic.mp4

07:45

12. Bug Fixes and Final Touches

1. Header Fixes.mp4

08:10

2. Slider Fix on Mobile Device.mp4

03:33

Description

Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework (Learn By Doing)

What You'll Learn?

Students will learn how to se react hooks in Nextjs
Students will learn how to use react components in Nextjs13
Students will learn how to switch from Nextjs default server side rendering to client side rendering
Students will learn the best practices for building a professional nextjs website
Students will learn and understand the tailwind utility classes
Mobile Friendly Development (Mobile Responsiveness)
Node mailer (how to implement email functionality using NodeMailer)
Students will learn how to create their own API Using Nexts
Students will learn and understand the concept of design patterns
Dynamic routing system in Nextjs will be explained
Nextjs13 Page routing system will be explained
Students will learn how to push the project to github
Student will learn how to deploy their project to vercel (live server)

Who is this for?

Beginner of Javascript, React, Nextjs13, who want to learn how to build professional web apps

All the students who wants to create the responsive website design or development to showcase their projects to their employers

Students who want a Creative Next Level Portfolio Website

Students who want to build Real world website design

Students who want to mater Nextjs13 concepts

Students who want to deploy their personal portfolio website on a live server

What You Need to Know?

Java script

HTML CSS

REACT JS

To feel comfortable in the course you need to know Basic HTML & CSS and Basic Javascript (variables, objects, arrays, functions)

More details

Description
This course will teach you how to create attractive online applications with Nextjs.14, Reactjs, TailwindCss, Nodemailer, and a variety of utilities. I will take you step by step from the beginning to the end of the deployment process.
You will be able to deploy the website on a Vercel server and publish the source code to GitHub before the end of this course.
We will also learn how to send portfolio details to a new page using Nextjs 14 Dynamic Route. (Single post page)
The data will be dynamically presented.
Smooth Scrolling and Fade In Animation will be taught to students.
Students will learn how to create a scrolling effect.

You will learn how to create downloadable PDF files, which we have implemented.on the get resume Button
You will learn how to implement the call to action button using the scroll condition
Student will be able to differentiate between Reactjs route and Nextjs Route
The instructor will teach you how to open up a new page in Nextsj.14
The instructor will teach you how to receive and send thousands of email using Nodemailer
Student will learn how create API using Nextjs and Nodemailer

The Link to theÂ Complete Source code and material i used in this course will be in the resource.
Welcome to The Ultimate NextJs 14Â Portfolio Web Development Course!

Who this course is for:
Beginner of Javascript, React, Nextjs13, who want to learn how to build professional web apps
All the students who wants to create the responsive website design or development to showcase their projects to their employers
Students who want a Creative Next Level Portfolio Website
Students who want to build Real world website design
Students who want to mater Nextjs13 concepts
Students who want to deploy their personal portfolio website on a live server

User Reviews

Rating

average 0

Total votes0

Focused display

Experienced Senior Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in React Native, RDBMS, Java, Android Development, and JavaScript. Strong engineering professional with a Bachelor's degree focused in Information Technology from Legon University.I am the CEO Ehizeex Tech and I have trained many aspirant computer science students and software professionals one-on-one in various software practices all over the world. I am currently creating online courses for different online learning platforms and working However, It is my pleasure to teach people skills that help them in their careers, allow them to acquire new skills and get a good job.

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.