Que faut-il savoir pour devenir ingénieur développement web front-end ?-tutoriel HTML-php.cn

Qu'est-ce que le front-end

Ingénieur de développement Web front-end, dont la principale responsabilité est d'utiliser diverses technologies Web telles que (X)HTML/CSS/JavaScript/ DOM/Flash pour développer des produits Développement d'interfaces. Produisez du code optimisé standard, ajoutez des fonctions dynamiques interactives, développez du javascript et combinez-le avec la technologie de développement en arrière-plan pour simuler l'effet global, effectuez un développement Web qui enrichit Internet et s'engage à améliorer l'expérience utilisateur grâce à la technologie. (Cela vient de Baidu, c'est tellement officiel)

Au début, je pensais que le front-end était html+css+javascript, mais pour autant que je sache jusqu'à présent, le front-end est divisé en plusieurs positions, comme la reconstruction, l'ingénieur front-end javascript, l'ingénieur front-end des nœuds, Il semble que Tencent ait également un concepteur d'interaction front-end. Bien sûr, il y a aussi un ingénieur full-stack qui comprend tout. atteindre. (Avis personnel)

Démarrer avec le html, le css et le javascript

Au début, j'étudiais sur le site w3school. À cette époque, je ne connaissais pas. où aller ailleurs qu’ici. Etudier, et je ne sais pas comment étudier. Cependant, je pense qu'il est relativement normal de commencer ici. Bien que de nombreux points de connaissances ne soient pas très complets, il suffit à un novice de se familiariser avec les balises html et de voir l'effet des pages statiques.
Si vous voulez apprendre, commencez par le HTML, étudiez attentivement chaque chapitre, puis tapez le code selon le tutoriel sur le Bloc-notes (familier)
Après avoir appris le HTML, vous pouvez commencer à apprendre les styles CSS. Vous devez encore lire et taper étape par étape, et vous familiariser progressivement avec les différents sélecteurs CSS. Mais il ne suffit pas de finir d'étudier ici, car les tutoriels ici ne sont pas très clairs sur de nombreux modèles et plusieurs positionnements. Ainsi après avoir étudié cela, vous pouvez vous rendre au MOOC pour apprendre les bases de la mise en page web et maîtriser les trois grandes techniques de mise en page. —— Mise en page fluide, mise en page flottante et mise en page de positionnement absolu ; apprenez le flux de documents standard, le modèle de boîte, l'attribut float et l'attribut de position. Jetez ensuite un œil à la couche fixe. Vous devriez maintenant avoir une compréhension de base du fonctionnement du CSS.
Alors familiarisons-nous avec la façon d'utiliser les CSS pour la mise en page Web et la séparation de la structure de mise en page simple et des principes de performance des pages Web. Après avoir regardé ces deux vidéos, vous devriez avoir une compréhension plus approfondie. compréhension du HTML et du CSS.
À l'heure actuelle, vous pouvez retourner à w3school pour apprendre quelques points de connaissance de CSS3 et HTML5, mais vous devez d'abord suivre le processus pour vous familiariser avec diverses nouvelles balises. Après avoir appris, vous pouvez d'abord consulter les options de l'éditeur ci-dessous, puis revenir.
Ensuite, vous pouvez commencer à apprendre les bases du javascript sur le blog de Liao Xuefeng. Après avoir lu le didacticiel javascript, vous pouvez jeter un œil à la vérification des formulaires, aux couches contextuelles et à l'activation des onglets. le MOOC Ici, vous pouvez commencer à ressentir la magie du javascript.

Sélection de l'éditeur

Vous pouvez simplement utiliser l'éditeur fourni avec la fenêtre au début et changer le suffixe en .html après l'écriture. Il peut être ouvert dans le navigateur.
nodepad++, je n'ai pas beaucoup utilisé cet éditeur, mais si vous êtes très bon, vous pouvez l'utiliser pour la programmation.
Il est fortement déconseillé d'utiliser l'éditeur Dreamweaver, car de nombreux codes sont générés automatiquement. Bien qu'il soit très pratique, il n'est pas propice à l'apprentissage et l'effet est très. pauvre. À mon avis, cet éditeur est réservé aux personnes qui ne sont pas programmeurs.
sublime Test, cet éditeur est fortement recommandé par moi personnellement. Si vous aimez regarder des vidéos d'apprentissage, vous pouvez aller sur le MOOC pour regarder le sublime tutoriel. vous pouvez aller sur le jardin du blog pour le sublime tuto Look.
vim, bien que cet éditeur soit facile à utiliser, il n'est pas recommandé aux débutants. Après tout, je ne suis pas très doué pour l'utiliser.

Réponse

En réponse à la question soulevée par l'ami Jian dans l'article précédent, je voudrais réitérer ici que je ne suis pas un encore un expert technique, je ne suis qu'un petit salaud qui vient de commencer à travailler sur le front-end, alors ne soyez pas offensé si j'ai mal écrit des connaissances techniques, je vous dérangerais également de me le dire dans les commentaires. vous beaucoup.
Pour certains amis qui souhaitent ajouter l'éditeur sur WeChat, QQ, etc., je voudrais m'excuser d'avance, je ne veux pas que d'autres choses interfèrent avec ma vie personnelle. De plus, comme l'examen final arrive bientôt et que je suis en pleine révision, j'utilise rarement WeChat QQ. Si des amis ont des questions ou des suggestions et souhaitent contacter l'éditeur, ils peuvent envoyer un e-mail au 835657506@qq. .com, ou veuillez nous contacter directement au 835657506@qq.com Contactez-moi par SMS.

