gulcanc/opc_2

Open Classrooms Project 3 - Ohmyfood - Dynamisez une page web avec des animations CSS

🔶 Open Classrooms Projet 3

Dynamisez une page web avec des animations CSS

🔶 Visitez la page du projet

🔗 https://gulcanc.github.io/OPC_2/

🔶 A Propos du Projet

Au sein du Projet n°3 du parcours Développeur Web chez OpenClassrooms j'ai realizé un site web responsive en utilisant les langages CSS3, HTML5 et un préprocesseur CSS appelé Sass.

Sass signifie Syntactically Awesome Style Sheet, une technologie qui améliore mon codebase et je simplifie la vie!

D'ailleurs, j'ai utilisé autoprefixer pour ce projet. Autoprefixer est un plugin qui vous évitera de -webkit-, -o- et -moz-. Il ajoute automatiquement des préfixes à votre CSS. Il vous suffit de lui fournir une feuille CSS et il passera par là pour ajouter les préfixes si nécessaire.

Par ailleurs, j'ai utilisé les pages github afin de mettre en ligne mon site web.

Pour ce projet, mon site web, Ohmyfood!, qui est le site web d’une jeune startup qui voudrait s'imposer sur le marché de la restauration et qui répertorie les menus de restaurants gastronomiques.

🔶 Les Objectifs du Projet

💧 L'objectif est de développer un site 100% mobile et qui consultera également une tablette et un ordinateur sans perdre en lisibilité et en vitesse de chargement

💧 La validition du code auprès du W3C La validation pour HTML | La validation pour CSS

💧 Pratiquer le préprocesseur CSS appelé Sass, Syntactically Awesome Style Sheet

💧 Utiliser @keyframes and @mixins de Sass pour des animations

💧 Utiliser des commandes de Git et les pages github afin de mettre en ligne mon site web.

🔶 Pour commencer à coder

1- Télécharger Node.js Download Node.jsDo

2- Vérifier l'installation en vérifiant la version

node -v
npm -v

3- Initialisez un fichier npm package.json

npm init 

4- Télécharger Sass

npm install -g sass

5- Exécuter Sass

npm run sass

6- Installez autoprefixer

npm install autoprefixer postcss postcss-cli -g

7- Lancez autoprefixer

npm run prefix

8- Pousser le projet vers gitHub :

git init 
git add . 
git status 
git commit -m "First commit" 
git remote add origin URL 
git push -u origin master

9- Créer gitHub pages

npm i gh-pages

npm run deploy