Projet pour débutant en programmation web

Projets

1. Introduction

Pour ce projet, nous allons te demander de reproduire des pages internet, puis de les mettre en ligne. Cela t’apprendra plusieurs choses :

  • Déjà, tu vas réviser Git et Github, puisqu’il te sera demandé de passer par les services
  • Ensuite, tu vas devoir utiliser les compétences que tu as apprises pour recréer un site internet, et le faire marcher (HTML, CSS)
  • Enfin, tu vas devoir mettre le site en ligne, via l’une des méthodes que nous t’avons données plus haut

2. Le contenu du projet

2.1. MotherFuckingWebsite

Il existe un site qui fait l’apologie du webdesign brutaliste : MotherFuckingWebsite. Nous allons te demander de créer un repo nommé motherfuckingwebsite, et de faire le site dans le repo.

2.2. BetterMotherFuckingWebsite

Maintenant, nous allons un peu améliorer ce site. En guise de second projet, nous allons te demander de faire un nouveau repository avec la version améliorée de MotherFuckingWebsite : BetterMotherFuckingWebsite, qui demande un peu de CSS. Une fois que tu as créé cette version améliorée (dans un autre repo bien entendu), tu vas la mettre en ligne via un des services que nous t’avons donnés

🚀 ALERTE BONNE ASTUCE

Si tu es malin, tu pourras remarquer qu’il suffit de copier-coller le code du fichier CSS et avoir une version qui marche. Habile. Cependant, comme tu vas vite t’en rendre compte, cette technique ne marchera pas toujours, et tu devras très vite te retrouver à devoir pondre du code et te battre avec Google pour how to center those fucking divs, donc autant prendre la bonne habitude dès maintenant. Tu fais ce que tu veux, mais sache qu’avec un copier-coller, tu n’apprendras rien, même si tu penses « avoir tout compris » en lisant le code. Savoir lire du code est une chose, savoir le re-pondre en est une autre 😉

2.3. Mettre le site en ligne

Maintenant que tu es le champion de la création de site, et si l’on faisait profiter la terre entière de tes magnifiques sites ? Oh yeah !

Nous allons donc te demander de mettre en ligne le site BetterMotherFuckingWebsite via l’un des moyens suivants :

  • Tu l’héberges sur un site type OVH avec un nom de domaine que tu as acheté
  • Tu utilises GitHub Pages pour avoir une version en ligne

3. Pour aller plus loin

3.1. BestMotherFuckingWebsite

Un petit rigolo a créé selon lui le BestMotherFuckingWebsite. Ta mission est de le recréér. Comme tu ne sais pas (encore) comment tout faire ce qu’il y a sur la page, nous allons simplement te demander d’aller aussi loin que tu peux, en t’aidant de Google pour certains concepts. Par exemple, ajouter du JavaScript sera compliqué maintenant, mais ajouter une couleur à un texte ou une image peut être résolu en quelques recherches Google à peine.

4. Rendu attendu

Pour être fier de toi, nous attendons simplement :

  • Un repository GitHub qui contient le code de BetterMotherFuckingWebsite
  • Dans le README.md repository, tu devras mentionner le lien de la version en production de BetterMotherFuckingWebsite

📚 INSTANT CULTURE GÉ

Dans l’univers du code, quand on parler de la version en production d’un projet, cela revient à dire « la version live / en ligne » du dit projet.

En général, cela concerne généralement des applications complexes, qui doivent faire tourner plusieurs tests avant d’envoyer « en production » ce que l’on vient de coder, mais nous nous sommes dits que cela ne mangerait pas de pain de mentionner cette formulation dès maintenant.

Évidemment, quand nous t’avons plus haut le lien de la version production de BetterMotherFuckingWebsite, cela voulait évidemment dire que nous voulons le lien du site en ligne 😉

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s