Dynamisez une page web avec des animations CSS
🔗 https://gulcanc.github.io/OPC_2/
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.
💧 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.
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