{"overview":{"title":"Learn DApps on Flow","contentType":"course","certificateIncluded":true,"excerpt":"In this course, you will build a DApp on the Flow blockchain. You will learn the major aspects of DApp development.","author":{"name":"Jacob Tucker","socialMediaUrl":"https://twitter.com/jacobmtucker","avatarUrl":"/avatars/jacob.jpeg","isVerified":true,"walletAddress":"0x99bd48c8036e2876"},"metadata":{"expertise":"Beginner","duration":"5 chapters","prerequisites":["javascript"],"subjects":["dapp","web","cadence","javascript"],"price":"Free","faqs":[{"question":"📖 What is this course?","answer":"You will explore how to make a DApp on the Flow blockchain. During the bootcamp, you will learn the major aspects of DApp development, including:

Next.js (a front-end framework)
Cadence (smart contract development)
FCL (Flow Client Library)
CSS (for styling)

During the course, we will be creating a DApp together. However, after completing the course, you will have the knowledge to develop your own DApps too."},{"question":"🚀 What will I know by the end?","answer":"

An intro to the Flow blockchain (Chapter 1)
Do some front-end development (Chapter 2)
How to do basic styling (Chapter 2)
How to make your own DApp (Chapters 2-5)
How to do some Cadence coding (Chapter 3)
Connect your DApp to the blockchain (Chapter 3-5)

"},{"question":"🔖 What will I create?","answer":"Click here to see what you will be creating."},{"question":"😇 Who is this course NOT meant for?","answer":"

People who have already created very basic DApps using FCL. This will be too boring for you.

"},{"question":"📚 How does it work?","answer":"The lessons will be split into 'chapters,' and chapters will be split into 'lessons.' I did it this way so you can manage your time and progress through the course as you like. Do not feel pressured to do this every lesson. Do it at your own pace and have fun with it! It will always be here :)

Here's an overview:

Lessons split into lessons
Written & video content associated with each lesson. The videos will be from my YouTube Channel.
Quests to complete
Short quizzes
A completion certificate (this FLOAT) if you have completed all the quests from Chapters 1-5 (Chapter 6 is extra credit). This will be proof that you have significant Cadence knowledge, and you will be able to show it to whoever you like as proof of expertise. Or just for fun! :D

"},{"question":"❓ What do I need ahead of time?","answer":"Nothing!"},{"question":"📁 What are quests?","answer":"Quests are like homework assignments. There are quests for every lesson of content. They will test your understanding of the concepts that are in that lesson's content."},{"question":"🙋 How do I submit quests?","answer":"When you finish a quest, please store all your quests together. Then, when you want them to be reviewed, submit them in the #quest-submissions channel inside the Emerald City Discord and our instructors will review them."}]},"slug":"courses/beginner-dapp"},"contents":{"chapter1":{"overview":{"title":"Basic Concepts","description":"Learn the basics of the Flow Blockchain and the Cadence smart contract programming language."},"contents":[{"slug":"en/catalog/courses/beginner-dapp/chapter1/lesson1","metadata":{"title":"Learning Blockchain Concepts","lesson":1,"language":"en","excerpt":"basic blockchain concepts","headings":[{"level":1,"title":"Chapter 1 Lesson 1 - Learning Blockchain Concepts"},{"level":2,"title":"What the heck is a Blockchain?"},{"level":2,"title":"Smart Contracts? Ooo, that sounds cool."},{"level":2,"title":"Transactions & Scripts"},{"level":2,"title":"“MainNet” vs. “TestNet”"},{"level":2,"title":"Decentralized Applications (DApps)"},{"level":2,"title":"Why do I care about all this?"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter1/lesson2","metadata":{"title":"The Flow Blockchain & Cadence","lesson":2,"language":"en","excerpt":"basic Flow blockchain & Cadence concepts","headings":[{"level":1,"title":"Chapter 1 Lesson 2 - The Flow Blockchain & Cadence"},{"level":2,"title":"The Flow Blockchain"},{"level":3,"title":"Little History Lesson"},{"level":3,"title":"Facts about Flow"},{"level":2,"title":"Cadence"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}}]},"chapter2":{"overview":{"title":"Learning Web Development","description":"Taking our first dive into web development technologies: HTML, CSS, and Javascript."},"contents":[{"slug":"en/catalog/courses/beginner-dapp/chapter2/lesson1","metadata":{"title":"Creating our DApp","lesson":1,"language":"en","excerpt":"Creating our DApp","headings":[{"level":1,"title":"Chapter 2 Lesson 1 - Creating our DApp"},{"level":1,"title":"IMPORTANT NOTE"},{"level":2,"title":"What is Next.js?"},{"level":3,"title":"Frontend"},{"level":3,"title":"Backend"},{"level":3,"title":"Back to Next.js"},{"level":2,"title":"Installing Stuff"},{"level":2,"title":"Creating Our DApp"},{"level":2,"title":"Launching Our DApp"},{"level":2,"title":"What is displayed on the screen?"},{"level":2,"title":"Styling"},{"level":2,"title":"Storing our DApp in Github"},{"level":3,"title":"Create a New Repository"},{"level":3,"title":"Pushing to Our Repository"},{"level":3,"title":"Making Changes"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter2/lesson2","metadata":{"title":"Learning Frontend Code","lesson":2,"language":"en","excerpt":"Learning Frontend Code","headings":[{"level":1,"title":"Chapter 2 Lesson 2 - Learning Frontend Code"},{"level":2,"title":"What are HTML & CSS?"},{"level":2,"title":"Remove Boilerplate Code"},{"level":2,"title":"Understanding What We Just Did"},{"level":2,"title":"Understanding the Styling"},{"level":2,"title":"Learn More"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter2/lesson3","metadata":{"title":"Adding Javascript Code","lesson":3,"language":"en","excerpt":"Adding Javascript Code","headings":[{"level":1,"title":"Chapter 2 Lesson 3 - Adding Javascript Code"},{"level":2,"title":"What is Javascript?"},{"level":2,"title":"Adding Some Javascript"},{"level":2,"title":"Developer Console"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter2/lesson4","metadata":{"title":"Finishing the Skeleton","lesson":4,"language":"en","excerpt":"Finishing the Skeleton","headings":[{"level":1,"title":"Chapter 2 Lesson 4 - Finishing the Skeleton"},{"level":2,"title":"Adding a Navigation Bar"},{"level":3,"title":"Creating a New Component"},{"level":3,"title":"Adding Some Code"},{"level":3,"title":"Making it Less Ugly"},{"level":2,"title":"Adding an Input Field"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}}]},"chapter3":{"overview":{"title":"Cadence Development","description":"Implementing some very basic Cadence stuff for our DApp."},"contents":[{"slug":"en/catalog/courses/beginner-dapp/chapter3/lesson1","metadata":{"title":"Our First Smart Contract","lesson":1,"language":"en","excerpt":"Our First Smart Contract","lessonVideoUrl":"https://www.youtube.com/embed/QbqNM4k76B0","lessonVideoDescription":"Overview of smart contracts, accounts, and deploying our first contract","headings":[{"level":1,"title":"Chapter 3 Lesson 1 - Our First Smart Contract"},{"level":2,"title":"Our First Smart Contract"},{"level":3,"title":"What’s an address?"},{"level":3,"title":"Where do smart contracts live?"},{"level":3,"title":"Back to our example…"},{"level":2,"title":"Reading our Greeting"},{"level":2,"title":"Concept Check"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter3/lesson2","metadata":{"title":"Transactions and Scripts","lesson":2,"language":"en","excerpt":"Transactions and Scripts","lessonVideoUrl":"https://www.youtube.com/embed/T2QTTFnQa5k","headings":[{"level":1,"title":"Chapter 3 Lesson 2 - Transactions and Scripts"},{"level":2,"title":"Transactions & Scripts"},{"level":2,"title":"Transactions vs. Scripts"},{"level":2,"title":"Scripts"},{"level":2,"title":"Transactions"},{"level":3,"title":"Accounts on Flow"},{"level":3,"title":"Back to our Example"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter3/lesson3","metadata":{"title":"Bringing Cadence to our DApp & Deploying our Contract","lesson":3,"language":"en","excerpt":"Bringing Cadence to our DApp & Deploying our Contract","headings":[{"level":1,"title":"Chapter 3 Lesson 3 - Bringing Cadence to our DApp & Deploying our Contract"},{"level":2,"title":"Installing the Cadence VSCode Extension"},{"level":2,"title":"Installing the Flow CLI & flow.json"},{"level":2,"title":"Flow Folder"},{"level":3,"title":"flow.json"},{"level":2,"title":"Deploying our Greeting Contract to TestNet"},{"level":2,"title":"Configuring flow.json"},{"level":2,"title":"Creating an Account"},{"level":2,"title":"Interacting with our Contract"},{"level":3,"title":"Informing flow.json of our Deployed Contract"},{"level":3,"title":"Reading our Greeting"},{"level":3,"title":"Changing our Greeting"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}}]},"chapter4":{"overview":{"title":"Learn FCL","description":"Connecting our DApp to the blockchain using the Flow Client Library (FCL)."},"contents":[{"slug":"en/catalog/courses/beginner-dapp/chapter4/lesson1","metadata":{"title":"Connecting the Blockchain","lesson":1,"language":"en","excerpt":"Connecting the Blockchain","headings":[{"level":1,"title":"Chapter 4 Lesson 1 - Connecting the Blockchain"},{"level":2,"title":"Installing FCL"},{"level":2,"title":"Importing & Connecting FCL"},{"level":2,"title":"Loggin In"},{"level":3,"title":"Making our Button Respond"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter4/lesson2","metadata":{"title":"Running a Script","lesson":2,"language":"en","excerpt":"Running a Script","lessonVideoUrl":"https://www.youtube.com/embed/XjderBnmPtU","lessonVideoDescription":"If you watch this video, it will help you understand the content for today. Note that they are different, but the concept is the same.","headings":[{"level":1,"title":"Chapter 4 Lesson 2 - Running a Script"},{"level":2,"title":"Quick Overview of Scripts"},{"level":2,"title":"Executing a Script using FCL"},{"level":2,"title":"Seeing our Greeting"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter4/lesson3","metadata":{"title":"Passing in Arguments to a Script","lesson":3,"language":"en","excerpt":"Passing in Arguments to a Script","lessonVideoUrl":"https://www.youtube.com/embed/w9UFsv5wqo4","lessonVideoDescription":"If you watch this video, it will help you understand the content for today. Note that they are different, but the concept is the same.","headings":[{"level":1,"title":"Chapter 4 Lesson 3 - Passing in Arguments to a Script"},{"level":2,"title":"Important Note"},{"level":2,"title":"Quick Overview of Yesterday"},{"level":2,"title":"Passing in Arguments Using FCL"},{"level":3,"title":"Different Types"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter4/lesson4","metadata":{"title":"Finishing the Skeleton","lesson":4,"language":"en","excerpt":"Finishing the Skeleton","headings":[{"level":1,"title":"Chapter 4 Lesson 4 - Sending a Transaction"},{"level":2,"title":"Quick Overview of Transactions"},{"level":2,"title":"Overview of What We Have So Far"},{"level":2,"title":"Sending Transactions Using FCL"},{"level":2,"title":"What is the transactionId?"},{"level":2,"title":"Updating the Displayed Greeting After Transaction"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}}]},"chapter5":{"overview":{"title":"Finish & Deploy","description":"Learn how to deploy your DApp and deploy your contract to Flow Testnet."},"contents":[{"slug":"en/catalog/courses/beginner-dapp/chapter5/lesson1","metadata":{"title":"Finishing our DApp","lesson":1,"language":"en","excerpt":"Finishing our DApp","headings":[{"level":1,"title":"Chapter 5 Lesson 1 - Finishing our DApp"},{"level":2,"title":"Styling"},{"level":3,"title":"./pages/index.js"},{"level":3,"title":"./styles/globals.css"},{"level":3,"title":"./styles/Home.module.css"},{"level":2,"title":"Transaction Loading State"},{"level":3,"title":"Quick Modifications"},{"level":3,"title":"Tracking Loading State"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}},{"slug":"en/catalog/courses/beginner-dapp/chapter5/lesson2","metadata":{"title":"Deploying our DApp","lesson":2,"language":"en","excerpt":"Deploying our DApp","headings":[{"level":1,"title":"Chapter 5 Lesson 2 - Deploying our DApp"},{"level":2,"title":"Vercel"},{"level":2,"title":"Conclusion"},{"level":2,"title":"Quests"}]}}]}},"slug":"beginner-dapp"}

Learn DApps on Flow

Basic Concepts

Learning Web Development

Cadence Development

Learn FCL

Finish & Deploy

Frequently asked questions

📖 What is this course?

🚀 What will I know by the end?

🔖 What will I create?

😇 Who is this course NOT meant for?

📚 How does it work?

❓ What do I need ahead of time?

📁 What are quests?

🙋 How do I submit quests?