Création de site internet Développement front-end - cours gratuit de l'école de programmation en ligne pour enfants Hello World, formation 44 heures, Date: 3 décembre 2023.
Miscellanea / / December 06, 2023
Comment fonctionne Internet
Parlons des concepts de base d'Internet et de son architecture. Découvrons ce qu'est une architecture de domaine, d'hébergement, client-serveur. Configurons l'environnement de travail et parlons des trois piliers du développement Front-end: HTML, CSS et JavaScript.
HTML
Structure des documents HTML
Créons les premières pages HTML et regardons des exemples de pages Web simples et complexes. Voyons quels blocs devraient être sur notre page. Faisons en sorte que nos pages soient liées les unes aux autres, découvrons en quoi le texte diffère de l'hypertexte et quels sont les balises et les attributs.
Travailler avec du texte
Apprenons à travailler correctement avec du texte en HTML: divisez-le en paragraphes, indiquez les titres et les sous-titres. Apprenons à faire des listes numérotées et à puces et à citer les classiques.
Liens et images
Faisons connaissance avec les liens plus en détail et apprenons également à insérer des images et à les utiliser comme liens.
Disposition du tableau
Créons notre premier tableau et découvrons de quelles balises il se compose. Apprenons à fusionner des cellules, à modifier le nombre de lignes et de colonnes, à aligner le texte et bien plus encore. Nous apprendrons également les conseils de base du designer pour embellir votre table.
Introduction aux formulaires
Créons notre premier formulaire, apprenons à utiliser les champs de saisie, les listes déroulantes, les cases à cocher et, bien sûr, les boutons. Étudions d'autres éléments de formulaire qui nous seront utiles à l'avenir.
CSS
Introduction au CSS
Rappelons ce qu'est CSS et comment l'utiliser. Apprenons à utiliser CSS lorsque vous travaillez avec des pages HTML. Étudions la syntaxe CSS et ce que sont les sélecteurs, l'héritage et avec quelle priorité nos styles sont appliqués à un document HTML.
Sélecteurs
Étudions les sélecteurs plus en détail. Apprenons comment accéder à un ou plusieurs éléments, quelle est la différence entre une classe et une pseudo-classe et un élément d'un pseudo-élément. Jetons un coup d'œil aux directives CSS et découvrons ce que les gens aiment poser sur CSS lors des entretiens.
Héritage, cascade et priorité
On apprend que retard de croissance et cascadeurs ne sont pas issus du même domaine. Comprenons les principes selon lesquels les styles CSS sont appliqués aux éléments HTML.
Décoration de texte
Revenons à notre point de départ: au texte. Apprenons à rendre notre texte beau et convivial à l'aide des propriétés CSS: gras, italique, taille, couleur, arrière-plan et autres.
Modèle de document en bloc
Apprenons les balises div et span, ainsi que comment définir la taille des éléments, le remplissage et les bordures. Comprenons comment le modèle de bloc d'un document est formé et quelles sont les capacités dont nous disposons pour positionner les éléments.
Javascript
Présentation de JavaScript
Faisons connaissance avec le troisième pilier du développement Front-end - JavaScript. Découvrons ce que sont les variables, les types de données et pourquoi elles sont nécessaires. Et bien sûr, nous écrirons notre premier programme.
Conditions
Rappelons la logique, les opérations logiques et leurs combinaisons. Que la force et le contrôle soient avec nous.
Cycles
Apprenons à faire beaucoup de choses tout en écrivant peu de code. Comprenons qu'un cycle dans un cycle est simple, mais il faut être prudent.
Tableaux
Il y a des masses de glace, des forêts et des tableaux en programmation. Nous étudierons ce qu’ils ont en commun et en quoi ils diffèrent dans cette leçon. Astuce: les boucles de la leçon précédente nous aideront beaucoup.
Les fonctions
Si les variables et leur nom correct sont l'ABC de la programmation, alors la capacité de travailler avec des fonctions et de leur choisir des noms appropriés est déjà une recette. Nous apprendrons comment diviser un programme en blocs logiques et pourquoi cela est important dans cette leçon.
Objets
Nous nous familiariserons avec le concept d'objets, de méthodes et commencerons à nous familiariser avec les principes de la POO.
Introduction au DOM
JavaScript serait inutile s'il ne pouvait pas interagir avec un document HTML. Nous apprendrons ce qu'est le DOM (Document Object Model), mais plus important encore, nous apprendrons à travailler avec HTML et CSS via JavaScript.
Gestion des événements
Nous allons maintenant passer au niveau supérieur et apprendre à réagir et à interagir avec l'utilisateur à l'aide de JavaScript. Nous découvrirons également pourquoi les événements JavaScript peuvent bouillonner et couler.
HTML5 et CSS3
HTML5: quoi de neuf et pourquoi ?
Découvrons quels changements ont eu lieu dans HTML5 et pourquoi. Étudions de nouveaux éléments et analysons des cas de leur utilisation correcte.
Éléments de positionnement et grille
Examinons de nouvelles façons de structurer les pages et d'y positionner les éléments.
Formulaires HTML5
Explorons le côté obscur du pouvoir et pratiquons-nous avec les nouveaux formulaires HTML5, ainsi qu'avec les modifications apportées aux anciens. Travaillons avec de nouveaux types de champs pour saisir des dates, des couleurs, des nombres et comment inviter l'utilisateur à lui rendre la vie un peu plus facile.
Audio et vidéo
Dans ce tutoriel, vous êtes à la fois le DJ et le monteur. Nous n'aurons pas le temps de créer notre propre Youtube pendant cette leçon, mais nous nous efforcerons de créer un prototype avec des fonctionnalités de base.
Travailler avec du texte en CSS3
Découvrons quelles sont les opportunités et les recommandations pour le formatage du texte dans la dernière version de la norme.
Effets de transition et de transformation en CSS3
Apprenons à créer une animation et divers effets en utilisant CSS3. Faisons connaissance avec les pièges liés à la création de tels effets.
Disposition adaptative
Voyons pourquoi vous devez effectuer une mise en page adaptative et quand cela est inutile et peut causer des dommages. Examinons la syntaxe de base et, bien sûr, pratiquons la mise en page adaptative.
Flexbox et grille CSS
Nous découvrirons les approches modernes de disposition des blocs, ainsi que les difficultés rencontrées lors de leur utilisation.
Préprocesseurs CSS: LESS et SASS
Vous souhaitez utiliser des variables en CSS? Facilement! Découvrez les choses intéressantes que vous pouvez faire en utilisant les préprocesseurs CSS.
JavaScript à un nouveau niveau
ES-2015+
Qu'est-ce que le JavaScript moderne, le « mode strict » et comment vivre avec tout cela.
POO en JavaScript
Étudions comment les classes sont structurées dans le JavaScript moderne et pourquoi elles sont utilisées si tout peut être fait à l'aide de fonctions. Comment fonctionne l'héritage et quelles autres façons de créer des classes existent dans JS.
Fonctions en détail
Découvrons ce que sont la déclaration de fonction et l'expression de fonction, apprenons à appeler une fonction sans nom. Regardons l'expression « liaison contextuelle ».
AJAX et JSON
Passons à un nouveau niveau en tant que développeurs, apprenons à faire des requêtes HTTP et apprenons comment le serveur et le client peuvent communiquer entre eux et ne pas se disputer.
Expressions régulières
"Si vous avez un problème et que vous voulez le résoudre avec des expressions régulières, alors vous avez déjà deux problèmes." Apprenons comment éviter de vous tirer une balle dans le pied en utilisant des expressions régulières.
Constructeurs, exécuteurs de tâches et gestion des dépendances
Bower, npm, gulp, Grunt, webpack et co. Il n'y a rien de compliqué à cela, mais vous devrez le comprendre.
Tests en JavaScript
Là où il y a du code, il y a toujours des erreurs. Vous apprendrez comment minimiser leur nombre et quelles pratiques et outils nous y aideront.
Algorithmes
Nous apprendrons à écrire du code pour que plus tard le processeur et le navigateur ne subissent pas de douleurs atroces lors du lancement de votre programme.
RéagirJS
Introduction à ReactJS
Faisons connaissance avec ReactJS, apprenons à écrire des composants simples et comparons-le avec d'autres frameworks populaires. Faisons connaissance avec le concept de Virtual DOM.
Architecture et configuration des applications React
Découvrons quelles actions nous devons effectuer pour non seulement écrire dans React, mais aussi pour le faire aussi efficacement et facilement que possible.
Création de la première application dans ReactJS
Examinons de plus près JSX, ReactComponent, ReactDOM.render, fonction Render. Nous configurons et lançons la première application, établissons des relations entre les composants et traitons les événements.
Routage et ReactJS
Qu'est-ce que le routage? Faisons connaissance avec ReactRouter et ses fonctionnalités; Nous organisons le routage dans notre application.