Setting Up Local Enviroment

Choosing your local enviroment including IDE (code editor) and your file structure.

1. Download VS Code and install it.
Go here, this is your code editor or IDE as it's simple to start with and robust enough to use professionally.

2. Create folder structure.
Either via folder explorer or VS Code, create a new folder called Roppers - Build A Website and three files: index.html styles.css scripts.js

3. Open code inside VS Code.
Right click a blank space inside the new folder and select the Open With Code option.

Here's a list of Extensions to install:

1) Beauitfy 2) GitHub Pull Requests and Issues 3) Live Server 4) Font Awesome Auto-complete & Preview

Let's Integrate With GitHub

In a few clicks, we'll have the most popular version control software ready to rock.

1. Create an account.
Go to GitHub and create your account and don't forget to verify email.

2. Create first repoisitory.
In VS Code, on the right menu, find the Source Control and you'll see Create Repoisitory.

3. Add README.md file
On the Explorer menu, create a new file and call it README.md.

4. Commit and Push Changes.
Now back to Source Control and write a simple commit message, then under three dot menu select push.

Learn GitHub and don't forget to setup GitHub Pages.

HTML: The Backbone.

Let's setup the structure of the website.

1. Write a plan.
Write out a small plan for your website. Even if it's a dot point list, include header, sections and footer.

2. Using Emmet.
Emmet makes coding a lot faster and easier, it comes preinstalled with VS Code. Open index.html and simply enter ! and hit enter.

3. Link css and js files.
Within the head tags, create a link to styles.css and script.js files. For more help.

4. Link third-party css files.
We'll be using Font Awesome and Bulma to style the web page. See their docs to learn how to link files.

5. Create simple structure.
Using your plan, in the body section, create the section tags needed.

Learn HTML at W3Schools.

CSS: The Flare.

Let's make it pretty and give it some style.

1. Using Bulma.
There's lot of different frameworks out there, they make styling a lot easier. Use the Bulma Docs to get started.

2. Add Bulma classes.
Using Bulma Docs, add classes and sections to create desired look and structure. Take the time to learn the class names.

3. Add custom classes.
Edit the styles.css to create custom styling for sections.

4. Speed up the process.
Continue using Emmet to create more sections with classes e.g. div.columns.div.column*3span.tag-info

Learn CSS at W3Schools.

JS: The Special Sauce.

1. Copy onlick script.
Go here and copy the script code to your script.js.

2. Add onlick html.
Add button and p syntax like in the example.

3. Confirm it's working.
If everything is setup correctly, yours should do the same as the following: