Let the (very basic) Code Flow: My Very First Project! - Session 3, 4, and 5

/

Session 3: Date: April 18, 2022 Time spent on session: 1 hr 29 min

Session 4: Date: April 19, 2022 Time spent on session: 3 hr 11 min

Session 5: Date: April 20, 2022 Time spent on session: 1 hr 46 min

Total time spent learning to code: 9 hr 32 min

Summary

I’m finally getting into the thick of things! It’s still the edge of a very large forest, but I’m finally starting to write some very basic lines of code.

The past few days have been spent learning about the basics of Git and GitHub - and how they interact with each other - as well as the basics of HTML. On top of that, I finally completed my very first project!

The first day was spent on Git and GitHub. I was familiar with GitHub, and used it daily in my previous role, but this lesson was super valuable for me. I knew GitHub was an online repository where code can be uploaded, stored, reviewed, merged, etc. I would use it to see the state of certain things our team would work on, but I had no idea just how powerful it can be, and how Git interacts with it. I’ll do my best to briefly explain in hope that it will better stick in my mind.

Git is the most popular, free, and open source software that is used for version control. Clear as mud right?

Imagine you are working on any project. Let’s take writing a book for example. As that book grows into multiple sentences, then paragraphs, and then chapters, it can become harder to keep track of the changes you make. One way to do this would be to make multiple copies of your manuscript as you are writing it, but that can become unwieldy and messy very quickly. With software this becomes unscalable.

Now imagine you are writing this book with multiple people and trying to compile all the changes. Why was something added? Why was something deleted? What if there is a conflict? This is where version control with Git can help. Git allows the user to take a “snapshot” of their work at any given time and explain the changes they made. But what if you need to work on your project on a different computer, or access someone else’s project? This is where GitHub can help.

GitHub takes a centralized system and turns it into a decentralized one. Let’s say you are working on your book on your computer using Git and your cat fries your computer by knocking your coffee all over it. Not only have you lost your computer, but you have lost all the work you have done on your book. GitHub on the other hand allows you to take the changes you have made on Git, commit those to GitHub, and allows you to access your files from anywhere. Better yet, this allows for collaboration on a large scale, while keeping your project in sync with explanations for all the changes being made.

Now that I have probably bastardized the basics of Git and GitHub, I’ll move on. I still have a long ways to go to feel comfortable using Git and GitHub, but I am sold on their power and why these tools are the foundation of almost any software project.

Once I learned the basics of Git and GitHub it was time to move onto the basics of HTML.

You can think of HTML as the skeleton of any webpage you are on. It is the thing that gives the webpage its structure and content. In future lessons I will learn about CSS, which makes a webpage pleasing to view. If HTML is the skeleton, than CSS is the muscle and skin.

During this lesson I learned about HTML elements and tags, and then how to add text, lists (and the different types), links, and images.

Finally by the end of all that I was ready to start my first project!

This was a very simple project The Odin Project had me doing, but one that helped solidify the lessons I had learned. The objective of the lesson was to create a homepage that linked to a few different recipe pages that I would create. Each recipe would need to use a header, links, include a picture, and use both ordered and unordered lists.

This simple project is why I have liked The Odin Project so much! Whereas other sites like Codecademy walk you through how to do a project, The Odin Project gives you the objective of the project and lets you apply what you have learned up to that point. I can now say that I feel fairly comfortable reading and writing HTML, as well as feeling slightly more comfortable using Git to commit my changes, after completing this project.

If you would like to view this project you can click this link. Fair warning, this might change over time as I revisit it while learning CSS, so I will post a few screenshots of my webpage (which looks like it was taken straight out of the 90’s).

Like I said, very basic, but it is a start!

Overall, I have been having a blast while learning, and I look forward to the next time I am free to do my next lesson. I’m sure the frustration will still find me, but so far even the frustration has led to some great learning, which increases my excitement.

See you next time!

Session Notes:

Session 3:

Introduction to Git

  • Introduction

    • Git is like a really epic save button for your files and directories

    • Officially, Git is a version control system.

    • A save in Git records differences in the files and folders AND keeps a historical record of each save

  • Assignment

    1. Read Chapter 1.1 through 1.4 in this book about version control to learn the differences between local, centralized, and distributed version control systems.

    2. Watch this video about how Git can improve the workflow of both an individual and a team of developers.

    3. Watch this video for some history on Git and GitHub, and make sure you know the difference between the two. Git is a technology used in the command line while GitHub is a website you can visit.

    4. If you haven’t yet installed Git, visit the Setting Up Git lesson.

    5. Take a look at The Odin Project’s very own GitHub repository. This is where all the lessons are stored! While you’re there, look at all our contributors to gain an appreciation for how Git records all collaborative efforts and how GitHub visually represents this.

  • Additional Resources

  • Git Basics

    Cheetsheet - This is a reference list of the most commonly used Git commands. (You might consider bookmarking this handy page.) Try to familiarize yourself with the commands so that you can eventually remember them all:

    • Commands related to a remote repository:

      • git clone git@github.com:USER-NAME/REPOSITORY-NAME.git

      • git push or git push origin main (Both accomplish the same goal in this context)

    • Commands related to the workflow:

      • git add .

      • git commit -m "A message describing what you have done to make this snapshot different"

    • Commands related to checking status or log history

      • git status

      • git log

    The basic Git syntax is program | action | destination.

    For example,

    • git add . is read as git | add | ., where the period represents everything in the current directory;

    • git commit -m "message" is read as git | commit -m | "message"; and

    • git status is read as git | status | (no destination).

Session 4:

1. Introduction to HTML and CSS****

  • What is HTLM and CSS?

    • HTLM is the raw data a webpage is built out of

    • CSS gives style to that data

    • Neither are technically a programming language

  • Assignment

  • Additional Resources

Session 5:

Project: Recipes

  • Build a basic recipe page that links to a few recipes

  • Built just using HTML

  • Will revisit it later once I learn CSS