Week 01

Tuesday - VS Code Setup

Open up VS Code. It has just been added to these computers so we might need to adjust them a bit for this to work properly. Be patient; patience and persistence are the two most important traits for a new coder to develop. Once it has launched we will need to add in our project folders, but then we should be able to jump right in and begin coding our first Web page.

So let's start out by creating our own index.html and we'll add a few lines of text to it. Specifically, you are going to write a story. It doesn't have to be true, although those are the easiest stories to tell - but it needs to be a couple paragraphs in length. Take some time to do that now.

One of the most useful things to do while coding is to preview it in a browser. Normal Websites don't look like this, do they? That's because Web designers use HTML and CSS to clean up the appearance of the content, to make text easier to read, and to give a little extra punch to your message - all while organizing imagery and colors. This takes time, but each change you make over the course of this semester should improve the look of your Web pages.

The problem is that VS Code is not pre-configured to do this. It is a universal coding app, meaning that it isn't designed specifically for Web development. We can, however, tune it a bit to perform better for our purposes here. To install extensions that will do this, hold down the control and shift keys, then tap the "x" key (this can also be described as "ctrl-shift-x") to get to the extension installation feature, which will open to the left of your main display in VS Code. Here are some extensions you will want to install right now:

I know it is a lot, but these are useful extensions that will make your life in this class easier.

With all that added, we're still missing actual code from our index.html. I'm going to walk you through some of the basic HTML code that needs to turn this into a Web document.

Time permitting, we're going to spend some time at Codecademy, an online tutorial Website that will let you play around with HTML and CSS in an easy, straightforward environment. Don't worry too much about learning what Codecademy is trying to teach you - this class will take care of that day by day. But it is helpful for you to get a quick, up-front sense of what kind of stuff is involved in Web design, so you can better see where this class is headed.

Use your school Google account to sign in to Codecademy. That will not only simplify things for you when you log in, but it will also make it easier for everything we do to track through our Google accounts.