In this 1.5-hour long guided project, you will learn how to build an optimized website using Next.js. We do this by building the website step by step using Microsoft Visual Studio code and Next.js command line tools. To ensure that the users have a pleasant browsing experience, we will use Next.js optimized components instead of traditional HTML elements. You will also learn how to apply global and local styles to avoid class name collision. This project is aimed at learners who already know how to build a website using traditional methods or other frameworks other than Next.js.
Optimization with Next.js: Build a Product Portfolio Website
Optimization with Next.js: Build a Product Portfolio Website
Instructor: Harrison Kong
Access provided by BNP Paribas Cardif 1
Learn, practice, and apply job-ready skills with expert guidance
Intermediate level
Recommended experience
1.5 hours
Learn at your own pace
Hands-on learning
What you'll learn
Assemble a static website using Next.js
Describe the optimization features of Next.js
Utilize Next.js components to optimize response time and network traffic
Skills you'll practice
Details to know
Shareable certificate
Add to your LinkedIn profile
Taught in English
No downloads or installation required
Only available on desktop
See how employees at top companies are mastering in-demand skills
Learn, practice, and apply job-ready skills in less than 2 hours
- Receive training from industry experts
- Gain hands-on experience solving real-world job tasks
- Build confidence using the latest tools and technologies
About this Guided Project
Learn step-by-step
In a video that plays in a split-screen with your work area, your instructor will walk you through these steps:
Task 1: Project Overview
Task 2: Create the Starter Project Files
Task 3: Add a Feature Gallery with Optimized Images
Optional Practice: Take a Quiz to Test Your Knowledge
Task 4: Apply Global Styles to the Website
Task 5: Apply Local Styles to the Website
Task 6: Create a Layout Template
Optional Practice: Add a Pre-order and Investor Page
Task 7: Optimize Font Loading
Optional Cumulative Challenge: Bench & Sofa
Recommended experience
In order to succeed in this project, learners need to have at least intermediate level knowledge of JavaScript, React, HTML, and CSS.
9 project images
Instructor
Offered by
How you'll learn
Skill-based, hands-on learning
Practice new skills by completing job-related tasks.
Expert guidance
Follow along with pre-recorded videos from experts using a unique side-by-side interface.
No downloads or installation required
Access the tools and resources you need in a pre-configured cloud workspace.
Available only on desktop
This Guided Project is designed for laptops or desktop computers with a reliable Internet connection, not mobile devices.
Why people choose Coursera for their career
Felipe M.
Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
You might also like
Coursera Project Network
Coursera Project Network
Coursera Instructor Network
Coursera Project Network