Learning the basic concepts

“Ughh noooo!”…Yup, I’m afraid so, but it’s not as bad as you think.

If you wanted to get fit, you’d have to learn how to use weights, machines and figure out some level of nutrition. You don’t have to weigh your food and go crazy to get fit but you need some of the basics.

It’s the same with coding.

I don’t think we’re at the stage where you can leverage ai to write code without some coding knowledge.

-Laurent

You can tell ChatGPT what kinds of things you want to build and ask it what language it recommends learning, hint: It’ll likely be Python or Javascript. Just pick one. Heads or tails it, if you must.

Then ask ChatGPT to list out some of the basic concepts used in that language.

To a large extent a lot of programming languages are the same. Well at least the concepts are the same. I think Python can be a good starting point as it’s fairly readable for simple things. Learn loops, conditionals, functions, types. You can get a long way with just that.

-George

For Python, it’s things like; variables, data types, functions, libraries, etc.

Ask ChatGPT to explain one of the concepts using references to movies, food, household appliances, or whatever you think may be a good way to visualise it.

An example:

Ok, now it feels more digestible. Ask follow-up questions if needed—ChatGPT is your forever enthusiastic expert where no stupid question get thrown in your face.

Another way to learn some basic concepts could be going backwards. If there’s a piece of code you have (from your engineer friend or an open-source project) paste it into ChatGPT and ask it to explain what each line of code does.

If you build something visually with TLDraw or another no-code tool, it gives you the code so you can feed that into ChatGPT to see what the lines mean and do.

Understanding simple code

Now ask ChatGPT to generate the simplest of apps using your language of choice to demonstrate one of your basic concepts. e.g. “Help me build a simple Python app that uses functions. I can't code so make it really simple and explain everything the code does line by line.”

(it came up with a calculator app)

This will spit out code with comments that explain what each line does. It also offers further explanations underneath the code snippet.

If it’s tripping you up or there’s something in the code that you don’t understand e.g. elif statements, ask it to ‘explain like I’m 5’ and it’ll give you an example that’s easy to visualise and understand.

1. Ask it to explain each line and give you examples of how it could be done differently.

2. Try thinking about the logic without AI

3. If you are still relying on AI 100% after 1 week, you're not learning, just copy-pasting

-Katerina

It helps to think about the logic outside of the code (and without AI).

Ask for examples of how it could be done differently.

Ask why one way vs the other.

however good it gets it’s always going to be useful to know what the code it spits out means. I’m afraid there aren’t really shortcuts.

Also don’t get too bogged down in getting things perfect. There will always be multiple ways to do the same thing. For me programming is as much a mindset as it is specific knowledge of languages and specific tech stacks.

-George

‍

“Ok this is a lot of back and forth”

Yes, it is, and honestly, it’ll not change much. Expert programmers often use AI as an assistant in this same way. It’s a new way of working. Previously, you’d get stuck, Google something, end up on a Stack Overflow forum with many answers and you may still have follow-up questions.

Like any work with AI, the process of back and forth is helpful and necessary.

Whether you're an expert or a total beginner, my best advice is to have a conversation with the AI — rather than expecting it to just dump out fully-working code from the first prompt. Like traditional development, it's an iterative process. Start by discussing the concept.

-Gregory

I use it to help me learn new languages/frameworks if the project requires it.

Some tricks I use frequently:

- Get ChatGPT to read the docs and then talk to me about it
- For new languages/frameworks/paradigms: find someone whose code quality I admire, paste an example of their code into ChatGPT, and have it explain the patterns used, their pros, cons, etc. This has helped me pick up SwiftUI faster

-Michael

Build your first real app

I’d recommend using Replit, you can sign up for free and it gives you a code environment where you can copy/paste code and run it to see the live app. They also have a handy AI helper built in which you can use instead of flicking between ChatGPT and Replit.

I’ve written a short tutorial below on how you can build something, copying (with permission) from a podcast episode from Dan Shipper and Geoffrey Litt (two programmers).

