React.js + Next.js from A to Z

Get Up and Running with React.js & Next.js from Scratch

  • Next.js 11+ ready

  • 12 weeks (18h) + 3 weeks final project (30h)

  • Comprehensive introduction to React.js & Next.js

  • It covers TypeScript, Tailwind CSS & GraphQL

  • Instructor with over 15 years of professional experience

I want to participate
(Start: Sep 2021)

For Whom?

The course is tailored for beginners. If you are looking for a gentle introduction to programming, or already programming, but using a programming language other than JavaScript, this course is for you. On top of that, if you need a quick jump-start for learning Next.js, you will also benefit from this offering.

This course is for you, if:

  • you want to learn how to build an interactive website

  • you're looking for a practical introduction to React.js

  • you want to get familiar with modern ways of creating websites

  • you're looking for a simpler introduction to programming than learning about full-stack web applications

This course is NOT for you, if:

  • you know frontend, backend and how to pass data between them

  • you are not interested in React, nor in Next.js

  • you already know how to write web applications and SPAs

Course Structure

Picture of the author

12 week video course

This course contains over 100 lessons and more than 18h of videos. You will get a life-time access along with future updates. Logically arranged material will help you learn React.js and Next.js fast.

Picture of the author

Live Consultations

During the course you will have a chance to interact with the instructor. I'll be available at designed times each week to quickly respond to your questions. The interactions will happen over textual chats and as group video conferences.

Picture of the author

Access to a closed community

Learning alone is hard. This course is not only about the logically arranged content to speed up your learning process, but also it will provide access to a community of fellow learners. Being surrounded by people with similar goals may further increase your motivation and learning capacity.

Topics

This course focuses on 2 main and 9 supplementary topics, that will provide a comprehensive and practical introduction to building basic websites in React.js using Next.js.

The course will be delivered over a period of 12 weeks in a form of an online, video course of about 18 hours and available via a closed platform. During the course the instructor will be available in designed time slots to respond to the participants if necessary. In addition, the participants are obliged to actively take part in weekly summaries as well as timely prepare all the homework. The time needed for the homework is not calculated into the length of this course.

Moreover, all participants will be working (preferably in groups of 2-3 people) for about 3 weeks on a final project, i.e. a custom website of their own design. Each group member will need spend around 20 to 40 hours to deliver this project.

React.js

A JavaScript library for building User Interfaces.

  • Basics of JavaScript & JSX

  • React.js Model: UI = a function of state

  • Components & Composition

  • React Hooks

  • Dynamic CSS Styles

Next.js

Next.js is a React.js, front-end development web framework.

  • Pages, Layouts and Partials

  • Navigation, Menu and Active Links

  • Dynamically Generated Paths

  • Passing Data to Pages and Layouts

  • Data Fetching from Filesystem & Remote Locations

Git

A version-control system for tracking changes in files

  • Repository initialization

  • Tracking code changes

  • Viewing the repository content

REST API

An API built according to REST contrains

  • Web Resources & Collection

  • Paths, Routes and Request Methods

  • Responses & Idempotence

HTML

A markup language for web pages

  • A structure of a web page

  • Layouts with Flexbox & Grid

  • HTML vs JSX

Tailwind CSS

A utility-first CSS Framework

  • A set of utility classes

  • Purging unused CSS classes

  • Configuring plugins, e.g. Tailwind UI

Responsive Web Development (RWD)

A technique to render web pages well on screens of various sizes

  • Breakpoints

  • Conditional CSS

  • Controlling Visibility

TypeScript

A superset of JavaScript that adds optional static typing

  • What are types?

  • Controlling the shape of data

  • Type inference

Markdown

A lightweight markup language with plain-text-formatting syntax

  • Formatting text

  • Data transformations

  • MDX: React.js inside Markdown

Node.js

A runtime environment to execute JavaScript code outside of a web browser

  • Node.js vs Browser

  • Installing Node.js dependencies

  • Modes of execution

Search Engine Optimization (SEO)

A process of improving the website traffic from search engines

  • Setting the page metadata

  • Canonical URLs

  • Introduction to OpenGraph

GraphQL

A data query and manipulation language for APIs

  • Graph Queries

  • Fetching data from remote locations

  • GraphQL integration with YouTube API

Deployment

A process to make a software system available to use

  • Development vs Production enviroments

  • Using Git for Deployment

  • Deployments Previews with Git branches

Hosting

The infrastructure necessary to make the website accessible

  • Running a website in production on Vercel

  • Self-hosting Next.js website

  • Dedicated hosting platforms

Agenda

(work-in-progress, it will certainly change in the upcoming days)

Week 1
Getting Started with Next.js
  • Setting up Next.js with TypeScript & Tailwind CSS
  • Adding pages
  • Navigation & data passing
  • Dynamic & catch-all pages
  • Pre-generating dynamic pages and their paths
  • Static websites & Pre-rendering
Week 2
Prototyping with Tailwind CSS
  • Configuring Tailwind plugins, including Taiwlind UI
  • RWD & Breakpoints in Tailwind CSS
  • Basics of Flexbox & Grid
  • Sticky Navbar with Flexbox & Tailwind CSS
  • Setup navigation for mobile devices
  • Static assets & Images
