Module 2: Make your first website!
Objective: get a page of your own live on the internet and get your development workspace set up.
Installfest
Welcome back! Since we'll be using a few tools this semester, we might as well get them set up in one fell swoop. Sign up for the following free websites and help a friend when you finish:
-
GitHub will host your website and store your code throughout the semester. Git is powerful, but can be tricky, especially when used in a team and everyone is editing the same file. We'll only graze the surface of Git so we can focus on coding. The important thing is to put your changes on GitHub often so your work is backed up. You can always roll back to an earlier commit if your project gets deleted or messed up beyond repair.
Tip: make your GitHub username simple; it's going to be the URL of your page. First initial and last name is a good way to go!
Here's a tutorial to guide you through the setup process and get your first site live on the web:
-
Publishing Web Pages from Scratch with GitHub Pages (just the first half until the Wordpress section)
-
Codepen, an amazing tool for web development, allows you to make full web apps and games right in your browser without installing anything--instant gratification! Also, you can browse around and view other users' creations to draw inspiration from. The only drawback is that free accounts don't allow for image uploading, so you'll want to use Cloudinary or Rawgit to host your image assets for Codepen projects.
-
Scratch (optional) is a fun block language that makes programming accessible. Playing around with Scratch for a few hours will give you a huge leg up on programming with a typed language such as JS. The advantage of block programming is that the programmer needn't worry about syntax (typing everything correctly) or looking up what options are in your toolbox--just grab some blocks and start playing around!
-
Codecademy (optional) is an interactive tutorial for learning web programming. In particular, focus on the JavaScript section. Whenever you have downtime in this course or at home, head over to Codecademy and work on a few lessons. If Codecademy doesn't appeal to you, try another JS tutorial or three listed on the resources page.
You'll also need to select an offline editor. Mission Bit computers have a text editor pre-installed called Brackets, but for some it's not very intuitive to code in. Head over to the resources page and take a look at some other options if you find yourself in this camp.
Configuring your environment to your liking is an individual process that can take a bit of trial and error, so if something doesn't feel right, try another editor or adjust the settings on the one you're currently using.
Put your first site online!
Now that you're up and running, fire up your text editor and make a simple website introducing
yourself, following the HTML basics section from last class. Feel free to work
with a partner and help them out if they get stuck. Your final page should be viewable at
yourname.github.io/index.html. You don't have to type index.html, though; that's
the file that gets automatically loaded when you don't specify one. Be sure to
use <a> tags to link two different .html files together and
<img> tags to add images to your pages. You'll need to know how to do those things
next week when you make your first game.
Also, GitHub and Codepen have a social component, so follow your classmates!
Thanks!
Whew! You made it through a bit of initialization and put your first website online. Congrats!
Next module, you'll learn how to style your page using CSS. In your spare time, feel free to make a few web pages about your favorite topics to keep your chops sharp.