But effectively, you need to set the stage that you are a beginner, will be using Replit, want the code to work in one file, are using [insert programming language] and it should make a plan step by step of how my app should work before writing code.

Work iteratively, thinking through a problem, and using AI to solve it in steps - will work much better than "write me a complete code that does this"

-Pete

Then the process is taking the code, copying it into Replit, running it, and if there are errors, feeding them back to ChatGPT to fix and then re-copying that fixed code back into Replit. Or use the Replit AI and Debugger in the app to help guide you.

Some extra tips here (as shown in the tutorial below) are asking ChatGPT to always give you the full new code (so you can just copy/paste the whole snippet instead of fixing individual lines), and of course, asking it to explain what each line does (what’s [x statement] mean? what does this part do? explain like I’m five, etc).

That’s essentially 3 steps to get something up and live with AI-generated code.

It’s iterative, there are lots of ‘if stuck go back to step 1’, ‘ask it to explain’, and ‘I got another error, please fix it’. Get used to it, that is the process.

One big takeaway is if you’re building mini apps like this after a week, a month—whatever you deem ‘acceptable'—and you’re not starting to understand the concepts or able to write a single line of code by then, you’re not learning, you’re just copy/pasting.

To progress with this you do need to learn it. So it may be the case that you need to revisit your process; did you understand the concepts in what you built, do you know what this line of code is in your third app—if no, try again.

Get ChatGPT to generate 10 mini app ideas you can build with its help to work using one file in Replit, it’ll come up with the usual; hello world, calculator, to-do list, stopwatch etc. This can be your curriculum. Get it to test you periodically!

‍

“You must learn to code”

Is something I heard a lot in my research (and my life). I just don’t 100% agree with it. It feels like the world we live in today means I should understand plenty of code but I don’t need to know how I’d write the thing top to bottom from the knowledge in my head. But it’s good to know the limits of using AI.

I think to properly use AI to code, you still need to learn how to code yourself. It often makes mistakes, and it's unable to look at the Big picture. Understanding the code allows you to not just catch the mistakes, but also give it better direction by breaking the problem into smaller problems.

-Shaun

To people saying one should still learn coding. Considering the time you need to get good compared to what one can do on growth, outreach and product during the same time. Of course it's great to learn coding, but we're getting closer to a time where the time invested might be spent better doing something else.

-Wenzel

The need to learn to code is different if you want to be a software engineer vs build mini apps vs $Bn app idea. Although I think AI is changing the path for software engineering too…for another post.

There are countless examples of others who’ve built things with code but never learned how to code.

• How I built a functioning Chrome Extension in 10 steps and 45 minutes, with no coding experience. Using ChatGPT + Replit
• Selling a website after learning to code with AI
• I was able to build & launch an iOS app with 0 coding skills in 2 months just using ChatGPT

I'm not technical - used ChatGPT to write and help me execute a Python script to export academic articles and scientific studies from PubMed + similar to upload to a custom GPT

-Logan

Used it to ship http://pokemonportfolio.com. Wrote it in python and HTML w/ help from GPT4 and deployed using Replit. Essentially allows anyone to take or upload pictures of their Pokémon cards and see how much they’re worth based on recent sales in the open market. It’s not perfect but it works for a solid chunk of Pokémon cards out there

-Neal

But remember that AI is not correct 100% of the time…

They should still learn how to code. AI is not 100% correct, but it IS 100% confident. Knowing how to discern a confident response from a correct response is critical, especially in development.

-Evan

Be as specific as you can be when giving instructions Ask the gpt to double check everything for mistakes Ask the gpt to review the code for any -inefficiencies - insecure code -logic errors. Understand, AIs hallucinate and the code may still be buggy.

-Zakariya

How to learn to code with AI

Here’s how I’d think about this now;