Week 3
Arranging the Project
  • Pages partials as React.js components
  • Customizing the <head> / <body> sections
  • Layout templates
  • Navigation with active links
  • Displaying collections in React.js
  • React Dev Tools
Week 4
Data management
  • What is YAML
  • Fetching data for Next.js pages from YAML files
  • Using other data formats
  • Building an internationalization (i18n) with YAML
  • Sharing data across with React.js Context
Week 5
Markdown & MDX
  • What is Markdown?
  • Markdown's Frontmatter
  • Using `react-markdown` in Next.js
  • What is MDX?
  • Configuring `next-mdx-remote`
  • Wrapping links in MDX files with `<Link>`
Week 6
Digging Deeper
  • Destructuring props in React.js components
  • Normalizing content for quick access
  • Categorizing content with topics
  • Using dynamic components
Week 7
Search Engine Optimization
  • What is Search Engine Optimization
  • Defining meta attributes per page
  • Introduction to OpenGraph
  • OpenGraph Entities: Article, Video, etc
  • Pre-generated OpenGraph images
  • Configuring SEO with `next-seo`
Week 8
Building APIs
  • What is API?
  • Fetching data from remote locations
  • Making HTTP requests from React.js to endpoints
  • Creating API handlers
  • Server-side routing
Week 9
Forms
  • How HTML forms work
  • Building a form in React.js with `react-hook-form`
  • Forms validation
  • Receiving form submissions in Next.js
  • Building a newsletter integration with MailerLite
Week 10
Using GraphQL
  • Short intro to GraphQL
  • Adventanges of GraphQL
  • Making GraphQL queries
  • Integrating with YouTube API using GraphQL
  • Persisting GraphQL queries server-side
Week 11
Deployment & Hosting
  • Environment variables
  • Development vs Production
  • Deploying with Git + Preview Branches
  • Configuring a custom domain
  • Hosting on Vercel
  • Self-hosting Next.js
Week 12
Finishing up
  • Code highlighting
  • Dynamic CSS classes in React.js
  • Adding Favicon
  • Integrating with FontAwesome
  • Creating a Table of Contents
  • Custom colors in Tailwind CSS

React.js + Next.js from A to Z

Choose Your Package

Pre-Sale Discount until August 31, 2021

The Full Package
€399 €549
off by €150

  • The video course

  • Transcripts to all videos

  • Video consultations

  • Access to a private Discrod channel with the instructor and fellow readers

Buy
Just The Video
€279 €399
off by €120

  • The video course

  • Transcripts to all videos

Buy

Enter your email for updates.

FAQ (Frequently Asked Questions)

Will this course make me a programmer?

Unfortunetly, the answer is no. Each profession requires years of experience. After this course, however, you will have a comprehensive view on building websites in React.js with Next.js. You will be able (on a basic level) to understand different pieces needed to build such websites. This course will be also a good entry point for further exploration of programming and specializtion. It will be easier for you to follow up with the front-end or back-end programming. During the course I will make suggestions on potential next steps. Rembember however this is just the beginning and the road ahead is long!

Is this course in English.

Yes, this course will be conducted in English. The English language is necessary for the programming profession. Additionally there will be subtitles in French, Portugues and Polish.

How does the teaching look exactly?

For 12 weeks we will be discussing various programming concepts. Each module contains not only theory, but practical examples, and there will be a homework afterwards. Each day will provide teaching materials that can span several of those modules. After 12 weeks of lessons we will start a final project that can focus on a real-life scenerio. There will be office hourse with the instructors for each group during that period. At the end, we will do a demo day where each group will be presenting their project.

I've never programmed. Is this course for me?

Yes. This course assumes no prior programming knowledge. At the same time there will be many optional concepts introduced along the way. There is no need for mathematical brain here. In fact, many programmers have humanist background. It is important, however, to be determined, involved and consistent.

What if I realized this course is too difficult, too easy or I simply don't like it ?

You have two weeks to cancel and I will return you the money. No question asked.

Can I have an invoice?

Yes, provide your company details during the purchase

Meet Jakub

Jakub has over 15 years of professional experience. He started his career in 2004 in a Supercomputing & Networking Center where he worked on queue systems for SPARC computers and on the service integration for the Virtual Laboratory project using the SOAP technology. He then worked in Bank Zachodni WBK (nowadays Santander) as a Java/Java EE programmer & architect on various projects related to e-banking, including the flagship Centrum24 project.

He studied Computer Science with Artificial Intelligence in Adam Mickiewicz University & Paris-Sud University. He worked in a computer research laboratory called LIMSI in Paris. He was awarded the French Government scholarship for his work on AI related to the analysis and processing of spatio-temporal information from natural language texts. He also studied digital business and modern technologies at HEC Paris and Telecom Paristech.

Since 2011 he runs a software consultancy in Paris, where he advises corporate clients and public institutions. In the period of 2006 - 2017 he organized various programming conferences as a hobby. In 2006, he started the first programming conference about Ruby & Python in Poland. In 2014-2017 he organized PolyConf, a conference on advanced technologies for programmers interested in polyglot approach to software development. Those conferences were held in Poland, Czech Republic, Hungry, France and Brazil.

He is a recent alumn of the fantastic Recurse Center (you should apply!), an educational retreat for programmers in New York City. During his batch, he worked on improving the JavaScript tooling, notably by building a TypeScript programming environment inspired by Self & Smalltalk called Kretes.