CF

Full-Stack Fundamentals 1 - Frontend

1h 8m 57s
English
Paid

Embark on an exciting journey to create your personal portfolio website from scratch, showcasing your burgeoning skills in software development using AI.

Project Overview

What you will create:

In this project, you'll design and develop a personal portfolio website that includes:

  • A modern and succinct homepage
  • A dedicated projects page to exhibit your work
  • A professional navigation menu
  • Smooth animations and transitions
  • A responsive design that adapts seamlessly to mobile devices

Technologies You Will Use

You will master a cutting-edge frontend stack, including:

  • React: A robust JavaScript library for building user interfaces with reusable components
  • Next.js: A React-based framework offering advanced routing, server actions, and more
  • Tailwind CSS: A utility-first CSS framework for rapid and flexible styling
  • Shadcn: A collection of high-quality, ready-to-use UI components
  • Framer Motion: A library dedicated to crafting animations within interfaces

This technology stack mirrors what real-world development teams utilize, equipping you with applicable and marketable skills.

Skills You Will Learn

Throughout the project, you will gain expertise in the following areas:

  • How to set up a project from scratch using Next.js
  • Fundamentals of Git version control and leveraging the GitHub platform
  • Utilizing AI tools to enhance programming efficiency, specifically within the Cursor editor
  • Creating protocols to guide AI in coding with the intended style
  • Working with components, pages, and layouts in Next.js
  • Adopting modern principles of component architecture in React
  • Styling efficiently with Tailwind CSS
  • Engineering a responsive and adaptive design
  • Deploying pre-designed components to streamline workflow
  • Incorporating sophisticated animations with Framer Motion
  • Successfully deploying a site to the internet

This project serves as your inaugural step towards building an impressive portfolio and mastering contemporaneous tools employed by modern developers.

Additional

https://github.com/mckaywrigley/portfolio-code

About the Author: Mckay Wrigley

Mckay Wrigley thumbnail

Mckay Wrigley is a US developer and AI educator who runs Takeoff AI, an applied-AI engineering academy that has grown into one of the most active LLM-focused course platforms on the market. He publishes daily on X / Twitter, is widely cited for his ChatGPT / Claude-integration tutorials, and has one of the larger independent applied-AI followings.

His CourseFlix listing carries sixteen Takeoff courses — covering everything from foundational LLM-integration with the OpenAI and Anthropic APIs through RAG pipelines, AI-assisted coding workflows, and full-stack AI product builds. Material is paid and aimed at working developers who want to ship AI features into real products rather than read survey-style introductions to the field.

Watch Online 10 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 10 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (10)
#Lesson TitleDurationAccess
1
Introduction Demo
04:13
2
Quick Start
06:05
3
Installing Packages
05:20
4
Initializing Git
09:07
5
Running the App
04:29
6
Creating AI Rules
09:08
7
Building the Landing Page
06:44
8
Header Component
11:05
9
Projects Page
07:42
10
Deploying the Project
05:04
Unlock unlimited learning

Get instant access to all 9 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Prospective students should have a basic understanding of HTML, CSS, and JavaScript as this course involves developing a frontend using advanced technologies like React and Next.js. Familiarity with using version control systems, specifically Git, will also be beneficial since the course includes initializing Git and leveraging GitHub.
What will I build by the end of the course?
By the end of the course, you will have designed and developed a personal portfolio website. This includes a modern homepage, a projects page to showcase your work, a professional navigation menu, smooth animations and transitions, and a responsive design that works well on mobile devices.
Who is the target audience for this course?
The course is designed for aspiring web developers looking to enhance their frontend development skills. It is particularly suited for individuals interested in mastering a modern frontend stack used in industry settings, including React, Next.js, and Tailwind CSS.
How does this course compare in depth and scope to similar courses?
This course focuses on mastering a specific frontend stack with a strong emphasis on practical application through project work. It covers setting up projects from scratch, Git version control, and using AI tools for coding efficiency, which may not be as extensively covered in other introductory web development courses.
What specific tools and technologies will I learn to use?
You will learn to use React for building user interfaces, Next.js for advanced routing and server actions, Tailwind CSS for styling, Shadcn for UI components, and Framer Motion for creating animations. Additionally, you'll use the Cursor editor to enhance programming efficiency with AI.
What topics are not covered in this course?
The course does not cover backend development or database management. The focus is entirely on frontend development, utilizing a specific stack to build a personal portfolio website. Advanced topics beyond the scope of building a single-page application are not addressed.
What is the time commitment required for this course?
The course consists of 10 lessons, although the exact runtime is not specified. Students should allocate time for both the lessons and hands-on project work to fully develop their personal portfolio website, as practical application is a key component of the learning process.