Front-End Development

Prep Work

To be completely ready to rock on Day 1, there's a bit of work you'll need to do for the course in advance. It won't be anything too crazy, but it'll help us all get on the same page and allow us to move more quickly in the few hours we have together each week.

A Note for Windows Users

We've done our best to stick to multi-platform tools and resources for this course, but we can't offer any guarantees that everything will go smoothly for you. While you can create websites with HTML, CSS and JS on any platform, the web is mostly Unix / Linux based and, hence, so are many of the better tools.

Getting Started

Accounts You'll Need

• Alexa
• Alexa is the learning platform we use at Bitmaker. You'll find all the material, screencasts, and assignments on Alexa. We'll be sending you an invitation to join our platform. Keep a look out in your inbox on the first day of class!
• Github
• Github is the service we use to share our code with one another. To get started, create an account. We'll be collecting your Github username once the course starts.

Tools to Install Before First Class

We’ve compiled a list of tools you’ll need to get started. If you do not have these tools configured, please download and install them using the below links.

• Atom
  • Our favorite text editor! You could use TextMate, Notepad++, vim, or any other text editor instead, but Atom is armed with a number of time saving shortcuts and great syntax highlighting. Atom is a very easy to use text editor. It’s also the industry standard for web developers.
• Google Chrome
  • We prefer Google Chrome because of its speed, ease of use and built-in web inspector (a tool designers and developers use for examining the structure of an HTML document and debugging JavaScript).

Tools We'll Install Together During the Program

• Git
  • Git is a distributed version control and source code management system. That means it lets you keep track of all of your changes in a structured way.
• Github Desktop Application
• There are a variety of web-based Git repository hosting services such as GitLab, Bitbucket, and Github. For the purposes of this course, we'll be using Github.
• While we'll be learning Git commands in a text-based interface known as the command line, Github's desktop application is available for those of you who are more comfortable working with visual interfaces.

The Command Line Interface

The command line interface is like the text-based version of Finder or Windows Explorer. It allows you to navigate your file system and run commands and programs by calling them by name rather than by clicking on icons. Before we get going with the course, if you're not familiar with using the command line interface of your operating system (as I'm sure most of you aren't), it'll be useful to learn the basics so that you'll feel more comfortable going forward with the course. This is one of the fundamental tools that developers use and some of the tools we'll be using in the course will require some basic familiarity with how it works.

To get up to speed, complete our tutorial on command line fundamentals.

---

Check-In Section

Below are a series of readings and questions designed to help you practice, apply, and reflect on what you learn. As you go through them, make note of which concepts came easily and which ones made you think twice. For the latter, we encourage you to revisit the readings in order to gain familiarity and fluidity with these concepts.

Readings

1. Terminology, Syntax & Introduction
2. Elements & Semantics

Questions

1. What is HTML?
2. What is an element?
3. What is an attribute?
4. What are the four required elements in an HTML document?
5. What is CSS?
6. What is a CSS selector?
7. What is a Class selector?
8. How would you select a class of "heading"?