Web-Front-End-Lernroute: Schnelle Einführung in die WEB-Front-End-Entwicklung

Web-Frontend-Lernroute 2017: Schnelle Einführung in die WEB-Frontend-Entwicklung. Zunächst möchte ich meine Erfahrungen teilen. Wenn Sie etwas gut machen wollen, müssen Sie sich etwas anstrengen. Dann müssen Sie mehr lernen, mehr nachdenken, mehr üben, mehr kommunizieren, mehr zusammenfassen, Ihre eigenen Probleme finden. und dann müssen Sie sie überwinden. In guten Situationen müssen oft rechtzeitig Anpassungen vorgenommen werden. Wenn ein Neuling Front-End lernt, muss er darüber nachdenken, warum er es lernen möchte und welche Mentalität er hat, und sich dann gut positionieren, mehr Experten um Rat fragen und mehr Menschen unterrichten, die nicht so gut sind wie er Lass ihn oft wachsen. Sei schnell und sei nicht ungeduldig. Für Anfänger können Sie sich einige Einführungsvideos ansehen. Später können Sie einige Bücher kaufen und einige kleine Projekte durchführen. Sie müssen lernen, Ihre aktuelle Situation und Ihre Fähigkeiten zu analysieren und in Echtzeit Anpassungen vorzunehmen und wissen, wie man innovativ ist. Hier gilt es, sich selbst zu analysieren und eine geeignete Lernmethode zu finden.

1. WEB-Frontend - Missverständnisse lernen

Webseite Produktion ist ein Computer. Es ist ein Kurs, mit dem professionelle Studenten während des Studiums vertraut gemacht werden. Die erste integrierte Entwicklungsumgebung (IDE), die zum Erlernen der Webseitenproduktion verwendet wird, muss Dreamweaver sein. Diese WYSIWYG-IDE erstellt großartige Webseiten Bequemlichkeit.

Der schnelle Einstieg und die schnellen Ergebnisse haben uns dazu gebracht, uns in die Webseitenerstellung zu verlieben, ohne es überhaupt zu merken. Zu diesem Zeitpunkt geraten viele Menschen in ein Missverständnis, das heißt, mit Hilfe einer so schönen IDE können Webseiten schnell und bequem erstellt werden, indem mit der Maus auf das Menü geklickt wird.

Warum müssen wir also immer noch HTML, CSS, JavaScript, jQuery und andere harte Codes lernen? Ist das nicht das Streben nach Komplexität statt nach Einfachheit?

Aber mit der Vertiefung der Studie werden wir feststellen, dass wir in ein Dilemma geraten sind – übermäßiges Vertrauen in die IDE führt dazu, dass wir das Wesentliche ihrer Implementierung nicht kennen, es zwar kennen, aber nicht wissen, warum.

Wenn es also ein Problem mit dem Seiteneffekt gibt, wissen wir nicht, wie wir die Seite optimieren und einige fortgeschrittenere Anwendungen ausführen können. Der Grund liegt auf der Hand: Eine intelligente IDE erfüllt unsere Faulheit und führt dazu, dass wir den wesentlichsten Inhalt hinter den wunderschönen Webseiten ignorieren – den Code.

Die richtige Richtung ist besser als nutzlose Bemühungen

Da sind zwei Ameisen, die es versuchen Klettern Sie über einen Abschnitt der Mauer und suchen Sie auf der anderen Seite der Mauer nach Nahrung. Wenn eine Ameise den Fuß der Mauer erreicht, klettert sie ohne zu zögern hinauf. Jedes Mal, wenn sie jedoch die Hälfte der Mauer erklimmt, fällt sie aufgrund von Müdigkeit und Erschöpfung herunter. Obwohl es sich nicht entmutigen ließ, fiel es immer wieder hin, passte sich schnell an und begann wieder aufzusteigen.

Die andere Ameise beobachtete es und beschloss, um die Mauer herumzugehen. Bald ging die Ameise um die Wand herum zum Futter und begann es zu genießen, während die andere Ameise immer wieder hinfiel und wieder anfing.

Zusätzlich zu Mut und Ausdauer erfordert Erfolg oft eine Richtung. Vielleicht kommt der Erfolg mit einer guten Ausrichtung schneller als gedacht. Wenn Sie auf dem falschen Weg laufen, wird es vergeblich sein, egal wie sehr Sie es versuchen. Das Gleiche gilt für das Erlernen des Web-Frontends. Sie sollten zunächst einen richtigen Lernweg auswählen.

2. WEB-Frontend – Lernroute

Die erste Stufe – HTML-Lernen

