Développeur frontend: sites Web sur HTML/CSS/JavaScript - cours 18 000 roubles. de Coddy School of Programming for Children, formation 3 modules (mois)
Miscellanea / / December 03, 2023
Âge: 11-14 ans
Niveau: pour débutants.
Durée: à partir de 3 modules (mois), à partir de 24 heures*.
Format: cours individuels et collectifs, hors ligne et en ligne (temps réel).
Nombre d'enfants: de 1 à 8.
Prix:
à partir de 750 rub./heure dans un groupe en ligne,
à partir de 850 roubles/heure dans un groupe hors ligne,
à partir de 1050 roubles/heure individuellement en ligne,
à partir de 1980 roubles/heure individuellement hors ligne.
Dans le monde moderne, toute entreprise sérieuse s'efforce d'acquérir son propre site internet, car c'est une sorte de « carte de visite » sur Internet, sans laquelle faire des affaires semble déjà dépassée, frivole et désespéré.
Ces dernières années, le métier de webmaster s'est hissé en tête du classement des métiers les plus attractifs et recherchés dans le domaine informatique. À cet égard, il y a actuellement de plus en plus de personnes disposées à suivre une formation en création de sites Web avec gratter et maîtriser cette spécialité prestigieuse afin d'avoir une formation stable et décente gains. Notre école de programmation CODDY vous suggère de ne pas tarder et d'inscrire votre enfant au cours « Développeur Frontend: Sites Web sur HTML/CSS/JavaScript » dès maintenant! Le but de ce cours est d'apprendre aux enfants à créer des sites internet modernes et de leur faire découvrir les bases du métier de développeur d'interfaces.
Qu’est-ce que le webmastering et comment devenir webmaster ?
Le webmastering est un ensemble d’activités de développement, de création, d’optimisation et de promotion de sites Internet. Tout ce qui est d'une manière ou d'une autre lié à la production et à la maintenance des sites. Il s'agit d'une science à part entière qui nécessite certaines compétences et connaissances dans de nombreux domaines, tels que la programmation Web, la conception, la rédaction, le référencement et autres.
Sur Internet moderne, n’importe qui peut créer son propre site Web. Mais en règle générale, la qualité des projets Web laisse beaucoup à désirer. Pour qu'un site Web soit compétitif, vous devez aborder le problème avec compétence et impliquer des professionnels dans le travail. À l'aide d'un langage de programmation, le programmeur crée des pages de sites Web et les combine en un seul objet, après quoi il les présente pour un affichage correct dans les navigateurs. Une attention particulière devra être portée à l'interface du futur site, garantissant son bon fonctionnement et sa sécurité. Ainsi, un webmaster professionnel fait lui-même tout ce qui précède! Il s'agit d'un programmeur, d'un concepteur Web, d'un concepteur de mise en page, d'un administrateur et d'un modérateur, et parfois d'un rédacteur SEO à la fois.
Quelles connaissances et technologies faut-il maîtriser pour devenir webmaster ?
Avant de devenir webmaster, vous devez vous familiariser et étudier de nombreuses technologies, programmes et systèmes. Voici les principales étapes qui poseront les bases de votre futur métier :
1. Apprendre le HTML - Langage Signalétique Hyper Text.
Une fois que vous aurez commencé à apprendre le HTML, vous comprendrez la structure d’un document Web et apprendrez à créer des sites Web simples.
2. Apprendre le CSS – langage de style d’affichage des pages Web. Grâce à l'introduction de styles CSS dans le document, le site acquiert sa propre saveur et son apparence unique. Vous pouvez définir la couleur, la taille, l’arrière-plan et bien plus encore de la page Web.
3. Introduction au CMS – système de gestion de contenu ou « moteur » du site.
4. Maîtriser Adobe Photoshop – un éditeur graphique avec un nombre incroyable de possibilités. De nombreux spécialistes l'utilisent pour dessiner des designs et créer leurs propres mises en page originales et de haute qualité.
5. Connaissance de base des langages de programmation. La grande majorité des sites Web utilisent PHP et JavaScript. La rapidité du site, sa sécurité, son éventuelle évolutivité et le support de développeurs tiers dépendent de la qualité des scripts écrits. En d’autres termes, vous devez être capable d’écrire du code de qualité.
6. Travailler avec des bases de données.
Et surtout, le webmaster doit créer des sites originaux. Avec l’avènement de solutions prêtes à l’emploi pour tous les CMS populaires, un site Web avec une conception originale sans modèle est plus demandé que jamais. Un webmaster professionnel peut non seulement travailler avec un ensemble de programmes prêts à l'emploi, mais également écrire ces programmes prêts à l'emploi. Pour atteindre ce niveau, vous devrez travailler dur. Et notre cours « Développeur Frontend: sites Web sur HTML/CSS/JavaScript » aidera votre enfant à faire les premiers pas en toute confiance dans cette tâche difficile. Sous la direction d’enseignants expérimentés, il apprendra à créer des sites Web informatifs dotés d’une conception graphique originale.
Au cours du processus éducatif, les sujets suivants seront étudiés :
1. Notions de base du langage de balisage hypertexte (HTML) et des feuilles de style en cascade (CSS)
2. mise en page de sites Web modernes
3. étude approfondie des fonctionnalités du style de page Web
4. bases du travail avec Adobe Photoshop et de l'utilisation des mises en page de conception de sites Web
Dans un premier temps, nous nous familiariserons avec les bases du métier de développeur d'interfaces web et étudierons les règles construire la structure et la logique des sites Web, acquérir des compétences pratiques en programmation interfaces Web. Chaque étudiant apprendra les bases de l'écriture de code HTML et CSS.
À la fin de ce sujet, votre enfant créera son propre site Web moderne.
Le deuxième module comprend une étude approfondie des outils de programmation d'interfaces Web. Dans ce module, nous continuerons notre introduction au HTML et au CSS. Les étudiants se familiariseront dans la pratique avec l'algorithme et la structure de création de sites Web modernes, créeront indépendamment une galerie d'images interactive et publieront leur projet sur Internet.
Au cours du troisième module, nous poursuivrons notre connaissance du métier de développeur Web, acquerrons des compétences pratiques en travaillant avec Adobe Photoshop et étudierons les outils de conception Web modernes. Au stade de la création d'une conception de site Web, l'étudiant acquerra des compétences de base pour travailler dans un éditeur graphique. Nous analyserons différentes options de conception de sites Web, discuterons des avantages et des inconvénients de chacune et découvrirons comment la conception peut être améliorée.
À la fin du cours, mes étudiants et moi créerons un site Web à l'aide d'une mise en page prête à l'emploi en utilisant les derniers outils de programmation Web et publierons le résultat de notre travail sur Internet.
11
coursEnseignant du cours :
"Minecraft: Introduction à l'intelligence artificielle", "Unity 3D", "Développeur Frontend: sites Web HTML/CSS/JavaScript", "Dessiner en style Anime", « Programmation pour les plus petits », « Programmation Minecraft », « Design thinking », « Bots en Python », « Conception graphique Photoshop », "Blog vidéo"
Éducation:
De nombreux cours pour améliorer les compétences informatiques dans les entreprises internationales (Chatbot Hackathons, Prototypage dans le domaine de l'intelligence artificielle, architecture informatique, etc.). Université de Heilbronn, Heilbronn, Allemagne (Master en administration des affaires). Université économique d'État de Biélorussie, Minsk, Biélorussie (Master en administration des affaires).
Expérience:
Il est engagé dans le conseil client en matière de systèmes juridiques, de systèmes de solutions d'audit et d'automatisation des processus, travaille dans le domaine innovant de l'informatique et est une start-up en Allemagne dans une entreprise internationale.
Intérêts:
Développement personnel, passion pour le partage des connaissances, réseauteur, ouvreur du monde, créateur de vie, activiste sportif.
« Aujourd’hui, le monde entier est interconnecté: les personnes, les pays, les économies, les technologies, etc. La programmation est une compétence clé du futur. Cela vous aide à mieux comprendre le monde de demain, à le façonner activement et à devenir un membre innovant d’une société passionnante sans frontières. La capacité de coder ouvre des portes infinies sur l’avenir à nos enfants dans ce monde et fait d’eux des ambassadeurs des nouvelles technologies.
9
coursEnseignant du cours :
"Minecraft: Introduction à l'intelligence artificielle", "Unity 3D", "Développeur Frontend: sites Web HTML/CSS/JavaScript", "Dessiner en style Anime", « Programmation pour les plus petits », « Programmation Minecraft », « Design thinking », « Bots en Python », « Conception graphique Photoshop », "Blog vidéo"
Éducation:
De nombreux cours pour améliorer les compétences informatiques dans les entreprises internationales (SAP, automatisation des processus, e-commerce). Université FOM de Stuttgart, Stuttgart, Allemagne (Master en administration des affaires) Université technique d'État de Karaganda, Karaganda, Kazakhstan.
Expérience:
Fondateur d'un magasin d'électricité en ligne à succès en Allemagne, engagé dans le conseil client en domaine de l'automatisation des processus de vente, travaille dans le domaine de la vente informatique en Allemagne à l'international entreprises.
Intérêts:
Voyages, pêche, sports, échecs.
I. Goethe disait: « On ne peut apprendre que ce qu’on aime »
1er module
Le premier jour
Bases de la mise en page Web
- Structure du document HTML
- Première page Web utilisant le langage de balisage HTML
- Présentation de l'éditeur Sublime Text 3
Résultat de la leçon : créé la première page Web, appris les méthodes de base pour baliser du texte à l'aide de balises.
Tâche pratique : créer une page Web en utilisant le langage de balisage HTML.
Deuxième jour
Éléments div et attributs de balise
- Travailler avec l'inspecteur Web
- Création d'un site Web multipage
- Apprendre de nouveaux éléments et attributs de balises
Résultat de la leçon: appris à ajouter des liens et des images au site, ajouté des attributs aux balises
Tâche pratique: créez votre premier site Web multipage.
Jour trois
Feuilles de style en cascade
- Introduction aux feuilles de style en cascade
- Styliser les éléments HTML
- Utilisation des sélecteurs
- Installer et travailler avec le plugin Emmet et ajouter du texte Lorem
Résultat de la leçon: appris à changer la couleur d'arrière-plan et la couleur du texte des éléments HTML, à utiliser deux types de sélecteurs, à créer du texte Lorem à l'aide du plugin Emmet
Tâche pratique : modifier l'apparence de la page à l'aide des propriétés CSS.
Jour quatre
Création site internet Jaguar
- Création d'un site Jaguar multipages
- Création d'une structure de fichiers de projet
- Travailler avec le remplissage et le remplissage des éléments
Résultat de la leçon : a appris à travailler avec un fichier CSS externe, s'est familiarisé avec le remplissage externe et interne des éléments.
Tâche pratique : créer un site Web Jaguar multipage.
2ème module
Le premier jour
Modèle de boîte en CSS
- Modèle de boîte en CSS
- Créer des blocs de forme inhabituelle
- Travailler avec la propriété box-sizing pour modifier la façon dont la largeur et la hauteur d'un élément sont calculées
Résultat de la leçon: appris à créer des blocs de formes inhabituelles, à utiliser la propriété box-sizing avec la valeur border-box pour calculer correctement la largeur d'un élément et à définir la taille des éléments dans différentes unités de mesure
Tâche pratique: créez des cartes avec du texte en utilisant différentes valeurs de propriété de taille de boîte.
Deuxième jour
Manipulation de texte avancée en CSS
- Différents types de polices
- Choisir des polices pour les sites Web
- Création de nouveaux styles qui vous permettent de personnaliser l'affichage du texte à un niveau avancé
Résultat de la leçon: créé une page en utilisant différents types de polices, amélioré l'apparence et la lisibilité du texte en utilisant les propriétés transmises.
Tâche pratique: créer une page en utilisant des types de polices de base.
Jour trois
Positionnement des éléments en CSS
- Travailler avec la propriété float
- Types de positionnement des éléments sur la page
- propriété de position
Résultat de la leçon : appris à travailler avec les propriétés float et position, à créer du texte autour des images
Tâche pratique : créer une page Web et y placer des éléments à l'aide des propriétés float et position
Jour quatre
Création d'une page de blog
- Création d'une page de blog
- Propriétés de positionnement des éléments pour placer des menus et des publications sur la page
- Balises sémantiques
Résultat de la leçon: appris à travailler avec des balises sémantiques en utilisant les propriétés de positionnement, placé les principaux composants du blog sur la page
Tâche pratique: créer une page de blog à l'aide de balises sémantiques
3ème module
Le premier jour
Pseudo-classes et travail avec des images en CSS
- Utiliser des images d'arrière-plan sur une page Web
- Les pseudo-classes planent, actives et visitées
- Changer le style d'un élément lors de l'activation d'une pseudo-classe sur un autre élément
- Création de motifs d'arrière-plan
Résultat de la leçon : appris à travailler avec des images d'arrière-plan, étudié les propriétés de travail avec des images
Tâche pratique : ajoutez des modifications externes aux éléments lorsque vous les survolez avec le curseur de la souris.
Deuxième jour
FlexBox en CSS
- Travailler avec la disposition de boîte flexible CSS
- Propriétés d'alignement des éléments dans un conteneur Flex
- Jeu éducatif Flex-grenouille
Résultat de la leçon : appris à travailler avec la technologie Flex pour créer des mises en page flexibles, complété le jeu flex-frog pour consolider le matériel couvert
Tâche pratique: compléter le jeu flex-grenouille pour consolider le matériel couvert
Jour trois
Développement du site internet de la boutique Sneakers. Partie 1
- Création d'une structure de site avec des modèles
- Connexion à un site de polices
- Propriétés de l'en-tête du site et de ses éléments enfants
- Fonctions pour créer un fond de page dégradé
Résultat de la leçon : créé une structure de site avec des modèles, connecté la police au site.
Tâche pratique : sélectionnez et téléchargez des photos avec des modèles, ajoutez une ombre à l'en-tête du site
Jour quatre
Développement du site internet de la boutique Sneakers. Partie 2
- Fin des travaux sur le chantier
- Créer un bloc avec des cartes
- Changer le comportement des éléments lors du survol
- Technologie FlexBox pour le positionnement des cartes
Résultat de la leçon: créé un site internet avec des fiches modèles
Tâche pratique : ajouter une galerie en utilisant la technologie FlexBo
4ème module
Le premier jour
Disposition de la grille en CSS
- Introduction au système Grid
- Créer une page à l'aide d'une grille
- Propriétés pour un travail avancé avec les cellules de grille
Résultat de la leçon : a étudié le système de mise en page bidimensionnelle (CSS Grid Layout), a appris à positionner les cellules de la grille sur la page.
Tâche pratique : complétez le jeu de jardin en grille pour consolider le matériel couvert.
Deuxième jour
Pseudo-éléments après et avant
- Pseudo-éléments avant et après
- Combiner une image avec du texte à l'intérieur
- Éléments avec pseudo-éléments de première lettre et de première ligne
Résultat de la leçon : appris à travailler avec des pseudo-éléments avant, après, première lettre et première ligne, combiner des pseudo-éléments avec différentes propriétés pour créer de beaux blocs
Tâche pratique: créer un élément en utilisant les pseudo-éléments after et befor.
Jour trois
Animations et transformations en CSS
- Transformations CSS
- Appliquer des transformations aux éléments HTML
- Créer des blocs animés en CSS
- Application de fonctions de synchronisation aux images clés
Résultat de la leçon : appris à travailler avec des transformations en CSS, à créer des animations sans fin en CSS.
Tâche pratique : créez un bouton, ajoutez-y des transformations lorsque vous le survolez.
Jour quatre
Entraînez-vous à créer des animations en CSS
- Application de l'animation et de la transformation dans la pratique
- Créer un système orbital animé de planètes dans notre système solaire
Résultat de la leçon: a créé une page démontrant le mouvement des planètes dans le système solaire et un arrière-plan animé.
Tâche pratique : créer un système orbital animé de planètes dans notre système solaire.
5ème module
Le premier jour
Création d'une boutique en ligne
- Qu'est-ce qu'une boutique en ligne ?
- Création d'une structure de projet
- Configuration du projet
Résultat de la leçon: a commencé à créer une boutique en ligne.
Tâche pratique: sélectionner les icônes à utiliser sur le site.
Deuxième jour
Création d'un en-tête de boutique en ligne
- Variables en CSS et comment les utiliser
- Connexion de polices à une feuille de style externe à l'aide de la fonction url
- En-tête de boutique en ligne, son style
- Ajout de fonctionnalités de menu supplémentaires à l'aide du langage de programmation JavaScript
Résultat de la leçon : configuré des variables globales dans le projet, créé un en-tête multifonctionnel avec un menu, connecté un fichier Javascript pour ajouter des fonctionnalités de menu supplémentaires.
Tâche pratique : ajouter la modification de l'arrière-plan de l'en-tête du site lors du défilement de la page
Jour trois
Création du premier écran avec le produit principal
- Structure HTML du bloc de présentation
- Système de grille pour un affichage correct des éléments
- Valeurs des propriétés CSS à l'aide de variables
- Éléments de style
Résultat de la leçon: créé la partie présentation de la boutique en ligne
Tâche pratique : créer une partie de présentation d'une boutique en ligne
Jour quatre
Créer un bloc avec des produits populaires
- Balisage HTML pour un bloc avec des produits
- Stylisme pour les fiches produits
- Grille pour le positionnement des cartes
- Stylisation d'un bloc avec l'histoire de l'entreprise
Résultat de la leçon: créé un bloc avec des produits populaires et l'historique de l'entreprise
Tâche pratique : ajouter un remplissage externe et interne aux éléments du bloc avec l'historique de l'entreprise
6ème module
Le premier jour
Création d'un slider avec les avis clients.
- Bloc de révision
- Façons de créer des conteneurs défilants en CSS
- propriétés de comportement de défilement et de type d'accrochage de défilement
- Points d'ancrage du curseur
Résultat de la leçon : créé un slider avec les avis clients en utilisant HTML et CSS.
Tâche pratique : ajoutez des points d'ancrage aux sections principales du site et créez un défilement automatique vers ces blocs lorsque vous cliquez sur le bouton.
Deuxième jour
Travailler avec des formulaires et du contenu vidéo.
- Balises HTML5 pour insérer du contenu vidéo dans un site Web
- Styliser une section avec un clip vidéo en plein écran
- Balise de champ de saisie - et ses attributs
- Balise pour créer des formulaires en HTML
- Styliser un élément de saisie de texte
Résultat de la leçon : créé une section avec une vidéo et un bloc avec un formulaire de commentaires
Tâche pratique : créer un formulaire de commentaires, styliser les éléments
Jour trois
Création d'une page de galerie distincte
- Grille personnalisée pour une page de galerie
- Ajouter des blocs avec des images à la grille
- Pseudo-éléments et animations diverses de blocs avec images
- Filtres CSS pour améliorer la conception visuelle de la galerie
Résultat de la leçon : créé une page séparée avec une galerie de photos
Tâche pratique : utiliser différents types de positionnement pour créer un fond translucide inhabituel.
Jour quatre
Adaptation du contenu pour tous types d'appareils.
- Façons d'adapter le contenu pour les appareils mobiles
- Requêtes multimédias pour appliquer différentes propriétés au même élément sur des appareils de largeurs différentes
- Règles CSS pour trois types d'appareils
Résultat de la leçon: Nous avons adapté le site Internet pour les tablettes et les téléphones.
Tâche pratique: à l'aide de media queries, modifier les valeurs de propriété des éléments HTML pour adapter le contenu à tous types d'appareils
7ème module
Le premier jour
Introduction au framework Tailwind SS.
- Que sont les frameworks et comment accélèrent-ils le processus de développement de projet ?
- Installation du framework CSS et des plugins Tailwind
- Concepts du cadre CSS Tailwind
- Travailler avec la typographie et les couleurs dans Tailwind CSS
Résultat de la leçon : créé la première page Web en utilisant le framework CSS Tailwind.
Tâche pratique: créez un bloc avec du texte, des éléments de style à l'aide de classes tailwind.
Deuxième jour
Cours Tailwind pour créer un site Web réactif
- Travailler avec les classes Tailwind pour créer un site Web réactif
- Classes pour ajouter des effets de survol et de mise au point
- Classes pour ajouter des ombres aux éléments
- Classes pour travailler avec les tailles d'éléments
- Cours pour travailler avec le remplissage externe et interne des éléments
Résultat de la leçon: Nous avons créé une page adaptative pour tous les types d'appareils.
Tâche pratique : créer des boutons, ajouter des effets en cliquant dessus à l'aide des classes Tailwind
Jour trois
Disposition flexible Tailwind.
- Travailler avec la mise en page Tailwind Flex
- Classes pour aligner les éléments enfants dans un conteneur Flex
- Créer une carte avec le prix d'un produit
- Créer des indicateurs de progrès
- Travailler avec des pseudo-éléments dans Tailwind CSS
Résultat de la leçon: créé un conteneur Flex avec des fiches produits
Tâche pratique: créer une carte avec une description du produit.
Jour quatre
Système de grille dans Tailwind CSS.
- Propriétés Row-span et col-span
- Propriétés pour remplir automatiquement l'espace vide dans une grille avec des éléments
- Page de l'équipe du projet
Résultat de la leçon: créé une page d'équipe de projet adaptative à l'aide du système Tailwind Grid.
Tâche pratique: ajouter des effets aux éléments de la grille lorsque vous les survolez
8ème module
Le premier jour
Configuration du projet
- Mise en place du projet de site de candidature « Gérer »
- Création d'un en-tête de site Web réactif
- Création d'un menu hamburger à l'aide de JavaScript
- Créer une section de présentation avec un produit
Résultat de la leçon : créé le premier écran du site de l'application « Gérer »
Tâche pratique: ajouter une image d'arrière-plan au premier écran.
Deuxième jour
Création d'une section avec une description de l'application
- Section avec une description de l'application et de ses avantages
- Adapter le bloc créé à tous types d'appareils
- Section avec fonctionnement de l'application
- Appliquer des filtres Tailwind à une image
Résultat de la leçon: créé deux sections du site « Gérer »
Tâche pratique: créer une section supplémentaire avec l'historique de la création de l'application
Jour trois
Création d'une section sur l'équipe projet
- Section sur l'équipe
- Curseur utilisant Tailwind CSS et Javascript
- Cartes d'employé
Résultat de la leçon : créé une section sur l'équipe du projet
Tâche pratique : créer une section avec un bouton CTA
Jour quatre
Créer une section avec des prix
- Créer une section avec des prix
- Créer un pied de page de site Web réactif
- Terminer le projet
Résultat de la leçon : réalisation du projet, création du site internet de l'application « Gérer »
Tâche pratique: finaliser le projet, mettre le site sur Internet
9ème module
Le premier jour
Commencez à travailler sur votre propre projet.
- Sélectionnez un sujet de projet
- Commencez à développer votre propre site Web
Résultat de la leçon: un sujet a été choisi et le travail sur le projet a commencé
Tâche pratique: Travail de projet
Deuxième jour
Poursuite des travaux sur le projet
- Continuer à travailler sur le projet
- Corriger les erreurs dans le projet
Résultat de la leçon : création de pages de site internet
Tâche pratique : Travail de projet
Jour trois
Préparation d'une présentation de projet.
- Décrivez votre projet
- Créez un modèle de présentation pour défendre votre projet
- Terminer le projet
- Mettre le site sur Internet
Résultat de la leçon : préparé une présentation et répété le discours.
Tâche pratique: préparer une présentation du projet, mettre le site Internet sur Internet.
Jour quatre
Protection du projet.
- Finaliser la présentation du projet
- Défendre votre projet devant un public
Résultat de la leçon: Nous avons terminé le travail sur le projet de cours et l'avons présenté aux parents.
Tâche pratique : finaliser le projet, préparer et réaliser une présentation.