P01-Getting-Started

Getting Started

Overview

Did you know your emotions can change how you taste food? I think everyone agrees that they would want their foods to taste good!

🥗🍔🍕🍇😋

Imagine if there was a place where you could go to and buy any type of mood you want. Well guess what? We're going to build that! Well… sort of. Join me as we go deep into the world of HTML, CSS and Javascript and build The Mood Shop!

Why Is This Important

The web is the biggest software platform and growing. The foundation material covered in this tutorial is at the core of all web technologies. Having a strong foundation is important to becoming a strong developer. 💪💻

Prerequisites:

None

Learning Outcomes

By the end of this tutorial, you should be able to...

1. Write valid and semantic HTML
2. Apply CSS styles to control the appearance of your web applications
3. Using Flex Box, Grid, Font styles, Border styles to change the appearance of your web page
4. Use JavaScript to create dynamic content and handle user interactions in your web applications
5. Create variables, handle events on the web page, and write javascript functions

Using Git/GitHub

As you go through this tutorial, you will also be making commits after completing milestones. This is a requirement, you must make a commit whenever the tutorial prompts you. This not only further enforces best practices for software engineering, but also will help you more easily figure out where a bug originated from if you break your progress up into discrete, trackable chunks.

When prompted to commit, you'll see a sample commit message. Feel free to use your own message, so long as it clearly and concisely covers the work done.

Lastly, the commit prompts in this tutorial should be the minimum amount of times you commit. If you want to do more commits, breaking your chunks into even smaller chunks, that is totally fine!

Git Setup

[action] Start by creating your project folder with the name mood-shop.

mkdir mood-shop

go into your project folder

cd mood-shop

create an index.html file

touch index.html

Set Up Git/GitHub

Set up your repo!

[action] Make your first commit

$ git init
$ git add .
$ git commit -m 'project init'

Now Go to GitHub and create a public repository called mood-shop, and now associate it as a remote for your local git project and then push to it.

[action] Push it!

$ git remote add origin GITHUB-REPO-URL
$ git branch -M main
$ git push origin main -u

Hint! when you create the repository on GitHub, before you add any files, GitHub will show you all of the instructions above and show the line below with the correct URL!

git remote add origin GITHUB-REPO-URL