HyperText Mark-up Language (kurz HTML) ist das Grundgerüst einer Webseite. Unabhängig davon, ob es sich um eine statische Webseite oder eine dynamische Webseite handelt, wird letztendlich HTML-Code zurückgegeben Der Browser interpretiert den gerenderten HTML-Code und präsentiert ihn dem Benutzer. Daher müssen wir die Grundstruktur sowie die allgemeinen Tags und Attribute von HTML beherrschen.

HTML-Lernen ist ein Gedächtnis- und Verständnisprozess. Während des Lernprozesses können Sie die „geteilte“ Ansicht von Dreamweaver verwenden, um das Lernen zu unterstützen. Sehen Sie sich die Effekte in der „Design“-Ansicht an, lernen Sie das Wesentliche in der „Code“-Ansicht kennen und maximieren Sie die Vorteile verschiedener Ansichten. Diese Methode des vergleichenden Lernens macht das einfache Auswendiglernen von HTML-Tags und -Attributen wett An alle Anfänger. Es muss großartig für kleine Freunde sein!

Nachdem wir HTML gelernt haben, beherrschen wir gerade die Produktionsmethoden verschiedener „Rohstoffe“. Beim Bauen müssen diese „Rohstoffe“ auch gemäß unserem Entwurfsplan zusammengestellt und etwas verschönert werden.

PHP Chinesische Website empfohlene Kurse:
Handbuch: HTML-Entwicklungshandbuch
HTML ist leicht zu erlernen! Ich bin sicher, Sie werden es schnell lernen! HTML-Beispiele Dieses Tutorial enthält Hunderte von HTML-Beispielen. Mit dem Editor auf dieser Website können Sie HTML ganz einfach online ändern und die Ergebnisse des Beispiels anzeigen.
Video: Video-Tutorial zum Erlernen von HTML im Handumdrehen

„Video-Tutorial zum Erlernen von HTML im Handumdrehen“ beginnt mit den grundlegendsten Konzepten und geht tiefer Führen Sie jeden Schritt für Schritt dazu, HTML zu lernen, die Bedeutung und grundlegende Verwendung verschiedener häufig verwendeter Tags zu verstehen und HTML-Kenntnisse zu erlernen, um den Grundstein für zukünftiges Lernen zu legen.

Die zweite Stufe - CSS-Lernen

CSS ist die Abkürzung für englische Cascading Style Sheets, sogenannte Cascading Style Sheets, die wirklich die Leistung des Webs erreichen können Seiten und eine Stil-Designsprache zur Inhaltstrennung. Im Vergleich zur Leistung von herkömmlichem HTML können seine Stile wiederverwendet werden, was unsere Entwicklungsgeschwindigkeit erheblich verbessert und die Wartungskosten senkt.

Gleichzeitig können das Boxmodell, das relative Layout, das absolute Layout usw. in CSS eine präzise Steuerung der Position und des Layouts jedes Objekts auf der Webseite auf Pixelebene erreichen . Durch diese Lernphase können wir den Bau eines „Gebäudes“ erfolgreich abschließen.

Nachdem der Bau des „Gebäudes“ abgeschlossen ist, können wir es den Benutzern zur Nutzung übergeben. Wenn wir jedoch möchten, dass die Benutzer ein besseres Erlebnis haben, können wir es auch weiter „dekorieren“. „Gebäude“, damit es etwas „luxuriöser“ aussieht.

php Chinesische Website empfohlene Kurse:

Handbuch: CSS Online-Handbuch

《CSS Online Handbuch》Durch die Verwendung von CSS können wir die Effizienz der Webentwicklung erheblich verbessern! Dieses CSS-Online-Handbuch enthält Hunderte von CSS-Online-Beispielen. Mit dem Online-Editor dieser Website können Sie CSS online bearbeiten und die geänderten Effekte online anzeigen.

Video: Video-Tutorial zum Erlernen von CSS auf Knopfdruck

"Video-Tutorial zum Erlernen von CSS auf Knopfdruck „Wir lernen die Verwendung der CSS-Methode, den Unterschied zwischen CSS-Selektoren und die gemeinsame Verwendung von CSS und HTML kennen.

Die dritte Stufe – JavaScript-Lernen

JavaScript ist eine auf der Clientseite weit verbreitete Skriptsprache, die uns einige integrierte Funktionen und Objekte zur Verfügung stellt und DOM-Operationen, mit Hilfe dieser Inhalte können wir einige clientseitige Spezialeffekte, Verifizierungen, Interaktionen usw. implementieren, um unsere Seiten weniger langweilig aussehen zu lassen. Gibt es welche?

Zu diesem Zeitpunkt sind Sie vielleicht immer noch in der Überraschung versunken, die Ihnen JavaScript beschert hat, aber Ihr Projektmanager hat Sie plötzlich angeschrien