• Pick your path, are you a self-learner? courses? exercises? project-based?
• Choose a language (Python or Javascript)
• Learn basic concepts using AI to help visualise them
• Build small, simple software to understand what goes into making something.
• At every step of the way, ask ‘what does this line of code do’, ‘what does this thing mean’, and ‘how does this line interact with this one’, etc
• Use the simplest tools, Replit is the winner here.
• Remove everything that isn’t helping you learn. Not sure what Git is? Which Database provider do I need? Does my app need all these features?
• Consider creating an AI assistant/GPT (or use pre-built ones, recommended below) that uses a system prompt to set the style you want to learn in.

Recommended resources

• Micro Web App Coder—helpful coding assistant (GPT)
• Grimoire—helpful coding assistant (GPT)
• Replit—A simple coding tool
• MakeReal by TLDraw—A visual app builder with code export

Using ChatGPT to build an app

Dan Shipper has an excellent podcast series exploring how people use ChatGPT. In a recent episode, he spoke with Geoffrey Litt and they built an app live during the podcast. I replicated everything exactly how they did—but you should watch the video:

Geoffrey built a GPT (essentially an AI assistant) that helps specifically with generating code for tools deployed on Replit. Below is a sort-of tutorial on how they did it and how you can to.

His system prompt for his GPT is:

You are a helpful AI coding assistant. Make sure to follow the user's instructions precisely and to the letter.

Your goal is to output code for a React Typescript app. Generate all code in a single file and use Tailwind for styling.

Here is your workflow to follow:

The user gives you an initial idea for an app

Ask the user for clarification on parts of their idea that are underspecified (eg: who is the app for, does the user want specific features included).

Once major ambiguities are resolved, proceed. If there are still minor ambiguities in the details, make assumptions and tell them to the user.

Generate a pseudocode plan for how the code will work

Write the code

The starting point for your code file:

export default function App() {

return (

<div className="font-bold">

React ⚛️ + Vite ⚡ + Replit 🌀

</div> )

}

You can use his GPT here: https://chat.openai.com/g/g-qPeu5SFW6-micro-web-app-coder

To set up your own GPT, do this:

1. Got to ‘Explore GPTs’ in your ChatGPT sidebar
2. Click ‘Generate’ in the top right-hand-side
3. Click ‘Configure’
4. Name, image, and tagline as you wish
5. Instructions; copy the system prompt above
6. Save - you’re done!

Now you can chat with your AI assistant (GPT)

Enter your app idea.

Because the system prompt requires it, you now have to clarify things ChatGPT needs to help build the app.

By replying with the same 1. 2. 3. 4. you’re naturally addressing the individual points.

The App Components section is essentially a product spec that a Product Manager would put together.

The pseudocode is helpful if you know how to code to spot where there may be issues but also helpful for ChatGPT to plan what it’s going to be doing.

Now ChatGPT spits out the code

Geoffrey doesn’t read the code as he’d prefer to copy/paste into Replit and see what it does, then use ChatGPT to help debug errors when needed.

To run this code, you’ll need a tool like Replit.

Replit is an online coding platform that helps you spin up apps, avoid complicated setups, and share the link to the live project.

Geoffrey’s Replit template is here: https://replit.com/@GeoffreyLitt/Micro-App-Template-ReactViteTailwind?v=1#README.md

You just need to ‘Fork it’ (which is cloning it)

Copy and paste your code into the App.tsx file

Note: Select the existing code in the file and replace that with your new code.

e.g. this code:

export default function App() {

return (

<div className="font-bold">

React ⚛️ + Vite ⚡ + Replit 🌀

</div> )

}

This should be replaced by the code generated from ChatGPT.

Your app should work and be live.

In the video they go further, adding more features. Looking to save notes locally.

Note that telling ChatGPT it’s on the right track is a great way to stop it from going off course.

This GPT should always output the full code again so you can copy/paste over your existing code. If it doesn’t just ask it to output the full code.

For explanations and understanding of what the code is doing, you can ask in natural language. You’ll see above the feature request is written in plain English. And then a follow-up question could be “Does this save for each individual using the app or do the notes save across other people using the app” - the answer is, for individuals.

