Background image
logologo symbol

0 - Preparation

Getting started - Tooling

Description

Code Editor
A code editor is the main tool in a web developer's toolbelt. In modern times it's not only the tool you'll be writing the code in but it's also the ecosystem that will be helping you go through the complex modern development environment, with it's built-in features and plugins. In this Guide you should install and get acquainted the main code editor we'll be using in the course: VSCode.
Accounts
As a web developer you will need to have online tools to help on your work. To start with, create an account on Github and Figma, and read up on them.
Github hosts code you create with Git, and we will be using it to deliver almost all work to be done throughout the course.
Terminal
The terminal is a software that allows you to run scripts and different kinds of software just by typing their names and some options in a command line. It will prove very useful in your day-to-day life as a web developer.
Git
Git is a versioning system that widely used to keep track of different code versions (so that it is clear what changed with each iteration). Github is a company that makes use of this technology to host many Git repositories. Learning Git is paramount when dealing with code both because it organizes the workflow and because it makes it very easy to collaborate and share your work.
Markdown
Markdown is a way to write rich text with only a simple editor. It is going to be used in every project in this course to create a README.md file, which should contain relevant information about that work. Markdown can also used to manage the content of  websites that don't rely on the use of databases for such.

Topics

  • VSCode
    • Extensions
      • Prettier
      • Live Server
      • GitLens
      • Polacode
  • Accounts: Github
  • Terminal
    • VSCode Terminal
  • Git
  • Markdown
  • GitHub Pages

Goals

Knowledge

Understand what a code editor is
Understand what code versioning is

Skills

Be able to use a code editor (create code files, save them)
Be able to install and use supporting tools for the code editor
Be able to create quick code prototypes online
Be able to use Git for code hosting and versioning
Be able to write a document in Markdown format

Idea for return

Every guide has a deliverable attached to it, but this one is an exception. We are just warming up, so you don't need to deliver anything just yet. Nonetheless, here are some pointers you should try and accomplish:
  • Create an account on Github
  • Install VSCode and create a project (Workspace) in it
  • Learn how to use the Terminal to navigate the file structure of your computer and to execute commands (e.g. list files in directory)
  • Create a Git repository, on Github, from the command line (Terminal). It can contain just dummy text files but why not create a little HTML + CSS Project? (See the Concepts Guide)
    • Create a README.md file in your Git repository using Markdown (try creating a title, a paragraph, a list…)
  • Turn on GitHub Pages for that repository and open the live URL it gives you. This is how you will hand in almost everything on this course, and it is how you share your work with anyone outside the school — send the link to a friend and watch your page load on their phone.

Materials