Apprentissage approfondi du HTML, du CSS et d'autres outils

Je crois qu'après avoir acquis les compétences mentionnées dans l'article précédent, vous aurez un meilleure compréhension du HTML et du CSS. Il devrait y avoir une compréhension et une utilisation préliminaires. À ce stade, vous pouvez créer vos propres idées ou imiter certains sites Web pour créer de petites pages complètes afin de vous familiariser davantage avec le HTML et le CSS. Par exemple, j'ai déjà créé une page de CV personnelle et imité QQ pour créer une page de connexion et d'inscription. ou les garçons peuvent le faire. Certaines pages telles que les souhaits d'anniversaire sont utilisées pour exprimer leur amour aux filles (car les programmeurs sont relativement timides). Bien sûr, le résultat n’est pas important, ce qui compte c’est le processus !
Pour les novices, je pense que l'imitation et la référence sont très importantes au début, car le code écrit par les novices sera très désordonné et irrégulier au début, vous pouvez donc d'abord imiter les codes des autres et divers Comment la mise en page est coordonnée. Par conséquent, après vous être familiarisé avec celui-ci, vous devriez également jeter un œil aux spécifications du code HTML et CSS. Ces spécifications sont très importantes pour le développement futur.
L'autre chose est de se donner un peu de pression et de motivation, en se forçant à accomplir certaines tâches. Bien sûr, pour beaucoup de gens, ils ne savent pas quoi faire si personne ne le fait. avec eux. Il pourrait donc bientôt tomber en désuétude. Par conséquent, l'éditeur recommande fortement ici un front-end ife Baidu. Il existe différentes tâches ici, du débutant au avancé, et chaque tâche sera accompagnée de documents de référence en ligne, ce qui convient très bien aux novices.
Parlons ensuite d'une partie très délicate du paragraphe précédent, à savoir que CSS doit être compatible avec différents navigateurs. Les navigateurs grand public actuels incluent Google (Chrome), Firefox (fireFox). ), Opera, Safari et le très ennuyeux IE. Je n’en parlerai pas ici pour le moment, car l’éditeur ne connaît pas grand-chose à la compatibilité CSS. Généralement, les frameworks sont utilisés pour la compatibilité, ce qui sera abordé plus tard.
En parlant de navigateurs, il faut aussi parler de la fonction de débogage du navigateur. Ici, j'utilise principalement les outils de développement de Chrome, et il y a beaucoup d'informations sur l'utilisation de Chrome pour les autres. tutoriels, de nombreux camarades de classe et amis autour de moi utilisent également le navigateur Chrome, car c'est un navigateur très convivial pour les développeurs front-end.
Comment ne pas parler de l'outil FQ lorsqu'on parle du navigateur Chrome ? Je pense que la plupart des gens utilisent généralement Baidu comme outil de recherche, mais en fait, il existe de nombreux bons moteurs de recherche. , comme Bing, Sogou et Google de Microsoft. J'utilise souvent Google moi-même, car en termes de technologie, la technologie étrangère est beaucoup plus avancée que la technologie nationale, mais pour utiliser Google, vous devez d'abord effectuer FQ. Voici les recommandations Lantern, un artefact FQ, peut être utilisé tant que vous le téléchargez.
Une fois que vous êtes familiarisé avec l'utilisation du HTML et du CSS, vous pouvez commencer à utiliser certains frameworks d'interface utilisateur pour un développement rapide. Il existe beaucoup de ces frameworks, mais pour les novices, il est recommandé d'utiliser le. Au fait, vous trouverez ci-joint le tutoriel Premiers pas avec Bootstrap. De nombreux experts m'ont dit que ce framework était destiné aux développeurs backend qui ne peuvent pas écrire de très belles pages, mais je pense qu'en tant que novice, ce framework est suffisant à utiliser, et vous pouvez le faire. jetez-y également un œil. Le code source de ce framework, découvrez comment le code du master est écrit.
Parlons ici d'abord de html et de css. Bien sûr, c'est bien plus que cela. Il y a aussi quelques connaissances sur le développement mobile, la réactivité, le htm5, etc. Cependant, celles de l'éditeur. la capacité est limitée. Je la partagerai plus tard lorsque j'en saurai plus.
Je pense que beaucoup de gens ont entendu parler de l'outil de contrôle de version git. Pour commencer, je recommande fortement le didacticiel git et le manuel de référence git de Liao Xuefeng. Après avoir appris à utiliser git, vous pouvez. non seulement copiez votre propre code, mettez-le sur github, et vous pouvez également parcourir les codes de projet écrits par d'autres et trouver de nombreuses ressources dont vous avez besoin. Bien sûr, la fonction principale de git n'est pas celle-ci, mais les novices peuvent s'entraîner à utiliser leur propre code.

Quelques ressources d'apprentissage frontales

Système de connaissances frontales
Liste complète des URL frontales
Notes CSS générales, suggestions et conseils
Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenir des ressources d'apprentissage , vous êtes invités à rejoindre le groupe d'échange d'apprentissage
343599877, apprenons le front-end ensemble !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!