CF

Full-Stack Fundamentals 1 - Frontend

1h 8m 57s
English
Paid
Updated September 2026

Full-Stack Fundamentals 1 - Frontend is a 10-lesson 1 hour 8 minutes self-paced course by Mckay Wrigley. The first project in this series has you build a personal portfolio site from scratch, using it as the vehicle for learning a modern frontend stack and an AI-assisted workflow with the Cursor editor.

Course facts

Lessons
10
Duration
1 hour 8 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Mckay Wrigley
Price
Premium

The first project in this series has you build a personal portfolio site from scratch, using it as the vehicle for learning a modern frontend stack and an AI-assisted workflow with the Cursor editor.

What you'll build

  • A clean, modern homepage
  • A projects page to showcase your work
  • A professional navigation menu with smooth transitions
  • A fully responsive layout for mobile devices

The stack

React for reusable components, Next.js for routing and server actions, Tailwind CSS for styling, Shadcn for ready-made UI components, and Framer Motion for animation — the same combination used by real product teams.

What you'll learn

Across 10 lessons, you'll set up a Next.js project from scratch, use Git and GitHub properly, write AI coding protocols to guide Cursor toward your intended style, structure components/pages/layouts the modern React way, and deploy the finished site live on the internet.

Additional

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

Who teaches Full-Stack Fundamentals 1 - Frontend? 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.

What lessons are included in Full-Stack Fundamentals 1 - Frontend?

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

What courses are similar to Full-Stack Fundamentals 1 - Frontend?

More courses by Mckay Wrigley

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.