Basic Setup
Designing with Web
First things first…
Before diving in how the Web works, we'll need a few things:
1. A computer
This one may sound obvious to some people, but some of you are reading this article on your phone or tablet. You're going to learn how to design projects with web technologies, and coding them will require to access unusual characters like <>/*+-=()[]{}
You can access computers at the makers' lab.
#ProTip: On MacOS with azerty keyboards, you can write brackets { by pressing shift+( keys, and square brackets [ by pressing option+shift+(.
On PC, you need to use the AltGr key in combination with the key showing the character you want.
2. A modern web browser
This one will be our main tool. Browsers implement standards differently at different paces, we need a browser that supports modern web standards. In addition to making sure that what you'll code in your browser will look the same in others' browsers, we'll have access to nice tools to help us during our projects.
You can choose either Chrome or Firefox.
If you already have it installed, make sure it is up to date: Chrome version 75 or more / Firefox version 68 or more.
You can click on your browser's menu in the top right corner → "Help" → "About Google Chrome / Firefox".
You have to use Google Chrome or Firefox, they are among the most widely used browsers as you can see on the chart below. As an example, if you want to use cutting edge JavaScript features in your site, they might not work in other browsers like Safari or IE Edge. If you're more interested, you can take a look at Developing cross-browser and cross-platform pages.
3. Glitch
Glitch offers us a nice playground for coding websites / applications entirely in the browser, provides a large panel of examples to learn from, and simplifies collaboration: we can add collaborators to our projects and code simultaneously with them a la Google Docs. More over, thanks to Glitch, we won't need to setup a development environment on our computers, install tools on our machines, host and deploy our sites… Glitch will greatly improve your learning path by removing a lot of difficulties. Have a look at Glitch Features to learn more about how Glitch helps.
Go to Glitch and create an account using your method of choice.
Only use Chrome or Firefox when working on this course / Glitch. You'll have to use Glitch for all your assignments.
Glitch is built by Fog Creek Software, the company that invented Trello and Stack Overflow, the place you'll find answers for your code-related questions.
4. Slack
Although all the course content is available online, you are not alone in front of your computer to take this course. For this, we are using Slack, a modern and professional instant messaging tool.
Click 👉 right here 👈 and create your account with your emlyon email address.
From now on, you can use the “Ask on Slack" button in the bottom-right corner ↘️ of every page of this course, to ask for help anytime, we'll answer you there.
We will only use Slack to communicate:
- The #general channel is only used for informations.
- The #help channel is the place to ask your questions.
- You can also message us directly on Slack if needed, instead of sending emails.
Students not on Slack will be graded 0.
5. Zoom
This videoconferencing tool allows you to meet your tutor and the other members of your group at each step of your project. You'll have to use it every week to meet your tutor. Start by installing Zoom for Mac, Windows or Linux and login with your emlyon address.
You can use Zoom in group at any time to chat in video and share your screens: type /zoom in your Slack group channel, a button will appear in the channel to join a Zoom room.
When launching a Zoom room for the first time, you will have to validate your account by clicking on the "Authorize Zoom" link, then connect with SSO ("Sign in with SSO").
→ In the field "Your company domain", enter "em-lyon".
→ Finally, authenticate on the emlyon portal.
That's it for the setup of this course, let's have a quick look at our workspace now: Starting with Glitch.