„Dieser Effekt ist unter dem ××-Browser nicht kompatibel, bitte versuchen Sie es erneut …“

„Inkompatibel?“ War er sofort versteinert?

„Oh nein, du betrügst mich! Ich habe eine Nacht gebraucht, um dafür Hunderte Zeilen Code zu schreiben!“

Die Kompatibilität und Komplexität von JavaScript bereitet uns manchmal Kopfschmerzen. Glücklicherweise gibt es „Meister“, die uns dabei helfen, es zu kapseln.

php Chinesische Website empfohlene Kurse:

Handbuch: JavaScript-Referenzhandbuch

"JavaScript-Referenzhandbuch" ist ein Referenzhandbuch. Wenn Sie beim Lernen und Arbeiten auf Kenntnisse über JavaScript stoßen, die Sie nicht verstehen, können Sie vorbeikommen und sich beraten lassen In unserem Handbuch gibt es viele Beispiele, auf die sich jeder beziehen und daraus lernen kann.

Video: JavaScript Elementary Video Tutorial

"Javascript Elementary Video Tutorial" führt Sie in die grundlegenden Variablen, Syntax und Kenntnisse von JavaScript ein von bedingten Urteilen, Schleifenanweisungen, Arrays, Funktionen, Objektstücklisten und DOM

Die vierte Stufe - JQuery-Lernen

jQuery ist eine kostenlose, leichte Open-Source-JavaScript-Bibliothek und mit verschiedenen Browsern kompatibel (jQuery2.0 und nachfolgende Versionen haben die Unterstützung für IE6/7/8-Browser aufgegeben), und jetzt gibt es viele Es stehen jQuery-basierte Plug-Ins zur Auswahl, die bequemer und schneller sind, wenn wir einige umfangreiche dynamische Effekte implementieren, was unsere Entwicklungszeit erheblich spart und die Entwicklungsgeschwindigkeit verbessert. Dies spiegelt auch voll und ganz seinen Kernzweck wider: Weniger schreiben, mehr tun. Das fühlt sich großartig an! Ist das möglich?

„Luxusgebäude“ entstehen aus dem Boden, aber die Gebäude werden jeden Tag, Tag für Tag, Jahr für Jahr so ​​gebaut . , so mühsam! Kann jede einzelne Komponente im Gebäude wie gestapelte Blöcke zusammengesetzt werden? Wäre das nicht großartig?

Diese Idee eignet sich auch für die Web-Front-End-Entwicklung, daher sind verschiedene Front-End-Frameworks erschienen. Das hier empfohlene ist Bootstrap.

Bootstrap ist ein von Twitter gestartetes Open-Source-Toolkit für die Front-End-Entwicklung. Es ist ein CSS/HTML-Framework und unterstützt responsives Layout. Es erfreute sich nach seiner Einführung großer Beliebtheit und war schon immer ein beliebtes Open-Source-Projekt auf GitHub.

Während des Projektentwicklungsprozesses können wir das Seitenlayout und die Stileinstellungen mithilfe der von Bootstrap bereitgestellten CSS-Stile, Komponenten, Java-Plug-Ins usw. schnell abschließen , und dann eine gezielte Feinabstimmung des Stils und der Entwicklung basierend auf dem Framework vornehmen, verkürzt den Entwicklungszyklus erheblich. Es ist cool, auf den Schultern von Giganten zu stehen! jQuery-Referenzhandbuch für Chinesisch

Mit dem „jQuery-Referenzhandbuch für Chinesisch“ lernen Sie, jQuery-Kenntnisse von Grundkenntnissen bis hin zu Fortgeschrittenen zu erlernen. Das Handbuch enthält eine große Anzahl von jQuery-Online-Beispielen. Sie können die Beispiele direkt ausführen, um sie anzusehen

Video:

JQuery Basic Video Tutorial

Es ist sehr einfach, jQuery zu verwenden. Es ist einfach, inhaltsreiche Seiten zu erstellen. In unserem „jQuery-Basis-Video-Tutorial“ werden einige Effekte mit unserem jQuery erstellt, wie z. B. unsere Animationseffekte, Schiebeeffekte und Einblendungen und Ausblendeffekte usw.

3. WEB-Frontend – Lernvorschläge

Lassen Sie mich abschließend mit Ihnen über einige Vorschläge und Methoden zum Erlernen des Webs sprechen Frontend.

