Why not just go straight to Vibe Coding?

Honestly, you could easily decide to skip this and go straight to vibe coding and prototyping. If you just want to build a prototype and then hand it off to someone more technical that can be a pretty good approach. However, this class is a great way to get a foundation in coding and programming concepts so that you can better understand the concepts and tools used in coding. In turn this will help you build better prototypes and make your vibe coding more efficient and effective. Additionally, you can then teach yourself most of the rest of what you need to know to become an engineer by simply asking the right questions in your Cursor Chat window!

If you just want to skip this and go straight to prototyping, you can do that too. If so, you can download the Cursor.AI App on your mac and select from any of the latests models from the OpenAI, Anthropic, or Google family of models. It is easiest to prototype in web, instead of native apps, so that you can quickly test locally without an emulator and then deploy into production for all of your friends to see using Heroku. You can also use Supabase for your databases and authentication.

What is Front End Web Development?

Web Development includes both front end and back end development. Front end development refers to developing front end code to deliver what yousee on webpage. Back end development refers to developing back end code to handle data and complex computing, and connecting and deploying both.

Front End Code creates what you see when you view a website (e.g., text, pictures,…)

• HTML gives website basic skeletal structure, written text, pictures, and links (like your bones)
• CSS makes site look good through formatting (like your skin and make-up)
• JavaScript provides site with functionality (like your muscles) and basic computation ability

Back End Code connects site and user input with a server and database so that you can store data, create user accounts with login’s,…

• Python is similar to JavaScript but sits on site’s server and is used for accessing and updating data and typically performs more complex functions (like your brain)
• Flask, SQL-Alchemy, psycopg2 are all free libraries written in python that we will use to more easily create connections to our database
• SQL is a very simply language used strictly for interacting and querying databases

Useful tools and deployment:

• GitHub is online platform where you can save and share work and version control
• PostgreSQL is simple but high powered database that allows you to store data
• Heroku is an application that makes it even easier to deploy code on AWS

What is full stack web development? It let’s you build and deploy websites!!

Class Structure

• Build real stuff! Most courses teach you fundamentals while you build in sandboxes (i.e. something that is not actually useful); We prefer to building things that are useful!
• Self-paced. Fast or slow, your choice. As you move from section to section, you will work with different students and different teacher assistants who are experts in that module.
• Modular! We assume you know almost nothing, but if you do, don’t worry…this course, it is set up to be modular, meaning that you can quickly skip through parts you already know; Tests at end of each section check to make sure you really know it; Cheat sheets also allow you to scan material quickly
• Mentors to help debug! One of the most difficult and frustrating parts about learning to program is not learning the concepts, but trying to figure out why your program doesn’t work. Our teachers will be here to help. Don’t spend hours looking for a missing semi-colon.
• Learn, Do, Teach. In order to really learn coding and coding principles well, you should first
• Learn concepts
• Then actually code real projects and do it yourself
• Finally teach it to your friends. This will make sure you learn it, understand it, and remember it!
• Great coders are great collaborators.It can take hours, days, or even weeks to fix a bug that someone else could have solved in minutes. Collaborative community makes everyone better.

Instructions

To start, flip through all lessons, slides, cheat sheet, and deployed course projects quickly to get a feel for what you will be working on

Every few days

• Flip back through past few lessons to refresh your memory on what you have already learned
• Try to learn at least one new thing to make sure that you continue to learn

After you finish, make sure to go back through all materials and projects once per month to make sure that you don’t forget what you have learned