Week 1 - principles and practices, project management

WEB DEVELOPPEMENT

How to learn HTLM5 and CSS3 language

During this first week, the goal is to familiarize with the web development tools in order to create the first steps of Fab Academy Website. As a mechanical engineer, for me the most difficult part today is the web design. I have to learn how to code a website from scratch.

To achieve this assignment I have follow an Online Course on a famous platform: “Apprenez à créer votre site web avec HTML5 et CSS3” on OpenClassRoom.

This courses template is :

  • HTML5 basis
  • The joys of formatting with CSS
  • Site layout
  • Advanced features

This MOOC-like course is really interesting because of the accessibility of course (If a mechanical engineer could follow this course … Everyone can do ;)), the way to correct exercise (you correct other student exercise and they do the same for you) and obviously, you can follow it when you want and at your rhythm.

Software

To code a website you can use a simple software like “Notes” but it will be easier with a specialized software. I decided to use Notepad++ to write HTML5 and CSS3 code for my page.

The more useful features with this software are :

  • Recognition of different programming language
  • Syntax Highlighting and Syntax Folding
  • Auto-completion: Word completion, Function completion and Function parameters hint
  • Multi-Document (Tab interface)

You can download it HERE.

Web Design

To be honest, with these tools I made a first website with a poor but fonctional design.
I decided to find a free Template on internet to present a design more pleasant

I choose the "Phantom" design on HTML5 UP

The last part of this assignment is to describe a potential “Final Project”. This is done, you can find it on the page “Final Project” … Surprising right ? ;)

PUBLISHING YOUR WEBSITE

Git Download (Windows 7) and GitLab parameters :

First of all, thanks to Patxi and his documentation. You cand find it here.

  • Sign in on git.fabacademy.org with our fablabs.io ID.
  • Download and install Git for Windows : Click here to download
  • Click "Next" until the "Adjusting your PATH environment" step, where you have to choose "Use Git from Bash only"
  • Click "Next" until the "Configuring extra options" step, where you have to disable these options before going to the next step
  • Installation is completing
  • When the installation is complete, click on "Launch Git Bash", disable "View release notes" and click on "finish"
  • A new window open with you name or the name of you session
  • You have now to generate the SSH key with the following command : ssh-keygen -t rsa -C YOUR EMAIL
  • Press "Enter" 3 times for the following questions :
    • "Enter fil in which to save the key ...
    • "Enter passphrase (empty for no passphrase)"
    • "Enter same passphrase"
  • Now display the key with the following command : cat <~/.ssh/id_rsa.pub
  • Copy your key (Right click and Copy) : Starting with "ssh-rsa" and ending with "YOUR EMAIL"
  • Go to your GitLab page by clicking your name on the lower/left side
  • in Profile setting (on your left), choose "SSH Keys" setting
  • Paste the Key copied before in the text-field named "Key"
  • In normal operation, your email is automatically insert in the "Title" field.So press "Add Key"

Cloning and publishing

  • Now it's time to Clone Fablab's repository and publish your website (commands are after ":", commands in majuscule are specific to your account)
  • Initialize Git : git init
  • Add your GitLab user name : git config --global user.name "YOUR GITLAB USERNAME"
  • Add yout email adress : git config --global user.email YOUR EMAIL
  • Clone Fablab's folder : git clone git@git.fabacademy.org:fabacademyYEAR/YOURFABLABNAME.git
  • This operation could take a long time because you are downloading each websites folder of your Fab Academy work mates.
  • Go to your personnal folder : cd YOUR FOLDER PATH (you can find it on your personnal GitLab space by clicking on "Files")
  • Go to the folder on your PC. On windows 7 it's under your USERNAME/YOUR FABLAB/YOUR NUMBER
  • Copy your website files in it
  • Récuperer les dernières versions des sites (si des modifications ont eu lieu) : git pull
  • Add all your folders and files : git add -A
  • Prepare copy : git commit -m "GIVE A NAME TO YOUR ACTION"
  • Push it : git push origin master

You can now verify that your website is well uploaded on GitLab by searching your name on the student list ;)