Parcours d'apprentissage web front-end 2017 : Introduction rapide au développement WEB front-end. Tout d'abord, je voudrais partager mon expérience. Si vous voulez bien faire quelque chose, vous devez faire des efforts. Ensuite, vous devez apprendre davantage, réfléchir davantage, pratiquer davantage, communiquer davantage, résumer davantage, trouver vos propres problèmes. et il faut ensuite les surmonter. Dans les bonnes situations, des ajustements doivent souvent être faits à temps. Si un novice apprend le front-end, il doit réfléchir à pourquoi il veut l'apprendre et quelle est sa mentalité, puis bien se positionner, demander conseil à plus d'experts et enseigner à plus de personnes qui ne sont pas aussi bonnes que lui. permettez-lui souvent de grandir. Soyez rapide et ne soyez pas impatient. Les débutants peuvent regarder des didacticiels vidéo d'introduction, puis acheter des livres et réaliser de petits projets. Vous devez apprendre à investir, analyser votre situation et vos capacités actuelles et procéder à des ajustements en temps réel. Vous devez avoir vos propres idées et savoir innover. . Vous devez ici vous analyser et trouver une méthode d’apprentissage adaptée.
1. Front-end WEB - apprentissage des malentendus
Page Web la production est un ordinateur C'est un cours auquel les étudiants professionnels seront exposés pendant leurs études universitaires. Le premier environnement de développement intégré (IDE) utilisé pour apprendre la production de pages Web doit être Dreamweaver. Cet IDE « explosif » WYSIWYG crée des pages Web pour nous. commodité.
Se lancer rapidement et obtenir des résultats rapidement nous a fait tomber amoureux de la production de pages web sans même nous en rendre compte. À l'heure actuelle, beaucoup de gens tomberont dans un malentendu, c'est-à-dire qu'avec l'aide d'un si bel IDE, des pages Web peuvent être créées rapidement et facilement en cliquant sur le menu avec la souris.
Alors pourquoi devons-nous encore apprendre le HTML, le CSS, le JavaScript, jQuery et d'autres codes en dur ? N'est-ce pas la recherche de la complexité plutôt que de la simplicité ?
Mais à mesure que l'étude s'approfondit, nous découvrirons que nous sommes entrés dans un dilemme : une dépendance excessive à l'IDE nous amène à ne pas connaître l'essence de sa mise en œuvre, à la connaître mais pas pourquoi.
Ainsi, lorsqu'il y a un problème avec l'effet de page, nous ne savons pas, sans parler de savoir comment optimiser la page et compléter certaines applications plus avancées. La raison est évidente : l'IDE intelligent comble notre paresse, nous obligeant à ignorer le contenu le plus essentiel derrière les magnifiques pages Web : le code.
La bonne direction vaut mieux que des efforts inutiles
Il y a deux fourmis qui essaient de grimper par-dessus une section de mur à la recherche de nourriture de l’autre côté du mur. Lorsqu'une fourmi atteint le pied du mur, elle grimpe sans hésitation, mais chaque fois qu'elle grimpe à mi-chemin, elle tombe à cause de la fatigue et de la fatigue. Même s'il n'a pas été découragé, il est tombé à maintes reprises, s'est rapidement ajusté et a recommencé à grimper.
L'autre fourmi l'observa et décida de contourner le mur. Bientôt, la fourmi contourna le mur jusqu'à la nourriture et commença à en profiter ; tandis que l'autre fourmi tombait et recommençait.
Souvent, en plus du courage et de la persévérance, le succès nécessite une direction. Peut-être qu’avec une bonne direction, le succès viendra plus vite qu’on ne l’imaginait. Si vous courez sur la mauvaise route, peu importe vos efforts, ce sera en vain. Il en va de même pour l'apprentissage du Web front-end. Vous devez d'abord choisir un parcours d'apprentissage correct.
2. Front-end WEB - parcours d'apprentissage
La première étape - apprentissage HTML
HyperText Markup Language (HTML en abrégé) est le squelette d'une page Web. Qu'il s'agisse d'une page Web statique ou d'une page Web dynamique, ce qui est finalement renvoyé au navigateur est le code HTML, et. le navigateur interprète le code HTML rendu et présenté à l'utilisateur. Par conséquent, nous devons maîtriser la structure de base ainsi que les balises et attributs communs du HTML.
L'apprentissage HTML est un processus de mémoire et de compréhension. Pendant le processus d'apprentissage, vous pouvez utiliser la vue « fractionnée » de Dreamweaver pour faciliter l'apprentissage. Voyez l'effet dans la vue "Conception", apprenez l'essence dans la vue "Code" et maximisez les avantages des différentes vues. Cette méthode d'apprentissage comparatif compense l'ennui de la simple mémorisation des balises et des attributs HTML. à tous les débutants. Ça doit être génial pour les petits amis !
Après avoir appris le HTML, nous venons de maîtriser les méthodes de production de diverses « matières premières » si nous voulons aborder A. Le bâtiment doit encore combiner et disposer ces « matières premières » selon notre plan de conception et procéder à quelques embellissements.
Cours recommandés par le site Web chinois php :
Manuel : Manuel de développement HTML
Le HTML est facile à apprendre ! Je suis sûr que vous l'apprendrez rapidement ! Exemples HTML Ce didacticiel contient des centaines d'exemples HTML. Grâce à l'éditeur de ce site, vous pouvez facilement modifier le HTML en ligne et visualiser les résultats de l'exemple.
Vidéo : Tutoriel vidéo pour apprendre le HTML en un clin d'œil
"Tutoriel vidéo pour apprendre le HTML en un clin d'œil" part des concepts les plus basiques et va plus loin étape par étape. Amenez tout le monde à apprendre le HTML, à comprendre la signification et l'utilisation de base de diverses balises couramment utilisées et à acquérir des connaissances en HTML pour jeter les bases d'un apprentissage futur.
La deuxième étape - Apprentissage CSS
CSS est l'abréviation de l'anglais Cascading Style Sheets, appelées feuilles de style en cascade, qui peuvent véritablement atteindre les performances du Web pages et un langage de conception de style pour la séparation du contenu. Par rapport aux performances du HTML traditionnel, ses styles peuvent être réutilisés, ce qui améliore considérablement notre vitesse de développement et réduit les coûts de maintenance.
En même temps, le modèle de boîte, la disposition relative, la disposition absolue, etc. en CSS peuvent obtenir un contrôle précis au niveau des pixels de la position et de la disposition de chaque objet dans la page Web. . Grâce à cette étape d’apprentissage, nous pouvons mener à bien la construction d’un « bâtiment ».
Une fois la construction du « bâtiment » terminée, nous pouvons le remettre aux utilisateurs pour qu'ils l'utilisent. Cependant, si nous voulons que les utilisateurs aient une meilleure expérience, nous pouvons également « décorer » davantage le. "bâtiment" pour qu'il ait l'air un peu plus "luxueux".
cours recommandés par le site chinois php :
Manuel : Manuel CSS en ligne
《CSS en ligne Manuel》En utilisant CSS, nous pouvons grandement améliorer l'efficacité du développement Web ! Ce manuel CSS en ligne contient des centaines d'exemples CSS en ligne Grâce à l'éditeur en ligne de ce site, vous pouvez éditer CSS en ligne et visualiser les effets modifiés en ligne.
Vidéo : Tutoriel vidéo sur la façon d'apprendre le CSS du bout des doigts
"Tutoriel vidéo sur la façon d'apprendre le CSS du bout des doigts " Nous apprendrons l'utilisation de la méthode CSS, la différence entre les sélecteurs CSS et l'utilisation courante du CSS et du HTML.
La troisième étape - Apprentissage de JavaScript
JavaScript est un langage de script largement utilisé côté client. JavaScript nous fournit des fonctions et des objets intégrés. et les opérations DOM, avec l'aide de ces contenus, nous pouvons implémenter des effets spéciaux, des vérifications, des interactions, etc. côté client pour rendre nos pages moins ennuyeuses. Diaosi peut instantanément contre-attaquer les riches et les beaux ?
En ce moment, peut-être êtes-vous encore plongé dans la surprise que JavaScript vous a apporté, mais votre chef de projet vous a soudainement crié dessus
"Cet effet est incompatible sous le navigateur ××, veuillez réessayer..."
"Incompatible ?
« Oh non, tu me trompes ! Il m'a fallu une nuit pour écrire des centaines de lignes de code pour le faire ! »
La compatibilité et la complexité de JavaScript nous donnent parfois mal à la tête, mais heureusement il existe des « maîtres » qui nous aident à l'encapsuler.
php Cours recommandés par le site chinois :
Manuel :
Manuel de référence JavaScript
"Manuel de référence JavaScript" est un manuel de référence Lorsque vous étudiez et travaillez, si vous rencontrez des connaissances sur JavaScript que vous ne comprenez pas, vous pouvez venir consulter. notre manuel. Il existe de nombreux exemples auxquels chacun peut se référer et dont il peut tirer des leçons. Vidéo :Tutoriel vidéo élémentaire JavaScript
La quatrième étape - Apprentissage JQuery
jQuery est une bibliothèque JavaScript légère et gratuite, open source, compatible avec divers navigateurs (jQuery2.0 et les versions ultérieures ont abandonné la prise en charge des navigateurs IE6/7/8), et il existe désormais de nombreux Choisissez parmi des plug-ins basés sur jQuery, qui sont plus pratiques et plus rapides lorsque nous implémentons des effets dynamiques riches, économisant considérablement notre temps de développement et améliorant la vitesse de développement. Cela reflète également pleinement son objectif principal d'écrire moins, faire plus. Ça fait du bien ! Est-ce possible ?
Des « bâtiments de luxe » sortent de terre, mais les bâtiments sont construits ainsi chaque jour, jour après jour, année après année, c'est tellement fastidieux ! Est-ce que chaque composant du bâtiment peut être modulaire et assemblé comme des blocs empilés lors de la construction d'un bâtiment ? La réponse est oui ?
Cette idée convient également au développement Web front-end, c'est pourquoi divers frameworks front-end sont apparus. Celui recommandé à tout le monde ici est Bootstrap.
Bootstrap est une boîte à outils open source pour le développement front-end lancée par Twitter. Il s'agit d'un framework CSS/HTML et prend en charge la mise en page réactive. Il est devenu très populaire une fois lancé et a toujours été un projet open source populaire sur GitHub.
Pendant le processus de développement du projet, nous pouvons utiliser les styles CSS, les composants, les plug-ins Java, etc. fournis par Bootstrap pour compléter rapidement la mise en page et les paramètres de style, puis faire des ajustements ciblés du style et du développement basé sur le framework raccourcissent considérablement le cycle de développement. C'est génial de se tenir sur les épaules de géants !
php Cours de chinois recommandé :
Manuel : Manuel de référence chinois jQuery
"Manuel de référence chinois jQuery" vous apprendra à apprendre les connaissances jQuery de base à avancées. Le manuel contient un grand nombre d'exemples jQuery en ligne, vous pouvez exécuter les exemples directement pour voir
Vidéo : Tutoriel vidéo de base jquery
Il est très simple d'utiliser jQuery Il est facile de créer des pages avec du contenu riche. Dans notre cours "Tutoriel vidéo de base jquery", il y a quelques effets réalisés à l'aide de notre jQuery, comme nos effets d'animation, effets de glissement, fondu d'entrée. et effets de fondu, etc.
3. Front-end WEB - suggestions d'apprentissage
Enfin, laissez-moi vous parler de quelques suggestions et méthodes d'apprentissage du Web. l'extrémité avant.
Un problème auquel il faut prêter attention lors de la mise en page CSS est que de nombreux étudiants ne disposent pas d'une analyse globale de la mise en page et ne peuvent pas saisir la relation imbriquée entre les cases de la page d'un point de vue macro. , ils sont donc impatients de le faire. Cela rendra la relation entre les éléments de la page très confuse et il est facile que les cases soient égarées lorsqu'elles flottent. Il est recommandé d'adopter l'idée de "de haut en bas et d'affiner progressivement" lors de la mise en page. Utilisez d'abord plusieurs cases pour diviser la page dans son ensemble, puis continuez progressivement à imbriquer les cases dans les cases.
"Un gentleman n'est pas différent des autres et il est doué pour les fausses choses." Dans le processus d'apprentissage, vous devriez parcourir des sites Web plus excellents et être doué pour l'analyse. et en vous appuyant sur leurs idées de conception et en termes de méthodes de mise en page, vous pouvez acquérir de vastes connaissances en voyant beaucoup de choses, puis vous pouvez les intégrer et utiliser les points forts des autres pour votre propre usage.
En même temps, vous devez savoir utiliser Firebug comme outil. D'une part, Firebug peut nous aider à déboguer nos propres pages pendant notre processus d'apprentissage. D'autre part, nous pouvons utiliser Firebug pour visualiser et analyser facilement le code source des sites Web d'autres personnes. "Voler" est aussi une compétence ! >
La croissance et les fondations de chacun sont différentes, et vous devez les mettre en œuvre en fonction de votre situation réelle. Permettez-moi de le répéter. Le cœur du front-end est js et css. Ce n'est pas difficile, mais cela nécessite une accumulation. Voici comment je vois le front-end :
Le CSS est comme une bouteille de vin, récupérez le produit
html et css concernent uniquement les balises et les attributs de sélecteur, mais il n'est pas facile d'écrire une page qui soit évolutive, robuste ou maintenable. Désormais, lors de l'écriture de la réflexion conditionnelle de base de la page, il ne s'agit pas de savoir comment la terminer rapidement, mais de réfléchir à la manière de terminer rapidement les tâches requises avec un minimum de modifications de code si l'interface doit être modifiée. Il s’agit d’un triple test d’endurance frontale, de force physique et d’intelligence.
js est comme une épée, il faut l'aiguiser
js était juste Par expérience, avec l'évolution de la technologie et de la société, les rôles assumés deviennent de plus en plus importants. Quand j'ai commencé à jouer avec jQuery, j'avais l'impression de connaître déjà js, mais en fait ce n'était que la pointe de l'iceberg. À mesure que nous en apprenons de plus en plus sur js, il est à la fois pervers et mignon, amusant et difficile à contrôler. Il présente de nombreux problèmes de compatibilité, mais résoudre la compatibilité est notre moyen fondamental de survie. En regardant d'ajax à jsmvc, la marée de chargement élevé devient de plus en plus haute
La vie est un rêve, il faut le réaliser
La technologie n'est qu'une partie de la vie. J'étais ambitieux. , mais maintenant je garde la tête baissée et j'écris du code. Changez ce qui peut être changé et acceptez ce qui ne peut pas être changé. La vie est limitée, les frères se battent jour et nuit. L'attitude envers l'apprentissage de la vie est la suivante : ni impatiente ni impatiente, ni rapide ni lente. Persévérez et croyez en vous. Ne demandez pas de changer le monde, mais demandez de changer votre propre vie. Ne demandez pas un pas rapide, mais demandez un pas à la fois. Grâce à la souffrance, elle nous rend plus fort intérieurement. Grâce aux revers, ils nous font continuer à grandir. Grâce aux bugs, ils approfondissent notre réflexion. Grâce au front-end, il nous a encore plus fait croire qu'il faut dix-huit sortes d'arts martiaux pour soutenir un ciel.
Nous sommes un groupe de jeunes qui aiment l'informatique. Si vous aimez aussi l'informatique et le développement HTML5, veuillez vous connecter à m.sbmmt.com pour apprendre en ligne et laissez-nous nous exprimer. nos rêves ensemble.
Recommandations associées :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
