Lesson #2: Let's Get Down to the Basics

Now before we get started, I want you to know this one thing ☝️:

It is more than okay (expected actually) if you don’t understand every word in the following lessons.

What I don't want you to do is stop. When you come up to a term that hasn't quite clicked yet, message in the slack channel but keep on going. This was one of my biggest challenges when starting computer science 💻. Computer Science is all about connecting the dots; combining the knowledge you do have to something new.

Every class I would find myself in another rabbit hole 🐰, getting confused at the first new term that was introduced and not understanding how it fits into the bigger picture. I would spend the rest of the class looking up article after article / watching video after video, every new term led me down another 63 rabbit holes until I gave up. lol, don't do this. Give yourself the time to process, and repeat the lesson a couple of times until you feel comfortable. In order to connect the dots, you need to be willing to reach new dots. #TrustTheProcess 🏀

Also, I found it easier to not think of this as an "Easy 10 Step Process to Becoming a Programmer" ✅. I wish it was that easy... but its not a linear process (kinda like life). You'll understand it at your own pace, in your own way.

The Basics

When I start a new project or I'm in a new transition or even fine tuning my craft, I go back to the basics. I feel like most people try to breeze past this phase, because its not flashy or fun but its the foundation that'll bring you forward.

HTML (HyperText Markup Language) is the basic language for any web page. Its a prettified text file that defines the structure and presentation for web page content. Its the skeleton of your website, your web page without makeup on 💄.

In order to have your personal computer files synced with the files in your Github repository, we're going to have to go into hacker status😎. I was going to teach y'all how to code from your terminal/command line, but I would rather teach that virtually. Instead we're going to use a tool called GitHub Desktop.

1. Download GitHub Desktop here
2. Install on your computer.
3. Open the application when it is finished installing.
4. Authenticate with your GitHub account when prompted
5. Select Clone Repository to take a repository that is already on your GitHub account but you want to copy it to your local computer.
6. Find the repository you created from lesson #1 by using the Filter box in the GitHub.com tab in the popup.
7. In the Local Path box, determine where your project folder should reside on your personal computer. This is important for pulling up the project in later steps! I usually create a folder on my Desktop for all my GitHub projects.
8. Click Clone to replicate your repository online to one in your local computer.
9. Celebrate 🎉 since your repository is now in the GitHub Desktop application!!! This will allow you to see your code changes in a more visually appealing place. This is the screen you should see (or something similar)

If you're still stuck on why we're using GitHub Desktop / how its different than GitHub, read thisand/or watch this below:

Once you've gotten GitHub Desktop all configured, we're going to start the groundwork. For this lesson, we are only going to focus on building one file - the index.html file in our own website repository.

10. Open your project in a text editor (Atom or Sublime Text). This way it will be there all nice and pretty to work with.
    • Open your text editor application
    • Select File > Open > navigate to the folder where you cloned your repository in step 3.
    • Celebrate 🎉 cause we are ready to start coding!!!!!!!

If you don't remember where you saved your repository, the easiest way to pull up your folder would be from GitHub Desktop. If you right click on the repository, the option to Open on Atom will take you straight to the project folder in the Text Editor application.

Next > Lesson #2: Bare Bones