Ein Problem, auf das beim CSS-Layout geachtet werden muss, besteht darin, dass vielen Schülern eine Gesamtanalyse des Seitenlayouts fehlt und sie die verschachtelte Beziehung zwischen den Feldern auf der Seite aus einer Makroperspektive nicht erfassen können Daher sind sie begierig darauf, dies zu tun, was dazu führt, dass die Beziehung zwischen den Elementen auf der Seite sehr verwirrend wird und es leicht dazu kommt, dass die Boxen beim Schweben falsch ausgerichtet werden. Es wird empfohlen, beim Layouten die Idee der „stufenweisen Verfeinerung von oben nach unten“ zu übernehmen. Verwenden Sie zunächst mehrere Kästchen, um die Seite als Ganzes zu unterteilen, und verschachteln Sie dann nach und nach Kästchen innerhalb der Kästchen.

„Ein Gentleman unterscheidet sich nicht von anderen, und er ist gut darin, Dinge zu fälschen.“ Während des Lernprozesses sollten Sie weitere hervorragende Websites durchsuchen und gut im Analysieren sein und indem wir uns auf ihre Designideen und Layoutmethoden stützen, können wir nur dann Wissen erlangen, wenn wir viele Dinge sehen, und dann können wir sie integrieren und andere für unseren eigenen Gebrauch nutzen.

Gleichzeitig müssen Sie Firebug als Werkzeug gut nutzen können. Einerseits kann Firebug uns dabei helfen, unsere eigenen Seiten während unseres Lernprozesses zu debuggen. Andererseits können wir mit Firebug auch den Quellcode anderer Personen leicht einsehen und analysieren >

Jedes Wachstum und Fundament sind unterschiedlich und Sie sollten es basierend auf Ihrer tatsächlichen Situation umsetzen. Lassen Sie es mich wiederholen. Der Kern des Frontends ist js und css. Es ist nicht schwierig, aber es erfordert eine Akkumulation.

So sehe ich das Frontend:

CSS ist wie eine Flasche Wein, hol dir das Produkt

Bei HTML und CSS dreht sich alles um Tags und Selektorattribute, aber es ist nicht einfach, eine Seite zu schreiben, die skalierbar, robust oder wartbar ist. Beim Schreiben der grundlegenden bedingten Reflexion der Seite geht es nun nicht darum, sie schnell abzuschließen, sondern darüber nachzudenken, wie die erforderlichen Aufgaben mit minimalen Codeänderungen schnell erledigt werden können, wenn die Schnittstelle geändert werden muss. Dies ist ein dreifacher Test für Front-End-Ausdauer, körperliche Stärke und Intelligenz.

js ist wie ein Schwert, es muss geschärft werden

js war einfach Denn die Erfahrung zeigt, dass mit der Entwicklung von Technologie und Gesellschaft die übernommenen Rollen immer wichtiger werden. Als ich anfing, mit jQuery zu spielen, hatte ich das Gefühl, dass ich js bereits kannte, aber tatsächlich war es nur die Spitze des Eisbergs. Da wir immer mehr über js lernen, ist es sowohl pervers als auch süß, macht Spaß und ist schwer zu kontrollieren. Es gibt viele Kompatibilitätsprobleme, aber die Lösung der Kompatibilität ist unser grundlegender Weg zum Überleben. Von Ajax bis JSMVC wird die Flut an Hochlast immer höher

Das Leben ist ein Traum, man muss ihn verwirklichen

Technologie ist einfach ein Teil des Lebens. Früher war ich ehrgeizig , aber jetzt halte ich den Kopf gesenkt und schreibe Code. Ändern Sie, was geändert werden kann, und akzeptieren Sie, was nicht geändert werden kann. Das Leben ist begrenzt, Brüder kämpfen um Tag und Nacht. Die Einstellung zum Lebenslernen ist: weder ungeduldig noch ungeduldig, weder schnell noch langsam. Beharre und glaube an dich. Versuchen Sie nicht, die Welt zu verändern, sondern versuchen Sie, Ihr eigenes Leben zu verändern. Bitten Sie nicht um einen schnellen Schritt, sondern um einen Schritt nach dem anderen. Dank des Leidens macht es uns innerlich stärker. Dank Rückschlägen lassen sie uns weiter wachsen. Dank Fehlern vertiefen sie unser Denken. Dank des Frontends ließ er uns noch mehr glauben, dass es achtzehn Kampfsportarten braucht, um einen Himmel zu halten.

Wir sind eine Gruppe junger Menschen, die IT und HTML5-Entwicklung lieben, melden Sie sich bitte bei www.php.cn an, um online zu lernen und uns zu Wort kommen zu lassen unsere Träume zusammen.

Verwandte Empfehlungen:

1. Wie fange ich an, PHP zu lernen? Die klarste PHP-Lern-Roadmap der Geschichte!

2. PHP-Routenkarte für Fortgeschrittene: Ein unverzichtbarer Fortgeschrittenen-Routenkurs für PHP-Anfänger bis -Meister

3. Lehren Sie, „Wie man PHP-Chinesischkursvideos anschaut und leise ein Meister wird?“