Mise en page et développement web de sites internet. Développement Web de niveau avancé - cours 1990 frotter. de Stepik, formation 131 leçons, Date: 1er décembre 2023.
Miscellanea / / December 04, 2023
Bonjour!
Je m'appelle Dima. Et je vous invite à plonger au plus profond de la création et de la mise en page d’un site internet !
Ce cours s'adresse à ceux qui connaissent déjà les bases, mais souhaitent passer d'un bon niveau en création de site internet à un excellent.
Le cours s'adresse à ceux qui connaissent les bases du HTML et du CSS, mais savent qu'il existe encore de nombreuses techniques, techniques de développement et technologies qui sont utilisées par les vrais développeurs professionnels.
Si cela vous semble familier, alors ce cours est fait pour vous)
Donnez vie à vos sites Web avec des animations modernes via CSS
Nous commencerons par introduire de la dynamique dans nos sites, c'est-à-dire que nous ferons de l'animation. Nous apprendrons à animer des boutons, des textes et des titres en utilisant du CSS pur, à créer des animations de cartes, à créer un menu de navigation dynamique, et tout cela sans une seule ligne de code JS, uniquement du CSS pur.
Ce cours contient les meilleures pratiques en matière de conception réactive.
Vous apprendrez de nouvelles méthodes et astuces pour concevoir vos sites de manière réactive, utiliserez de nouvelles techniques pour définir et rédiger des requêtes multimédias et apprendrez à adaptez tous les éléments de la page en modifiant une seule propriété CSS pour que votre site soit plus beau que jamais sur n'importe quel appareil mobile appareil
Découvrez toutes les subtilités et les avantages des préprocesseurs modernes
Vous apprendrez comment accélérer plusieurs fois la création de votre site Web en utilisant toutes les capacités du préprocesseur SASS, telles que les mixins, les variables et les fonctions.
Bases essentielles pour utiliser NPM
De plus, les packages NPM avec les plugins nécessaires à tout développeur professionnel nous donneront la possibilité de créer et d'optimiser des sites Web plus rapidement et plus efficacement que jamais.
Le système de contrôle de version Git vous aidera dans votre développement
De plus, vous apprendrez les bases nécessaires pour travailler avec le système de contrôle de version git afin d'avoir toujours la possibilité de revenir à la bonne version de votre site, peu importe à quel point vous avez fait une erreur la dernière fois mettre à jour le site)
Vous créez 2 sites Web modernes pour votre portfolio
Ce cours est construit sur la pratique et est divisé en petites leçons vidéo dans lesquelles nous créerons étape par étape 2 grands projets modernes basés sur sur le système float - pour que vous puissiez prendre en charge d'anciens projets et bien sûr sur le système GRID CSS, qui vous permet de créer des mises en page d'une incroyable complexité.
Et bien sûr, vous n’aurez pas honte de montrer ces projets à vos clients potentiels ou futurs employeurs.
Je suis toujours en contact !
Et rassurez-vous, vous ne serez pas laissé seul, car après chaque petite leçon, vous aurez l'occasion de comparer votre code avec le mien ou simplement de poser une question; les réponses ne tardent généralement pas à arriver.
Garantie de remboursement!
Et si vous avez encore des doutes, ce cours offre la possibilité de restituer l’argent dépensé si vous ne l’aimez pas dans les 30 jours.
Rejoignez-moi et ensemble nous apprendrons à créer des sites Web professionnels et modernes.
Rendez-vous en classe !
9
coursJe crée des cours en ligne originaux depuis 2016. J'enseigne professionnellement le travail avec les éditeurs graphiques Adobe, la conception et le développement Web.
Bonjour! Je m'appelle Dima! Je ne veux pas me vanter, mais je dois le faire.) J'ai enseigné à plus de 5 000 étudiants à travers le monde dans le cadre de mes cours en ligne exclusifs. Plus de 2 000 avis réels avec une note moyenne de 4,83 sur 5,00! J'enseigne le web design, le développement web et les logiciels nécessaires (Photoshop Illustrator, Figma). Mon expérience d'enseignement consiste en 5 ans de tutorat indépendant, ainsi que d'enseignement dans des écoles et des cours en ligne, sur des plateformes mondiales d'enseignement à distance. Les étudiants de mes cours notent mes meilleures qualités dans la façon dont je présente la matière sans bourrer, de manière amusante et intéressante.
Préparation / Répétition / Premières animations
1. Bonjour !) Téléchargez le matériel pour le cours
2. Installer et configurer les logiciels nécessaires
3. Nouveau chemin de détourage de propriété. Nous commençons à créer la première section du site
4. Si l'application scout ne fonctionne pas pour vous
5. Pratique: créez votre forme à l'aide de Clip-path
6. Alignement vertical d'éléments à l'aide du positionnement absolu
7. Rencontrez @KeyFrames. Créons la première animation.
8. Visibilité backface et création de boutons via des pseudo-classes
9. Animer un bouton à l'aide de pseudo-éléments
10. Mode de remplissage d'animation. Démarrer une animation à partir d'un point précis.
11. 3 principes du développement web
12. Utilisez REM au lieu de PX
Git et GitHub
1. De quoi parle ce bloc ?
2. Commandes de base dans le terminal
3. Comment éditer des fichiers via un terminal
4. Installer le système git sur notre ordinateur
5. Comment exécuter git dans un projet spécifique
6. Création du premier commit
7. Soumettre un projet à GitHub
8. Si vous rencontrez une erreur lors de la soumission de votre projet à GitHub
9. Erreur de connexion lors de la tentative de transfert d'un projet vers GitHub
10. Pratique: créez votre propre référentiel
11. Comment supprimer un référentiel GitHub
12. Comment télécharger des référentiels depuis GitHub
13. Nous émulons le travail de 2 développeurs sur un seul référentiel
14. Comment afficher des informations sur les commits dans le terminal. Journal Git
15. Que sont les branches
16. Comment créer et parcourir des branches.
17. On comble l'écart du début du mini cours avec les notations -u et -M
18. Erreur de validation non enregistrée lors du paiement
19. Comment transférer les modifications créées vers une nouvelle branche
20. Comment pousser plusieurs commits vers une nouvelle branche
21. Quelle est la condition de tête détachée? TÊTE détachée
22. Comment restaurer un fichier spécifique à partir d'un commit précédent
23. Journal git avancé et git show
24. Comment fusionner des branches à l'aide de Git merge. Méthode d'avance rapide
25. Comment supprimer des branches
26. Comment supprimer les fichiers de répertoire de l'état non suivi
27. Git réinitialiser --hard. Comment annuler un commit
28. Deuxième façon de trouver un commit bloqué en utilisant ORIG_HEAD
29. Git réinitialiser --soft
30. Git commit --amend en modifiant le commentaire d'un commit précédent
31. Git réinitialiser --mixte
32. Différence entre git réinitialiser et git restaurer
33. Introduction à git diff. Imprimer la différence de plusieurs commits sur la console
34. Exemple pratique d'utilisation de git diff
35. Comment afficher le schéma de branchement dans le terminal. Journal Git --graphique
36. Nous fusionnons les branches en utilisant git merge. Méthode "Vraie Fusion"
37. Comment revenir en arrière après une fusion
38. Comment copier un commit spécifique en utilisant git Cherry-pick
39. Fusionner des branches avec git rebase
40. Quel est le meilleur git rebase ou git merge
41. Comment utiliser le fichier .gitignore
42. Dernier mot
Mise en page avancée - CSS/SASS
1. De quoi parle ce bloc ?
2. Comment fonctionnent les variables SASS
3. Comment fonctionnent les mixins
4. Comment ajouter des arguments aux mixins
5. Que sont les modèles SASS
6. Comment fonctionnent les fonctions SASS
7. Organisation des fichiers SASS pour un grand projet
8. 3 façons de positionner les éléments
9. Comment fonctionne le flotteur ?
10. Créer notre propre système de grille
11. Appliquer un dégradé au texte. Clip de fond
12. Comment créer des symboles en utilisant HTML
13. Animer et terminer la deuxième partie
14. Comment créer vos propres polices d'icônes
15. Nous utilisons la propriété perspective pour refléter la perspective des éléments
16. Comment fonctionne le mode de fusion en CSS
17. Terminer la section avec des cartes
18. Comment arrondir le texte à l'aide de la propriété shape-outside
19. Comment fonctionnent les filtres CSS
20. Comment ajouter une vidéo à une page
21. Connaître la balise form et son contenu
22. Animer le formulaire
23. Créer votre propre bouton radio en utilisant CSS
24. Création d'un pied de page de site Web
25. Création d'un menu de navigation en utilisant du CSS pur partie 1
26. Configuration des transitions de vitesse d'animation à l'aide de cubique-bézier
27. Animer un hamburger
Conception adaptative
1. De quoi parle ce bloc ?
2. Comment créer des sites Web réactifs
3. Créer un mixin avec des règles multimédias
4. Adaptation du projet partie 1
5. Adaptation du projet partie 2
6. Adaptation du projet partie 3
7. Que sont les images réactives
8. Comment adapter des images en HTML
9. Adaptons les images HTML dans notre projet
10. Adaptation des images CSS
11. Quelques dernières modifications du site
Gestionnaire de packages de nœuds
1. De quoi parle ce bloc ?
2. Qu'est-ce que node.js et npm
3. Préparation du premier package npm à utiliser
4. Lancement du premier package npm
5. Utiliser gulp dans notre projet
6. Comment ouvrir un site Web sur un téléphone mobile
Introduction à CSS GRID
1. De quoi parle ce bloc ?
2. Préparation
3. Comment créer un modèle de grille. Modèle de grille
4. Comment fonctionnent les unités fr
5. Comment déplacer un élément vers une autre cellule
6. Placer plusieurs éléments dans une seule cellule
7. Pratique: Créer une mise en page de site Web
8. Exemple d'un enseignant. Créer une mise en page
9. Comment renommer chaque ligne d'une grille
10. Comment créer un modèle de grille à l'aide d'un schéma de dénomination
11. Que sont les grilles explicites et implicites ?
12. Comment aligner les éléments à l'intérieur des cellules
13. Comment aligner une grille à l'intérieur d'un conteneur
14. Contenu Min-Max
15. Remplissage automatique et ajustement automatique. Tailles de cellules basées sur le contenu
16. Conclusion. Jardin en grille
Projet CSS GRID
1. De quoi parle ce bloc ?
2. Préparation
3. Créer un modèle de grille, partie 1
4. Créer un modèle de grille, partie 2
5. Comment fonctionnent les sprites SVG
6. Nous terminons la deuxième section du site
7. Création de la section "Bannière", partie 1
8. Création de la section "Bannière", partie 2
9. Créer une section avec des cartes
10. Création d'une galerie
11. Création d'un pied de page
12. Faire un "Hamburger"
13. Création de l'en-tête partie 1
14. Création de l'en-tête, partie 2
15. Nous adaptons le site
À la prochaine!
1. Au revoir!
Obtenez votre certificat
1. Test pour l'obtention d'une attestation de fin de cours