Dan goes on to add the functionality of integrating the GPT-4 API so that you can paste notes and GPT-4 will generate questions based on that text.

What’s needed for this functionality to work;

Notes: APIs often change and you may need to paste a successful example

So Dan found the API documentation and copied the Javascript code example into the prompt.

Note: The API snippet copied over was for GPT 3.5 Turbo, not GPT-4.

ChatGPT thinks through the plan again and how to implement it:

(he did need to re-ask ChatGPT to output the full code, some comments in the code mention omitting existing code).

As I was doing exactly the same as Dan, my copied code from ChatGPT missed out the last 2 lines so I got an error - and when I copied and pasted the code from ChatGPT in to find the error it said it should be correct and pointed me to some other potential issues. SO BE CAREFUL WITH COPY/PASTING 😅

For APIs, you need an API key which you can get from OpenAI.

Ok now I ran in to the same error Dan did in his podcast…

An error happens! This is because you need to install the OpenAI package, which you can do in the ‘Shell’ by typing npm install openai.

I asked ChatGPT to fix this one and it told me how to do it. I also asked it explicity to tell me where to put it in Replit.

You can always use ChatGPT to ask how to fix each of these errors as they arise.

Another error:

I got the same, but had to select ‘devtools’ to see the error.

So this is an example of how this implementation may not be optimal because you can hard-code your API key (that is, putting it into the code itself) - but that could be a security issue if you’re sharing this project with others who could rack up API calls on your account!

I pasted the error to ChatGPT and it suggested how I should set up my API key using Replits built-in Secrets feature (which is more secure but recommends more security steps if I were to put this into production.)

But this requires setting up a backend proxy server so I pushed through the non-secure way like Dan did in his podcast. It looks like this

I got an ‘Error generating questions’ in my live app - even though the button was there. This where I got pretty stuck to be honest, I used ChatGPT and Replit AI to solve, the API documentation was different to when Dan and Geoffrey recorded (which is one of the risks of using APIs and knowing when you need to update them!)

From using the Replit AI Debug feature (and asking Dan + Geoffrey), I found that my issue was this line:

setQuestions(completion.data.choices[0].message.content);

where it needed to be:

setQuestions(completion.choices[0].message.content);

Then the app worked!

At this point you can see where some design challenges are or even future feature requests could come in that you could further iterate on.

More thoughts and tips

I’ve gone from blind copy+paste to actually going back to basics a bit and learning python… but with AI to nudge me along a bit when I get stuck and also to explain stuff. It’s been a mix of just looking at other code, reading some tutorials and using a daily practice app called Mimo (like Duolingo for code)

Still hacking ideas together at the moment… while I don’t have any idea of specific apps to build I figure it’s just good to keep learning, experimenting with tools and code concepts so that when an idea/opportunity does strike … I’ll know better how to build it.

Also worth saying I’ve almost completely stopped using ChatGPT and now uses Replits built in copilot AI.

To others thinking about doing the same I’d say starting with the copy+paste approach is great to get some exciting quick/early wins… but definitely try and use it as springboard to actually learn coding at a fundamental level. That’s more future proof!

Andrew

AI completely levels the field for someone non technical. Code is applied logic. So if you can think logically and creatively, you can code without actually knowing the language. This raises the bar for what it means to be a software engineer. The biggest area I see this playing out in is prototyping products. If you have an idea - you can easily build an MVP. I don't think we are at a stage where ai can write production level code so it acts as a force multiplier to what you already know.

Adarsh

my observation was that nocode + some code = virtually limitless. the addition of AI to the equation means that I can now add that small amount of custom code which radically expands what i can now build.

Zachary

