C'est l'été ! 
Création site sur "The Last of Us" : Différence entre versions
(→Compétences) |
|||
| (10 révisions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | == | + | ==ATTENTION== |
| − | + | ||
| + | Ce site utilise certains éléments soumis aux droits d'auteur. Ils sont utilisés uniquement à des fins informatives et éducatives, sans intention publicitaire ni commerciale. | ||
| + | Il n'y aura donc pas d'image du site pour illustrer. | ||
| − | == | + | ==Projet== |
| − | |||
| − | + | J'avais envie de créer un site en html/css qui intègre du JavaScript et en utilisant l'outil "Alpine JS".J'ai choisi de le faire sur la license "The Last of Us" parce que j'aime beaucoup cet univers et que j'avais besoin d'un sujet . | |
| − | + | ==Dates== | |
| − | + | deux semaines du 17 au 28 mars. | |
| − | |||
| − | |||
| − | |||
| − | |||
==Objectifs== | ==Objectifs== | ||
| + | |||
* étoffer le portfolio. | * étoffer le portfolio. | ||
* consolider les compétences en JavaScript et html/css. | * consolider les compétences en JavaScript et html/css. | ||
| − | |||
| − | |||
| + | ==Compétences== | ||
| + | |||
| + | *Connaissances en html. | ||
| + | *Connaissances en css. | ||
| + | *Connaissances en JavaScript (peu). | ||
| + | |||
| + | ==Étapes de votre projet== | ||
| − | + | *Créer un dossier et l'ouvrir avec VScode. | |
| − | + | *Avec VScode, créer 3 fichiers: "index.html","style.css" et "slider.js". | |
| + | *Intégrer dans votre index ce que vous voulez afficher sur votre page (images,vidéos,texte,slider...) en veillant à bien utiliser et fermer les balises. | ||
| + | *Embellir la mise en page en travaillant en parallèle sur votre fichier style. | ||
| + | *Dans mon cas, une partie du JavaScript est intégrée directement dans l'index avec l'aide d'"Alpine JS", mais j'ai quand même fait le slider avec mon fichier "slider.js" | ||
| + | *en suivant le tutoriel fournit plus bas, faire le slider est simple mais ATTENTION ! Si comme moi vous mettez vos images dans un sous-dossier comme "assets", il faudra donner le chemin vers les images et pas juste leur nom. Ex: "image1.webp" doit devenir "assets/image1.webp". | ||
| + | *Toujours avoir une fenêtre de votre navigateur ouverte avec votre site web en local à côté pour vérifier les modifications apportées à ce dernier par les modification effectuées sur vos fichiers. | ||
| − | === | + | ==Liens vers des ressources utiles== |
| − | |||
| − | + | [https://thelastofus.fandom.com/fr/wiki/Wiki_The_Last_of_Us le wiki fan que j'ai utilisé comme référence] | |
| − | |||
| + | [https://www.youtube.com/watch?v=2gwNbswv-Zg tutoriel youtube pour le slider] | ||
| + | |||
| + | [https://codepen.io/mikegmz/pen/bGvdbb menu tabs] | ||
| + | |||
| + | [https://alpinejs.dev/start-here Alpine JS] | ||
| + | |||
| + | [https://stackoverflow.com/questions/65205562/hover-over-dropdown-with-alpine-js stackoverflow menu déroulant] | ||
| + | |||
| + | [https://gamma.app/docs/Site-Web-The-Last-of-Us-zgen9owxovz9b98 la présentation finale] | ||
| + | |||
| + | ==hardware== | ||
| + | |||
| + | *Un ordinateur. | ||
| + | *Une connexion internet. | ||
| + | |||
| + | ==software== | ||
| + | |||
| + | *[https://code.visualstudio.com/download VScode] | ||
| + | |||
| + | *[https://github.com/ Git] | ||
| + | |||
| + | ==Auteur== | ||
| + | |||
| + | Guelwin | ||
==Catégorie== | ==Catégorie== | ||
[[Catégorie:Tn6]] | [[Catégorie:Tn6]] | ||
Version actuelle datée du 26 mars 2025 à 11:51
Sommaire
ATTENTION
Ce site utilise certains éléments soumis aux droits d'auteur. Ils sont utilisés uniquement à des fins informatives et éducatives, sans intention publicitaire ni commerciale. Il n'y aura donc pas d'image du site pour illustrer.
Projet
J'avais envie de créer un site en html/css qui intègre du JavaScript et en utilisant l'outil "Alpine JS".J'ai choisi de le faire sur la license "The Last of Us" parce que j'aime beaucoup cet univers et que j'avais besoin d'un sujet .
Dates
deux semaines du 17 au 28 mars.
Objectifs
- étoffer le portfolio.
- consolider les compétences en JavaScript et html/css.
Compétences
- Connaissances en html.
- Connaissances en css.
- Connaissances en JavaScript (peu).
Étapes de votre projet
- Créer un dossier et l'ouvrir avec VScode.
- Avec VScode, créer 3 fichiers: "index.html","style.css" et "slider.js".
- Intégrer dans votre index ce que vous voulez afficher sur votre page (images,vidéos,texte,slider...) en veillant à bien utiliser et fermer les balises.
- Embellir la mise en page en travaillant en parallèle sur votre fichier style.
- Dans mon cas, une partie du JavaScript est intégrée directement dans l'index avec l'aide d'"Alpine JS", mais j'ai quand même fait le slider avec mon fichier "slider.js"
- en suivant le tutoriel fournit plus bas, faire le slider est simple mais ATTENTION ! Si comme moi vous mettez vos images dans un sous-dossier comme "assets", il faudra donner le chemin vers les images et pas juste leur nom. Ex: "image1.webp" doit devenir "assets/image1.webp".
- Toujours avoir une fenêtre de votre navigateur ouverte avec votre site web en local à côté pour vérifier les modifications apportées à ce dernier par les modification effectuées sur vos fichiers.
Liens vers des ressources utiles
le wiki fan que j'ai utilisé comme référence
tutoriel youtube pour le slider
hardware
- Un ordinateur.
- Une connexion internet.
software
Auteur
Guelwin
