My girlfriend's guide to coding - Day 1: Setting up an IDE
Daily bite-size tutorials for my girlfriend who want's to learn how to code!
Hey Girlfriend! So you want to learn how to code? I got you.
I know you are super busy so I've designed these tutorials to be super bitesize. It should take no more than 15 minutes of your time to read through and try out an exercise.
Stick to it and with consistency, you'll be writing code in no time
- Your BF
Overview
On day 1, let's go through an overview of what we will be covering in the next few weeks so you have some idea of what we'll be doing!
In this tutorial, we will be learning frontend frameworks! In programming, we generally separate code into frontend and backend.
Frontend means code that a customer or client will see. Think about each time you open a website, anything that the computer renders is considered frontend code (i.e. the buttons, the search bar, the pictures, the text).
Backend refers to code that a user doesn't see. These code are more logical, stuff like login authentication, adding stuff to databases, and managing servers.
We'll learn frontend because you can visually "see" how your code gets turned into pretty colours and shapes. Backend is more like doing math puzzles, it's much more conceptual and even abstract sometimes.
Our Goal
The goal of this whole tutorial is for you to be able to create your own personal website! We will start off with something really simple and static (think text and images on a screen), and move towards advanced stuff like animations and with web features.
Trust the process, and by the end, you’ll be able to build something like my personal website.
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D
Exercise: Installing an IDE
Today's exercise is to get you set up with an integrated development environment (IDE).
An IDE is just an application that's been designed to optimise programming workflows. Think of it like Word or Google Docs for coding.
Installation
I recommend Cursor, which is a very popular AI-powered IDE.
Go ahead and download it from their website.
This video offers a neat little tutorial on how to install Cursor in case you get lost:
Project Setup
Once you've created an account or signed in to Cursor, you'll be greeted with this page.
Go on and click "Open a folder". Create a folder, you can do this by hitting "New Folder" (I recommend doing it in your Documents folder) and call it "Coding with Remus" :)
Once you're done, you should be met with an empty workspace.
On the left panel, right click and select "New File". Name the new file "hello_world.txt" and write "Hello World!" inside that file!
And boom! You're done! You can check your "Coding with Remus" folder by going to the Documents Folder with Finder.
You're now set up to write code! In the coming days, you will be using Cursor for most, if not all, of your code writing.
Next time
In the next tutorial, we will start reading some "pseudo-code," which are languages that isn't really a programming language, more like English with weird formatting. But it's really good for getting familiar with weird/non-English syntax (grammar and language structures).
Give yourself a pat on the back! You have just started your journey of becoming a developer :)
.
.
.
Written with love,
Your Boyfriend
Got Questions?
Leave a comment and someone else or I (it’ll probably be me) will help you out :)
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to following along with this newsletter and learn how to code :D
Can’t wait to keep going!! :))
✅😊