Développeur frontend - cours 47 600 roubles. de Loft School, formation 3 mois, Date 28 novembre 2023.
Miscellanea / / November 29, 2023
Connaissances et compétences
Toutes les connaissances nécessaires pour un développeur frontend.
Portefeuille
2 projets modernes et technologiques impressionnants dans votre portefeuille.
Certificat
Avec un score qui reflète votre niveau de connaissances et votre degré d’impact.
Démarrage du transporteur
Nous garantissons un emploi à tous les bons et excellents étudiants.
Ils donnent des connaissances, pas des réponses. Ils aiment expliquer et sont capables de transmettre des informations complexes dans un langage compréhensible. Exigeant sur la qualité de votre code: vous ne réussirez la mission que lorsque votre code sera parfait. Ils comprennent bien les autres et savent trouver une approche à tous les étudiants. Toujours prêt à aider.
Développement Web avancé Vue.js
Semaine 1 - Flux de travail
— Nous rencontrons le mentor et le groupe.
— À l'aide de l'assembly webpack, nous créons la mise en page sélectionnée pour le projet final.
— Nous publions le résultat sur Github et le soumettons au mentor pour vérification.
Ouverture du cours
1. Comment se déroule la formation (01:09:37)
Vue. Principales caractéristiques
1. Théorie (04:49)
2. Bonjour tout le monde (06:20)
3. Gestion des événements (02:38)
4. Gestion de plusieurs événements (01:19)
5. Valeurs dynamiques (01:30)
6. Introduction aux directives (05:40)
7. Directives abrégées (00:37)
8. Méthodes avec paramètres (01:36)
9. Modificateurs d'événement (08:52)
10. Propriétés calculées (10:50)
11. Observateurs (06:02)
12. Travailler avec les classes (03:37)
13. Travailler avec les propriétés CSS (02:49)
14. Accéder aux éléments du DOM (03:50)
15. Rendu conditionnel (04:46)
16. Listes de rendu (05:12)
17. Création d'un composant (04:16)
18. Composants locaux (02:44)
19. Réactivité des données (04:35)
20. Propriétés des composants (03:52)
21. Machines à sous (04:37)
22. Machines à sous avec lunette (04:52)
23. Événements personnalisés (04:27)
24. Téléportations (02:53)
Vue. Composants à fichier unique
1. Installation du projet. VUE-CLI (09:22)
2. Composant de fichier unique (03:18)
3. Travailler avec des styles (07:02)
4. Passage des attributs et des gestionnaires (02:53)
5. Fichiers individuels (01:26)
6. Validation des propriétés des composants (07:35)
7. Validation des événements utilisateurs (02:01)
8. Communication de données bidirectionnelle (04:11)
9. Modèle V personnalisé (05:51)
10. Crochets de cycle de vie (07:08)
11. Impuretés (04:40)
MNP
1. Qu’est-ce que npm? (05:50)
2. Installation et mise à jour de npm (02:33)
3. Aide avec npm (01:28)
4. Recherche et installation de packages (04:24)
5. Dépendances du package (02:09)
6. Fichier manifeste package.json (03:02)
7. Suppression et mise à jour des packages (03:02)
8. dépendances et devDependencies (01:51)
9. Webpack et npx (04:04)
10. scripts npm (04:02)
11. npm, git et github (02:40)
Fil
1. Fil (07:07)
Webpack. Les bases
1. Théorie (01:09)
2. Configuration minimale et lancement (04:41)
3. Nom du fichier (02:34)
4. Chargeurs (04:28)
5. Serveur de développement (02:43)
6. Plugins (02:34)
7. Rechercher des modules (03:18)
8. Sormaps (03:17)
9. Dev et al (02:42)
10. Types de modules (03:00)
11. Assemblage minimal (05h30)
ESLint. Présentation de la configuration
1. Introduction (01:26)
2. Installation et lancement (03:10)
3. Corrections de bugs (02:04)
4. Configuration (05:21)
5. Format de sortie (00:52)
Figma pour concepteur de mise en page
1. Figma. Interface (04:37)
2. Figma. Organisation du projet (01:32)
Boîte flexible
1. Introduction (00:45)
2. Conteneur flexible (01:43)
3. Alignement des axes majeurs (01:37)
4. Alignement des axes transversaux (01:50)
5. Aligner un seul élément (01:09)
6. Élément flexible - conteneur (00:53)
7. Direction des axes (03:18)
8. Conteneur multiligne (02:54)
9. Alignement du contenu multiligne (01:25)
10. Proportions (02:46)
11. Proportions de compression (01:24)
12. Taille de base (04:02)
13. Ordre des éléments (02:40)
GIT
1. Présentation (07:03)
2. Premiers pas avec Git (03:01)
3. Création d'un nouveau référentiel (01:09)
4. Ajout de fichiers à l'index Git (zone de surveillance) (06:49)
5. Créer un commit (07:17)
6. Validez la navigation. Annuler les modifications (12h10)
7. Cycle Git typique (03:34)
8. Branchement dans Git (11:27)
9. Conflits lors de la fusion de branches (06:06)
10. Sauvegarde temporaire (sans validation) des données (05:25)
11. Travailler avec des référentiels distants (20:04)
12. Utiliser les pages GitHub pour héberger des projets (04:31)
Vue. Atelier #1
1. Début du projet (05:24)
2. Composant d'en-tête (04:13)
3. Composant d'icône (05:06)
4. Affichage d'une liste de composants (02:56)
5. Basculer le composant (03:19)
Semaine 2 - Vue.js
— Nous rendons la mise en page adaptative.
— Nous implémenterons le bloc « Compétences » dans Vue.js.
— Nous implémenterons le bloc « Mes projets » dans Vue.js.
— Nous implémentons le bloc « Slider for reviews » à l'aide du plugin Vue.js.
Livre d'histoires
1. Installation (01:56)
2. Première histoire (04:35)
3. Connecter un composant (01:24)
4. Extension de la configuration (04:26)
5. Styles généraux (02:08)
6. Histoire du composant (05:23)
7. CDD (04:16)
8. Création d'un composant (02:28)
9. Appliquer un composant (02:29)
10. Journalisation des événements (03:29)
11. Module complémentaire d'arrière-plans (01:41)
12. Boutons complémentaires (02:28)
13. Source du module complémentaire (02:17)
14. Conclusion (01:11)
JavaScript-ES6
1. Interpolation de chaîne (07:39)
2. Simplifier les descriptions des méthodes (13:35)
3. Valeurs par défaut (30:08)
4. Devoir de déstructuration: Objets (07:30)
5. Nouvelles fonctionnalités et anciens navigateurs (13:07)
Asynchronie en JavaScript
1. Minuteries (23:44)
2. Chargement des images (22:21)
3. Promesses (36:29)
4. AJAX (32:28)
Axios. Bibliothèque de requêtes
1. Introduction (02:23)
2. Envoi d'une demande (02:12)
3. Aperçu de la configuration (04:30)
4. Corps de la demande (01:43)
5. Paramètres par défaut (01:38)
6. Intercepteurs (02:11)
7. Prestations (02:33)
8. attente asynchrone (01:18)
Vue. Atelier #2
1. Préparation (02:39)
2. Connecter un composant (02:16)
3. Sortie de contrôle (02:38)
4. Composante de progrès (05:09)
5. Requête au serveur (06:38)
6. Sortie de données (05:55)
Semaine 3 – JavaScript natif
— Nous créons le panneau d'administration.
— Nous étudions Storybook et l'appliquons dans notre projet.
— Nous effectuons le traitement (validation) nécessaire des formulaires de projet.
VueRouter. Routage dans le navigateur
1. Introduction (04:31)
2. Création de liens (02:41)
3. Navigation dans le logiciel (02:35)
4. Paramètres du chemin (04:42)
5. Paramètres en tant que propriétés (00:49)
6. Options avancées et 404 (03:29)
7. Itinéraires imbriqués (03:23)
8. Cours d'activités (02:37)
9. Diverses vues du routeur (01:08)
10. Importations dynamiques (02:00)
11. Belle URL (02:16)
Vuex. Gestionnaire d'État
1. Introduction (01:13)
2. Connexion (02h30)
3. Action (02:27)
4. Mutations (02:16)
5. Getteurs (02:02)
6. Application en pratique (08:07)
7. Fonctions d'assistant (02:59)
8. Modules (05:18)
9. Modules dynamiques (01:38)
Question Réponse
Vue. Atelier #3
1. Disposition (04:33)
2. Sortie de données (02:42)
3. Préparation pour l'animation (02:14)
4. Affichage des boutons (03:45)
5. Chargement de contenu supplémentaire (11:38)
6. Afficher la diapositive après la transition (02:17)
Semaine 4 - Vue.js, SPA
— Nous implémentons SPA dans le panneau d'administration.
— Nous étudions le travail avec les données via le stockage d'applications
— Nous utilisons ajax pour communiquer avec l'API, mettre en place des interactions client-serveur.
Autorisation. Jetons
1. Types d'autorisation (04:20)
2. GitHub OAuth (01:42)
3. Création d'une application GitHub (02:28)
4. Recevoir un jeton (08:38)
5. Stockage des données dans le code (01:46)
6. Protection de l'itinéraire (04:13)
Vue. Atelier #4
1. Préparation (01:33)
2. Créer une action (02:30)
3. Statut du téléchargement (04:01)
4. Demande (02:27)
5. Suppression des doublons (03:29)
6. Protection de l'itinéraire (03:23)
7. Déconnexion (00:51)
Semaine 5 - Pratique
— Nous affichons les données enregistrées du panneau d'administration sur la page de destination.
— Nous testons les composants.
— Travail en groupe sur un projet avec un mentor.
Vue.js. API de composition
1. Introduction (01:29)
2. Exemple général (03:57)
3. Fonction chanson (01:51)
4. Fonction réactive (00:55)
5. fonction toRef (01:35)
6. fonction toRefs (00:58)
7. Propriétés calculées (00:56)
8. fonction montre (01:41)
9. Fonction watchEffect (03:14)
10. fonction lecture seule (00:40)
11. Fonctions de test (02:30)
12. fonction non réf (01:27)
13. Crochets de cycle de vie (00:58)
14. Exemple. Aperçu du projet (00:53)
15. Exemple. Fonctionnalité de chargement (01:20)
16. Exemple. Catégories (02:20)
17. Exemple. Filtrage initial (02:46)
18. Exemple. Commutation du filtre (02:11)
19. Exemple. Autres fonctions de filtrage (02:03)
20. Exemple. Méthode de tri (03:05)
Test du code JS
1. Introduction (16h05)
2. Blague (15:47)
3. Les avantages des tests (09:01)
4. Couverture (10:02)
Vue.js. Tests de composants
1. Configuration des packages (04:39)
2. Wrapper de composants (04:13)
3. Que tester (02:48)
4. Premier essai (05:25)
5. Vérification de l'événement d'émission (03:44)
6. Transfert de propriétés (02:58)
7. Travailler avec des éléments de formulaire (05:42)
8. Paramètres généraux (01:15)
9. Moki (05:04)
10. Connexion des bibliothèques (02:32)
11. Test d'action (03:26)
12. Tester le magasin (02:53)
13. Test avec images (03:08)
Essai. Moki
1. Créer une maquette (02:39)
2. Travailler avec des arguments (01:39)
3. Valeur de retour (02:57)
4. Modules (04:24)
5. Minuteries (02:05)
Vue. Atelier #5
1. Composant simple (03:03)
2. Composant avec magasin (05:21)
3. Essai. Préparation (03:20)
4. Essai. Basculeur (02:38)
5. Essai. Problèmes (05:08)
Semaine 6 - Terminer le projet
— Nous finalisons le projet.
— Nous soumettons le projet à l'examen des mentors.
— Classement des diplômes.
Comment trouver un emploi dans l'informatique: trucs et astuces
1. Comment trouver un emploi dans l'informatique? Recherche, entretien et période probatoire (42:21)
2. Comment trouver des commandes de travail à distance et de freelance? (20:12)
3. Premier emploi en informatique – comment se comporter? Stages, emplois officiels et travail « contre nourriture » (14:11)
4. Comment réussir la période probatoire? (27:10)
5. Comment se préparer à un entretien dans une entreprise FAANG (08:52)
6. Le processus de chargement d'une page Web (25:19)
7. Entretien avec le programmeur - tout ce que vous devez savoir (01:24:07)
8. Résoudre un problème à partir d'un entretien avec un programmeur (19:36)
9. Entretien avec un développeur frontend (01:37:17)
Développement d'applications Web React.js
Semaine 1 - Introduction à React.js
— Nous faisons connaissance avec l'équipe du cours et les camarades de classe.
— Apprentissage de JSX et du DOM virtuel dans React.
— Nous étudions l'approche composante et les méthodes de transfert de données.
Connaissance
1. Ouverture du cours (05:41)
Je réagis.js
1. Qu'est-ce que React (07:05)
2. DOM virtuel (02:46)
3. JSX (06:10)
4. Rendu avec conditions (05:11)
5. Travailler avec des listes (02:45)
6. Composants (02:41)
7. Accessoires (01:45)
8. État (06:45)
9. Événements (02:26)
10. Réagir aux outils de développement (03:58)
II React.js
1. Méthodes de cycle de vie (05:19)
2. Composants - fonctions (01:29)
3. Composant pur (02:54)
4. Événements synthétiques (01:42)
5. Travailler avec des formulaires (02:51)
6. Gestion des erreurs (01:39)
Analyse des tâches #1
1. Atelier #1 (30:36)
Semaine 2 – Modèles React.js, tests
— Nous étudions les composants, les éléments et les instances de la classe de composants.
— Nous considérons la bibliothèque Recompose, les composants d'ordre élevé et les modèles Render Props.
— Nous comprenons les avantages des tests, étudions Jest, Enzyme, Snapshots.
III Réagir
1. Introduction (01:43)
2. Types d'accessoires (10:18)
3. Contexte (05:19)
4. Réfs (05:18)
5. Portails (05:02)
6. Crochets (10:42)
IV React.js
1. Composants d'ordre élevé (HOC) - Composants d'ordre supérieur (10:33)
2. Retransmission (HOC) (04:31)
3. Modèle d'accessoires de rendu (05:25)
4. Recomposition de la bibliothèque HOK (10:32)
5. Profilage (04:02)
Essai
1. Introduction (05:06)
2. Testeur (02:51)
3. Test DSL (08:41)
4. Enzyme (06:57)
5. Instantanés (03:09)
6. Sagas de tests (05:01)
7. Bibliothèque de tests React (06:32)
Analyse des tâches #2
1. Atelier #2 (27:54)
Semaine 3 - Redux, routage
— Nous étudions le routage: le routage simple, le routage avec Switch, ainsi que le routage imbriqué.
— Se familiariser avec la bibliothèque Redux: concepts de base et concepts de Store, Actions, Réducteurs, React-redux.
— Le middleware est considéré comme un moyen de travailler avec Sideeffect.
Routage dans le navigateur
1. API d'historique (02:48)
2. Routage simple (05:39)
3. Routage depuis le commutateur (04:16)
4. Routage imbriqué (05:32)
5. Itinéraire privé (04:39)
Je reduxe
1. Introduction (04:07)
2. Magasin (05:03)
3. Actions (02:17)
4. Réducteurs (07:56)
5. Réagir-redux (03:26)
II Redux
1. Introduction (03:11)
2. CreateActions (actions redux) (09:13)
3. Intergiciel (07:54)
4. Gérer les actions (05:52)
5. Sélecteurs (06:17)
6. Resélectionner (04:49)
7. Canards (06:56)
Analyse des tâches #3
1. Atelier #3 (39:13)
Semaine 4 - Redux-saga
— Nous étudions la bibliothèque Redux-saga. Répéter les fonctions du générateur*. Apprenons à les exécuter en parallèle.
— Regardons la méthode Take. Étudions la sélection comme moyen d'obtenir des données du Store.
— Nous étudions des moyens de styliser une application React. Nous étudions les bibliothèques ClassNames, StyledComponents, BrowserList, MaterialUI.
I Redux-saga
1. Introduction (00:57)
2. Aperçu (02:08)
3. Générateurs (04:11)
4. Ajout de sagas (02:07)
5. Réagir aux actions (03:53)
6. Lancements de fonctionnalités (02:06)
II Redux-saga
1. Introduction (00:27)
2. Effectuer des effets en parallèle (03:41)
3. Prendre effet (02:45)
4. Sélectionner un effet (02:04)
5. Annuler les effets (04:05)
Travailler avec des styles
1. Introduction (01:34)
2. Styles ARC (05:21)
3. Noms de classe (06:32)
4. Composants stylés (07:11)
5. Liste des navigateurs (01:37)
6. Interface utilisateur matérielle (08:13)
Analyse des tâches #4
1. Atelier #4 (09:55)
Semaine 5 – Formulaires, CI & DI & Gestion des erreurs client
— Nous envisageons de travailler avec des formulaires utilisant les bibliothèques Formik, Redux Forms, React Final Form.
— Nous réfléchissons à des méthodes permettant d'assurer la qualité du code de production. Nous analysons des outils tels que: Husky, TravisCI, HerokuNow.
— Nous étudions un ensemble de bibliothèques utiles au développement (Storybook, RamdaJS, Axios).
— Nous envisageons TypeScript.
Travailler avec des formulaires
1. Introduction (05:07)
2. Formik (08:51)
3. Formulaire Redux (06:22)
4. Réagir au formulaire final (06:36)
Gestion des erreurs CI & DI & Client
1. Introduction (05:07)
2. Husky (02:32)
3. CI utilisant TravisCI (03:32)
4. Déployer sur Heroku (04:57)
5. Arceau de sécurité (02:00)
Un ensemble de bibliothèques utiles pour le développement
1. Livre d'histoires (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Tapuscrit (09:31)
Analyse des tâches #5
1. Atelier #5 (13:17)
Semaine 6 - Travail de projet
— Nous complétons la demande et l'envoyons pour examen.
Comment trouver un emploi dans l'informatique: trucs et astuces
1. Comment trouver un emploi dans l'informatique? Recherche, entretien et période probatoire (42:21)
2. Comment trouver des commandes de travail à distance et de freelance? (20:12)
3. Premier emploi en informatique – comment se comporter? Stages, emplois officiels et travail « contre nourriture » (14:11)
4. Comment réussir la période probatoire? (27:10)
5. Comment se préparer à un entretien dans une entreprise FAANG (08:52)
6. Le processus de chargement d'une page Web (25:19)
7. Entretien avec le programmeur - tout ce que vous devez savoir (01:24:07)
8. Résoudre un problème à partir d'un entretien avec un programmeur (19:36)
9. Entretien avec un développeur frontend (01:37:17)