I firmly believe that AI represents a groundbreaking opportunity for non-technical individuals. It feels like having superpowers that have exponentially expanded my capabilities in bringing ideas to life. However, it requires stepping out of our comfort zone on many occasions, and we often find ourselves in challenging situations and decisions without any prior criteria. It's crucial to approach these processes with an open mindset to failure, understanding that AI and no-code tools ultimately lead us to embrace coding, not necessarily to become programmers but to acquire new knowledge needed to realize our projects.

Fran

I think folks - both technical and non-technical - HUGELY underestimate how big of a deal this is. For devs, there is a lot of cope ("surely this will not work, surely the code is crap, if someone wants to write code, they would have already learned it") but also just misuse: "i tried it once and it gave me buggy code, so I stopped", when in reality you just need to try try try and keep pushing, it will work eventually if you're willing to learn prompting and are persistent and lucid in expressing your ideas. For non-technical folks, I feel many of them don't quite know where to start and that it is totally possible for them to build a full blown app over a weekend without a single line of code. Plus everything I wrote above.

Fabian

I think there's a lot of value in learning how to code. For example- I took a flask course to understand how backend works. And that went a long way in my personal projects. My tip is to not go in blind - learn enough so you have a rough idea about the code being written by gpt. And pay attention to the code being written before copy pasting - you will learn so much that way. Also try to fix errors on your own. Goal is to get an intuitive feel for a language/framework.

Adarsh

Be curious and relentlessly ask questions to ChatGPT to make code happen.

Cagri

My best advice is to use AI like an eager companion - find an OSS project and try to build a feature on it. A warning tho - at least for now, if you feel stuck with AI (eg AI isn’t actually giving you functioning code after many tries) - zoom out and read docs. I’ve had moments where I attempted to defer to AI entirely to waste an hour that was quickly solved by just looking at documentation. Maybe this will change in the future / but at least for now it’s a balance. :-)

Soren

find a simple idea that you want to build and build it! oh and find a community. although chatGPT has probably filled a lot of that 'tell me how to do this' function that i used nocode communities for back in the day

Zachary

Have a project/problem you want to solve in mind.

Don’t worry about things being pretty, you just want to create core functionality first to see if it’s possible. Making things pretty is the easy part.

Break the features you’re thinking about into small parts. GPT’s memory is very limited.

Have GPT help you set up a local dev environment and suggest languages / databse types you should use. Have it help you set up a GitHub account and learn to use git properly.

Lastly, when all this foundational stuff is set, explain the logic in great detail, as if you’re coding in English. You can even tell GPT to add comments into the code to walk you through what’s happening.

I’m a fairly crappy coder, but I learn 10x faster making GPT do it for me than doing it manually. Also, some aspects of coding just aren’t worth struggling with when GPT can do it in 3 minutes for you instead of 2 frustrating days without.

Target a specific project first. Then use ChatGPT to lay out the technical requirements. Take your time in this part, you will want to chat about this and understand the ideal languages and frameworks to target. Then split your time learning the foundational language and then using co-pilot to build.

-David

I would leverage AI to build a foundation of coding and then use AI to write code. If you can figure out when to prove, ask a follow up or poke at something, AI will 10x your output easily. Easiest way to do this is to build things but poke at each step

-Krishna

I would encourage anyone who loves creating to incorporate these tools, lose the fear, and leverage this unparalleled moment in history to dive into creation. The combination of no-code tools and AI is empowering. It's not about becoming a programmer, but about embracing the new knowledge essential for advancing your projects.

A key piece of advice: start by addressing simple everyday challenges you face in your workflow instead of developing a micro SaaS from scratch. This approach keeps you motivated and builds confidence as you learn. Each small solution is a significant step in your journey. By focusing on practical real-life issues, you'll find using AI for coding both intuitive and rewarding. Remember that the tool must serve a purpose.

Fran

Understand that you can now build virtually anything if you're willing and capable of 1. expressing your thoughts and ideas in the clearest possible way and 2. are persistent and willing to push through and learn to prompt the tools

Fabian

If you found this post valuable, share it with a friend, and consider subscribing. Feel free to suggest new topics for me to cover.

Cheers,