Bonus Homework Week 0

Introduction

For this week’s bonus material, I want you to try coding in HTML on your local machine! This will involve downloading a text editor, which web developers use to write code.

There are also a few bonus readings/videos which will give some more context on how the web works, above and beyond what you learned already.

Assignment

1) Download and install Visual Studio Code | 5 min

You’ll need a text editor for the course. Although Microsoft Word might work well for writing an essay, it’s not great for writing computer code. Web developers make edits to websites using text editors, which offer syntax highlighting, as well as a number of extensions which can come in handy.

My personal favourite text editor is Visual Studio Code (VSCode), which is developed by Microsoft. It’s totally free, and you can download it here. Other good options include Atom and Sublime.

Download VSCode and install it on your machine.

2) Create a new HTML file | 10 mins

In this step, I want to walk-through how to set up a new HTML file on our local machine. I recommend making use of the Live Server feature in VS Code, which hosts this page over a server.

What’s great about this is that our page will automatically update when we’re looking at it in the browser whenever our HTML code changes. This saves us from having to refresh the page every time we make a change, which saves a lot of time.

Open up your freshly installed copy of VSCode, and click on File > New File from the address bar at the top of the screen.

Copy the following boilerplate HTML code into your freshly created file:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Click on File > Save As… at the top of the screen, and save the file as my_site.html.

Navigate to where this file was saved, and open in with the Chrome browser.

We should now be able to see our HTML showing up on the screen:

3) Replicate some simple HTML in your file | 60 mins

As a next step, I want you to use your knowledge of HTML to replicate something that looks like this:

Choose your own TV character, and give your own reasons for why you chose it.

If you need help, then there is a long list of HTML elements here, with instructions on how to use them. This includes all attributes that will need to be included to get these elements to work.

Make sure that you refresh the page every time that you make a change, so that your updates show up on the screen.

4) Watch/read the following materials | 65 mins

As a final step, here is a list of extra materials which might be interesting.

The final link here - the web developer roadmap - includes all the technologies that you could possible learn to become a frontend or backend engineer. This hopefully offers some solace that eventually we will stop introducing new jargon every week!