Webprogrammierung von Grund auf HTML. Ein praktischer Leitfaden zum Erlernen der Webprogrammierung

Wo fange ich an, das Programmieren von Grund auf zu lernen?
In diesem Artikel habe ich versucht, im Detail zu analysieren, ob es möglich ist, selbstständig Programmierer von der Pike auf zu werden und welche Möglichkeiten es gibt, das Programmieren selbstständig zu beherrschen und damit Geld zu verdienen.
UPD: Diejenigen, die auf der Suche nach einem Ort sind, an dem sie 2018 mit dem Erlernen des Programmierens von Grund auf beginnen können (oder sich gerade darauf vorbereiten, 2019 anzufangen :)), haben dank Yakov Kramarenkos Buch „Einführung in die Entwicklung“ großes Glück. Software" Ich empfehle wärmstens, es auszuprobieren – das Update mit der Nr. 1-Bewertung bei Google und Leserrezensionen lohnt sich für diejenigen, die lernen, selbst zu programmieren.

Ich habe versucht, meiner Meinung nach das Beste zu geben. Ich warne Sie – es ist nicht einfach! Weitere Lektüre kann Sie viele Stunden interessanter Aktivitäten kosten :)

Ich sage es gleich: Wenn Sie sich entscheiden, Programmieren nur auf eigene Faust zu studieren, ohne Geld zu investieren, müssen Sie mehr Zeit aufwenden. Wenn Sie parallel zu einem anderen Job studieren, können Sie damit rechnen, in mindestens einem Jahr ein neues Fachgebiet zu beherrschen.

Wenn Sie diesem Artikel etwas hinzufügen möchten, um ihn für die Menschen nützlicher zu machen, schreiben Sie es in die Kommentare.

Dieser Artikel enthält die Best Practices, die auf meiner Erfahrung basieren, wenn Sie das Programmieren selbst erlernen möchten. All dies ist mit ein paar Ergänzungen immer noch relevant.

Ein Buch über Webprogrammierung für Anfänger

Die Version 2016 ist übersetzt: https://courses.prometheus.org.ua/courses/Prometheus/CS50/2016_T1/about.

Es ist besser, den Kurs auf Englisch zu absolvieren. Sie verbessern Ihre Sprache und die Informationen werden aktueller. Obwohl sich am Kurs nicht viel änderte, wurde erst 2017 begonnen, Python anstelle von PHP zu verwenden.

Der Abschluss des Kurses wird einige Zeit in Anspruch nehmen, vermittelt aber ein ziemlich vollständiges Verständnis, das sonst nur schwer auf eigene Faust zu erlangen ist.

Zunächst müssen Sie entscheiden, welcher Programmierbereich Sie interessiert. Wenn wir reden über Wenn es darum geht, Entwicklung von Grund auf zu erlernen, und Sie bald anfangen möchten, damit Geld zu verdienen, dann gibt es meiner Meinung nach zwei Möglichkeiten: Entwicklung für mobile Geräte oder Webentwicklung.

Meiner Meinung nach ist es in einer solchen Situation die beste Wahl, mit dem Erlernen der Webentwicklung zu beginnen. Hier ist die Einstiegsschwelle für Einsteiger niedriger und es besteht die Möglichkeit, früher mit der Ausführung einfacher Aufträge zu beginnen.

Wie Sie von Grund auf selbst Programmierer werden

Wenn ich bei Null anfangen würde, um die Webentwicklung selbst zu erlernen (in der Erkenntnis, dass dies ein längerer Weg ist, ohne Geld zu investieren), dann würde ich mir diesen Weg empfehlen:

1. HTML und CSS verstehen

Ein guter Kurs für die grundlegende Entwicklung von HTML und CSS: https://learn.shayhowe.com/html-css/ (Englisch) oder https://webref.ru/layout/learn-html-css (Übersetzung).

Danach lohnt es sich, einen Blick auf die Fähigkeiten von Bootstrap zu werfen, das zum De-facto-Standard für die beschleunigte Entwicklung von Webanwendungen geworden ist: http://getbootstrap.com/

Dies wird für die nächsten Schritte ausreichen.
Vielleicht möchten Sie an dieser Stelle anhalten und sich detaillierter mit CSS befassen. Dies gibt Ihnen die Möglichkeit, als Layout-Designer zu arbeiten – als jemand, der ein statisches Design daraus erstellt HTML-Seite, woraufhin der Programmierer es wiederbelebt und die Logik des Projekts implementiert.

Damit können Sie auch Geld verdienen – sowohl als Freiberufler als auch durch die Arbeit in einem IT-Unternehmen, das sich auf Webentwicklung spezialisiert hat.

Aber da wir uns entschieden haben, Programmierer zu werden, machen wir weiter!

2. Lernen Sie jQuery kennen

Wenn es Ihnen gefallen hat, können Sie das Frontend weiter verstehen und mit dem Erlernen von Javascript beginnen.

Wenn https://angularjs.org/ oder http://backbonejs.org/ folgt, dann ist dies der Weg zur Front-End-Entwicklung. Eine gute Spezialität, zumal solche Kenntnisse für jeden Programmierer nützlich sind, der sich für Webentwicklung entschieden hat.

Mein Rat ist, vorerst bei jQuery zu bleiben und weiterzumachen.

3. Beherrschen Sie eine Server-Programmiersprache

Hier gibt es viel Auswahl. Die vielversprechendsten Programmiersprachen sind Ruby, Java, Python, Node.JS (Javascript für den Server).

Die einfachste Programmiersprache für Anfänger ist Python. Wenn Sie Python und dann das Django-Webentwicklungs-Framework lernen, haben Sie alles, was Sie brauchen, um einige ziemlich komplexe Projekte selbst in Angriff zu nehmen.

Eine gute Option sind die Programmiersprachen Python und Django

Plus – Python und Django bringen Ihnen die „richtige“ Programmierung bei. Python gehört durchweg zu den TOP 5–10 der beliebtesten Sprachen und gute Python-Spezialisten gehören zu den bestbezahlten Programmierern. Python ist sowohl eine einfache als auch verständliche Programmiersprache für Programmieranfänger und wird gleichzeitig in vielen großen Unternehmen und bei großen Projekten eingesetzt.

Um selbst loszulegen, lesen Sie „Python for Kids“ von Jason Briggs oder schauen Sie sich Folgendes an:

Unter anderem empfehle ich „Learn Python The Hard Way“. Buch " Einfaches Python. Moderner Programmierstil.“ Und natürlich das Python 2-Tutorial und das Python 3-Tutorial.

Django ist wohl das beste Framework für die Webentwicklung

Das beste Werkzeug für alle Gelegenheiten ist sehr schwer zu finden. Django hat das Potenzial, ein solches Tool für die Webentwicklung zu werden.

Wo fange ich an, Django zu lernen:

Beginnen Sie mit der offiziellen Dokumentation, dort gibt es ein sehr gutes Tutorial: https://docs.djangoproject.com/en/2.1/intro/

Tango mit Django ist gute Gelegenheit Verbessern Sie Ihr Englisch und gewinnen Sie gleichzeitig ein Verständnis dafür, wie Webprojekte aufgebaut sind und wie alles funktioniert.

Option #2 – PHP und WordPress

Eine andere Möglichkeit besteht darin, mit PHP zu beginnen und mit gängigen CMS zu arbeiten. Wenn Sie selbst Programmieren lernen und schnell loslegen möchten, beginnen Sie mit PHP.

Viele Leute halten PHP für eine „nicht ganz echte“ Programmiersprache, und das aus gutem Grund. PHP wird selten in großen Webanwendungen verwendet und ist nur für das Web konzipiert – in anderen Bereichen kann es nicht verwendet werden.

Andererseits ist PHP bei der Anzahl der weltweit gestarteten Websites führend. Die gängigsten CMS (Content Management Systeme) basieren darauf.

Finden Sie anschließend heraus, wie Sie Themes für WordPress erstellen – gemessen an der Anzahl der ausgeführten Websites ist dies wahrscheinlich das beliebteste CMS der Welt.

Wenn Sie dies gut verstanden haben, können Sie bereits einen Job finden. Es gibt viele Websites, auf denen PHP und WordPress laufen, sodass genug Arbeit für alle da ist.

Wie man als Programmierer Geld verdient

Viele Menschen stellen sich die Arbeit eines freiberuflichen Programmierers so vor:

In Wirklichkeit sieht es ungefähr so aus:

Wenn Sie bereit sind, als Programmierer zu arbeiten und nach einer Möglichkeit suchen, Geld zu verdienen, sind Sie bei Freelance willkommen! Freiberufliche Börsen ermöglichen Ihnen die Suche einfache Befehle(möglicherweise zunächst fast kostenlos) - um Übung zu bekommen. Im Allgemeinen kann die Arbeit bei einem IT-Unternehmen lukrativer sein, wenn Sie nur auf der Suche nach einem Programmierjob sind.

Nach Punkt 2 – wenn Sie HTML, CSS und jQuery beherrschen – können Sie auf Freelance-Börsen einfache Aufträge entgegennehmen und so Ihr Profil aufbauen.

Sprechen Sie Englisch? https://www.upwork.com/

Überhaupt nicht, auch nicht mit einem Wörterbuch? http://freelance.ru/

Wenn Sie in der Lage sind, selbst Websites zu erstellen, wird es Ihnen leichter fallen, Kunden zu finden – es werden Bewertungen und Erfahrungen vorliegen.

Schneller Weg zur Webentwicklung

Meiner Erfahrung nach dauert es im besten Fall 6 bis 12 Monate, das Programmieren von Grund auf zu erlernen, sechs Monate sogar, wenn jemand dabei ist, der einem hilft.

Um den Einstieg in die IT zu beschleunigen, suchen Sie nach der Möglichkeit, an einer Schulung teilzunehmen (möglicherweise benötigen Sie mehr als eine) oder finden Sie eine Person, die mit Ihnen trainiert. In Wirklichkeit ist es ohne jemanden, der sein Wissen an Sie weitergibt, sehr schwierig; Sie können ein Jahr lang Bücher lesen und nie anfangen. Und mit einer sachkundigen Person, die einfach über komplexe Dinge sprechen kann, ist es viel einfacher.

Früher habe ich den Einstiegsweg über eine Ausbildung gewählt. Da ich viel über Entwicklung wusste, konnte ich in zwei Monaten meistern, was sechs Monate hätte dauern können. Finde deinen Weg.

Ich habe Leute, die sich ernsthaft für eine Karriere als Programmierer entschieden haben und den Prozess beschleunigen wollen. Es gibt viele andere Kurse. Wenn Sie einen Mentor finden – eine Person, die Sie an der Hand führt – verkürzt dies Ihren Weg zum Entwickler erheblich.

Sobald Sie das Gefühl haben, etwas schaffen zu können, suchen Sie nach einem Unternehmen, in dem Sie sich weiterentwickeln oder Kunden gewinnen können.

HTML, CSS, Python und Javascript sind nur die Grundkenntnisse, die erste Stufe. Als nächstes ist das Üben und Studieren von Algorithmen und Entwicklungstools sehr wichtig.

Wenn Sie Fragen haben, stellen Sie diese in den Kommentaren! Ich hoffe, dieser Artikel wird Ihnen helfen, den ersten Schritt zu machen. Viel Glück!

Guten Tag.

Wenn Sie jetzt mit dem Erlernen der Webprogrammierung beginnen möchten, wo würden Sie anfangen? Welche Sprache, welches Framework und welche Technologie würden Sie wählen?

Ich frage aus persönlichem Interesse – ich möchte schnell moderne Werkzeuge erlernen und meine Ideen verwirklichen.

Ich bin seit meiner Kindheit mit der konventionellen Programmierung befreundet: BASIC und Assembler auf dem Spectrum. Dann eine technische Universität (ich habe Ende der 90er Jahre angefangen zu studieren), wo: funktionale Programmierung in Pascal, ein wenig x86-Assembler und dann Objektprogrammierung in Delphi, ein wenig C++ und sogar ein wenig exotisches LISP. Aber das Leben erwies sich als so, dass ich nicht in der Lage war, das Programmieren für das Web zu erlernen.

Jetzt entwerfe ich Websites, zeichne Prototypen und gestalte Seiten und Schnittstellen. Ich verstehe oberflächlich, was und wie es funktioniert.

Aber ich verstehe den Prozess nicht: Wie kann ich eine Anwendung erstellen, die die von mir benötigten Funktionen ausführt?

Jetzt gibt es keine Umgebung wie zuvor wie Delphi für das Web, in der Sie einfach und schnell die Anwendungsoberfläche skizzieren und beginnen können, ihre Reaktion auf Benutzeraktionen (und zusätzliche Funktionen, die die Anwendung benötigte) zu beschreiben. Und so verstehen Sie, wie alles funktioniert, und erstellen gleichzeitig bereits das, was Sie brauchen.

Ich weiß, wie man ein Layout erstellt (obwohl meine Kenntnisse hier bereits veraltet sind), aber ich verstehe beispielsweise nicht, wie Animationen funktionieren oder Blöcke auf einer Seite verwalten oder auf Benutzeraktionen reagieren. Ich weiß, dass jeder dafür JQuery verwendet und es bereits Javascript ersetzt hat, aber ich verstehe nicht, wie das alles funktioniert.

Aber ohne die Prozesse zu verstehen, wie alles funktioniert, ist es unwahrscheinlich, dass Sie etwas tun können, egal wie viele Handbücher Sie lesen, wie viele CMS und Frameworks Sie nicht entkernen.

Ich würde wirklich gerne alles lernen, weil ich so meine Ideen selbst umsetzen kann und es besser ist, bei Bedarf Aufgaben an Programmierer zu vergeben.

Ich möchte mich in diese Richtung weiterbilden.

Aus Erfahrung funktioniert die Schulung für mich am besten, wenn sie Schritt für Schritt anhand von Beispielen erklärt, wie man dies oder jenes macht, und Aufgaben gibt, um ähnliche Dinge zu tun oder Funktionen zu entwickeln.

Idealerweise wäre es cool, einen Mentor zu finden, der mir in einem Schritt-für-Schritt-Schulungsformat hilft, einige Dinge, die mich interessieren, umzusetzen. So etwas habe ich unter Programmierern wirklich noch nicht gehört, aber immer häufiger stoße ich auf Meisterkurse und Schulungen von guten Designern, die gemeinsam mit Anfängern Stufen von den Grundlagen bis hin zu komplexen Dingen durchlaufen, ihre Hausaufgaben klären und dabei Helfen Sie mit, die Welt zu einem besseren Ort zu machen.

Nicht umsonst habe ich zu Beginn gefragt, was genau du jetzt mit dem Studium von Grund auf anfangen würdest. Ich sehe keinen Sinn darin, „das Rad neu zu erfinden“, wenn man „Hochgeschwindigkeitszüge fahren“ kann. Wenn Sie so wenig Zeit wie möglich vom Studium der „Materialien“ und den ersten Codezeilen bis zur Erstellung einer einfachen Website oder eines einfachen Dienstes benötigen.

Heutzutage interessieren sich viele Menschen dafür, ob es möglich ist, das Programmieren von Grund auf zu erlernen.

Wir alle haben Geschichten gehört, dass Menschen, die dieses Geschäft betreiben, ein riesiges Einkommen haben, jedes Wochenende nach Bali fahren und in den ersten Monaten ihrer Arbeit Wohnungen für alle ihre Verwandten kaufen konnten.

Im Prinzip ist das nicht weit von der Wahrheit entfernt, aber Solche Ergebnisse erfordern Erfahrung und Reputation. Und Sie müssen mit dem Einfachsten beginnen. Wir werden uns ansehen, welche Schritte eine Person, die keine Ahnung vom Schreiben von Programmen hat, befolgen muss, um in Zukunft nach Bali zu reisen und Immobilien zu kaufen.

Inhalt:

Schritt eins. Vorbereitung

Oftmals können Programmieranfänger aus dem einfachen Grund keinen Erfolg haben, weil sie es zunächst versäumt haben, die Prioritäten richtig zu setzen.

Sie präsentieren dieses Handwerk als etwas Romantisches, Dynamisches – einfach als eine Art ständige Aktion.

In Filmen wird dieser Vorgang völlig anders dargestellt, als er wirklich ist.

Darüber hinaus gibt es im Allgemeinen Das Schreiben von Codes wird nicht angezeigt, uns werden nur Ereignisse angezeigt, die sich darum drehen.

Die Filme zeigen auch, dass jeder ohne Wissen, Erfahrung oder gar graue Substanz im Gehirn Programmierer werden kann. In diesem Fall können wir uns an den Film „Frames“ erinnern.

Wenn Sie also einfach vom Geist aller Arten von Filmen durchdrungen sind und selbst mit dem „Codieren“ beginnen möchten, Programmieren ist eindeutig nichts für Sie.

Hier ist die Wahrheit über das betreffende Handwerk: Programmierung ist:

Stunden und manchmal Tage monotoner Arbeit, während der Sie sich nicht entspannen können, müssen Sie immer konzentriert sein;
endloses Lernen auf der Suche nach den neuesten Trends in dieser Gegend;
ähnliche Projekte mit Kunden die nicht wissen, was sie wollen und wie es aussehen soll.

Was Letzteres betrifft, müssen Sie Es lohnt sich, sich ein Video über sieben rote Linien in verschiedenen Farben anzusehen, eines davon in Form eines Kätzchens. Im Prinzip trifft dies nahe an der Wahrheit zu, da Kunden oft das Unmögliche verlangen. Es kommt auch vor, dass sie etwas bestellen, mit dem Ergebnis aber immer nicht zufrieden sind.

Wenn Sie das alles verstehen und bereit sind, in die wunderbare Welt des Programmierens einzutauchen, Fahren Sie dann mit dem nächsten Schritt fort.

Schritt zwei. Auswahl Ihrer Muttersprache

Es gibt eine Vielzahl von Programmiersprachen. Einigen Schätzungen zufolge hat ihre Zahl bereits mehrere Tausend erreicht.

Im Allgemeinen ist C eines der häufigsten einfache Sprachen, das die Grundlage für alles andere bildet. Darüber hinaus werden seine Elemente in vielen anderen Systemen und Programmen verwendet.

Aber es ist interessant, dass in guten Bildungseinrichtungen sowie Während der Kurse lernen die Studierenden Sprachen in der folgenden Reihenfolge:

1 Pascal.

2 C++.

3 PHP und alles rund um Webprogrammierung, sowie SQL(Dies ist ein System, das für die Arbeit mit Datenbanken über Abfragen entwickelt wurde).

Netz(Webseitenentwicklung, Online-Systeme und alles was damit zusammenhängt) - html(obwohl es nicht als vollwertige Programmiersprache bezeichnet werden kann), PHP, Perl, Python, Ruby, Java, Groovy sowie ASP.NET-Technologie.
Kundenspezifische Software(alle Arten von Programmen wie Nachschlagewerke, Browser, Instant Messenger usw.) – Delphi, C, C++, C#.
Individuelle Software für mobile Geräte– Java, Objective-C.
Maschinenentwicklungen(Arbeiten mit Mikroprozessoren und anderen Geräten, Roboterdesign) – Assembler, Modifikationen C.

Jemand kann dieser Liste auch die sogenannte 1C-Programmierung hinzufügen. Vertrauen Sie nicht Laien und Leuten, die nichts wissen! Das ist überhaupt keine Programmierung.

Sobald Sie sich mit den Grundlagen der betreffenden Arbeit vertraut gemacht haben, werden Sie verstehen, warum dies gesagt werden kann.

Wählen Sie, was Ihnen am besten gefällt.

Beratung: Treffen Sie gleich Ihre Wahl! Sie müssen genau wissen, in welche Richtung Sie sich weiterentwickeln und was Sie in Zukunft studieren möchten.

Die meisten Spezialisten auch Es wird empfohlen, das Lernen mit Pascal zu beginnen. Diese Option ermöglicht

Sie müssen die einfachsten Programme schreiben und einen Überblick über das jeweilige Handwerk als Ganzes haben.

Wir können sagen, dass Pascal eine Art Brücke ist. Eine Person, die sich einfach gut mit Mathematik auskennt, kann dadurch in die Welt des Programmierens einsteigen.

Aufmerksamkeit! Für welches Unternehmen Sie sich nach der Ausbildung auch entscheiden, Sie werden für sich selbst umgeschult. Daher müssen Sie nur das eigentliche Prinzip des Programmschreibens verstehen. Und dafür Es gibt nichts Besseres als Pascal.

Schritt drei. Compiler studieren

Als Referenz: Compiler- Das technische Lösung, entworfen, um Eingabebefehle in Maschinenanweisungen zu übersetzen, grob gesagt in Nullen und Einsen, also in eine Interpretation, in der die Maschine versteht, was zu tun ist.

Tatsächlich werden Sie alle Ihre Programme in Compilern schreiben und ausführen.

Wenn Sie sich entscheiden, unserem Rat zu folgen und mit Pascal zu beginnen, sollten Sie Free Pascal herunterladen. Dieser Compiler ist absolut kostenlos und wird auf der offiziellen Website vertrieben.

Wie Sie sehen, sieht es ziemlich „altmodisch“ aus, aber das Programmieren beginnt genau damit. Übrigens, Der C++-Compiler sieht fast gleich aus.

Es heißt Turbo C++ (Sie können es herunterladen).

Was Pascal betrifft, gibt es auch GNU Pascal, Turbo/Borland Pascal, TMT Pascal und Virtual Pascal. Und für C++ können Sie Borland C++, Visual C++, Dev C++, GCC und Eclipse verwenden.

Aber das ist, wie wir oben sagten, erst der Anfang. Da darf man nicht aufhören. Sobald Sie sich für eine Richtung entschieden haben, können Sie zu komplexeren Compilern übergehen.

Hier ist eine Liste der heute beliebtesten Compiler je nach Tätigkeitsbereich:

HinsichtlichDelphi, dann heißt dort der Compiler so. Es gibt auch Embarcadero Delphi und einige andere Modifikationen. Delphi 7 kann beispielsweise von vielen Seiten heruntergeladen werden. Wenn Sie sich für C, C++ oder C# entschieden haben, benötigen Sie Microsoft Visual Studio. Sie können es direkt von der offiziellen Website des Herstellers herunterladen.

Wenn wir darüber redenAssembler und andere in der Robotik verwendete Sprachen, dann müssen Sie MASM sofort herunterladen, wenn Sie unter Windows arbeiten. Generell gilt, dass Compiler je nach gewähltem Tätigkeitsfeld und Unternehmen, bei dem man einen Job bekommt, sehr unterschiedlich sein können. Einige Firmen schreiben ihre eigenen Codeverarbeitungslösungen. Wenn Sie sich für Robotik entschieden haben, ist es daher besser, die entsprechenden Bücher zu studieren und alles so zu machen, wie es dort steht. Wir werden später darüber sprechen.

Es gibt auch viele Online-Compiler. Sie sind nützlich, weil sie viele Programmiersprachen unterstützen und keine Installation erfordern – sehr praktisch!

Hier sind die beliebtesten:

Dies ist ein einzigartiger Service, mit dem Sie mehrere erstellen können virtuelle Computer und machen Sie mit ihnen, was Sie wollen, einschließlich der Kompilierung von Chiffren.

Virtuelle Maschinen wird unter der Kontrolle von arbeiten. Sie können sie zumindest löschen Systemordner, absolut jedes Programm installieren und so weiter.

Beginnen wir nun mit dem Schreiben Ihrer ersten Chiffre (Code). Dies ist auch ohne Bücher und lange Anleitungen möglich.

Schritt vier. Erster Code

Für den ersten Code verwenden wir die erste Sprache und den ersten Compiler, deren Auswahl wir oben empfohlen haben. Dies sind Pascal und Free Pascal.

Einer der meisten einfache Programme wird wie folgt geschrieben:

1 Laden Sie Pascal kostenlos herunter Folgen Sie dem Link oben und führen Sie es auf Ihrem Computer aus.

2 Geben Sie Folgendes ein: „Programm [Name];“. Das heißt, wenn Sie möchten, dass das Programm „Hallo“ heißt, müssen Sie „Programm Hallo;“ eingeben.

3 Geben Sie die „begin“-Anweisung ein. Dies bedeutet, dass der Code, der später ausgeführt werden muss, begonnen hat.

4 Wir verwenden eine der häufigsten Konstruktionen in Pascal „writeln(‘[etwas Text]‘);“. Es zeigt einfach Text auf dem Bildschirm an. Was in Klammern und Anführungszeichen steht. Wir werden die Kombination vorstellen "Hallo Welt!". Hier beginnt normalerweise die Reise in die große Welt der Softwareentwicklung. So würde die nächste Zeile aussehen „writeln(‚Hallo Welt!‘);“.

5 Um die ausgeführte Verschlüsselung abzuschließen, Geben Sie „Ende“ ein.(unbedingt mit einem Punkt am Ende).

6 Drücken Sie nun die Taste „F9“ um auszuführen, was Sie geschrieben haben. Sie werden sehen, dass die Wörter auf dem Bildschirm erscheinen "Hallo Welt!". Das war erforderlich!

Um den Einstieg in andere Sprachen zu erleichtern, finden sich in Büchern meist auch Anleitungen, wie man „Hallo Welt!“ schreibt. , also Anweisungen, die einfach solch einfachen Text auf dem Bildschirm anzeigen.

Sie haben also Ihre erste Chiffre gemeistert! Ein Anfang. Gehen Sie nun zum intensiven Training über.

Schritt fünf. Nehmen Sie an einer Online-Schulung teil

Der Vorteil des Online-Unterrichts besteht darin, dass Sie von Anfang bis Ende alles klar sehen.

Daher ist es für Anfänger besser, ihre Reise mit Online-Schulungen zu beginnen. Hier beste Kurse in Russisch:

Kurs „Grundlagen der Programmierung“ vom Bildungs-IT-Portal GeekBrains. Hier wird alles von Anfang an erzählt, von den Grundlagen. Sie können die Geschichte und Entwicklung dieser Branche studieren und dann nach und nach Teil davon werden. Die gleiche Schulungsreihe kann von einem Torrent heruntergeladen werden (hier ist der Link).
Lehren aus der School of Programmers. Dieser Kurs ist für diejenigen geeignet, die nicht einmal etwas über Mathematik wissen, die Natur von Zahlen nicht kennen, nicht wissen, wie Informationen in einem Computer dargestellt werden und ähnliche Punkte. Das heißt, wenn Sie sich für einen völligen Laien halten, schauen Sie sich diese Video-Lektionen an.
„Programming Foundation“ von EG Lab. Hier wird über dieses Handwerk im Allgemeinen gesprochen, über die Entwicklung komplexer Aufgaben und Datentypen (insgesamt drei Lektionen). Das Ansehen dieser Lektionen wird eine große Hilfe sein, um in Zukunft mit dem Erlernen einer bestimmten Sprache zu beginnen.

Nachdem Sie sich diese Kurse angesehen haben, müssen Sie mit den Lektionen fortfahren, die einer bestimmten Sprache oder Branche Ihrer Wahl gewidmet sind.

Wenn Sie Englisch können, ist das ein großer Vorteil, aber nur, wenn Sie bereits etwas können.

Aus irgendeinem Grund werden dort keine Kurse für diejenigen angeboten, die in dieser Angelegenheit absolut null Ahnung haben (oder sie sind unmöglich zu finden).

Es gibt aber Kurse für bestimmte Sprachen. Zum Beispiel gibt es „Learn Java Simply“, „C++ Programming Tutorial for Beginners“, „How to program in C# – BASICS“ und vieles mehr.

Wählen Sie das Training entsprechend der Richtung Ihrer Tätigkeit.

Wenn Sie sich zumindest ein paar Lektionen angeschaut haben, können Sie zu etwas Bedeutsamerem übergehen, Bücher studieren.

Web Entwicklung. Schneller Start
Grundlagen von HTML/CSS und PHP

PHP (Hypertext PreProcessor, Hypertext-Präprozessor) ist eine Programmiersprache, die auf der Webserverseite ausgeführt wird. Der Erfinder von PHP, Rasmus Lerdorf, hat es als Werkzeug zum Erstellen dynamischer und interaktiver Websites konzipiert. Die Sprache erfreut sich großer Beliebtheit und wird in Projekten verwendet verschiedene Maßstäbe: Vom einfachen Blog bis zu den größten Webanwendungen im Internet. Die größten PHP-Projekte sind Zend, Yahoo, Facebook, Google, NASA, W3C. Der Kurs richtet sich an diejenigen, die grundlegende Webentwicklungskenntnisse in PHP erwerben, die Logik der Arbeit mit dieser Sprache und Terminologie erlernen und auch die Funktionsprinzipien von Systemen und Webanwendungen verstehen möchten. Während des Schulungsprozesses durchlaufen die Studierenden die Hauptphasen der Erstellung einer einfachen Online-Shop-Website und arbeiten an deren Funktionalität. Die im Studium erworbenen Kenntnisse und Fähigkeiten sind eine verlässliche Grundlage für die Weiterentwicklung als PHP-Entwickler.

Lektion 2. Installieren und Bereitstellen eines Servers auf Ihrem Computer

Wie Webserver, PHP-Interpreter und Datenbank miteinander interagieren; herunterladen Fertige Montage Öffnen Sie den Server; Wählen Sie die PHP-Version aus. Wählen Sie die Apache-Version aus; Einrichten des Zugriffs auf die lokale Site; wie man versteht, dass alles richtig konfiguriert ist und funktioniert; Wir verwenden den in die Open Server-Assembly integrierten Sublime Text-Codeeditor.

Lektion 3. So erstellen Sie Webseiten

Überlegen Sie kurz, wofür HTML benötigt wird. Wir berücksichtigen die wichtigsten Tags: doctype, html, head, title, body, header, h1, footer, div, a, img und ihre Position auf der Webseite; Wir zeigen, wie diese Tags funktionieren; Erstellte Tags im Panel anzeigen
„Entwicklertools“ auf Google Chrome; Erstellen Sie Links zu Startseite und eine Seite mit dem Geschäft, damit Sie zum Geschäft und zurück gehen können.

Lektion 4. Erstellen eines Layouts für unseren Shop

Schauen wir uns CSS an: Was es ist, wie man Stile mit der Seite verbindet; Wir schreiben einen Header und überlegen, wie wir ihn mit CSS gestalten können.

Lektion 5. Fertigstellen des Vorlagendesigns

Wir beenden das Schreiben des Headers; Hinzufügen der restlichen Teile des Layouts aus fertige Vorlage; Wir übernehmen die notwendigen Teile des Layouts aus der fertigen Vorlage (HTML, CSS, JavaScript).

Lektion 6. PHP-Grundlagen

So verwenden Sie PHP in unserer Vorlage; wofür Variablen benötigt werden und wie man mit ihnen arbeitet; Welche Datentypen gibt es in PHP, wozu dienen sie?

Lektion 7. So speichern Sie viele zusammengehörige Daten

Wozu dienen Arrays und wie verwendet man sie? Wir fügen Informationen über das Produkt in ein Array ein.

Lektion 8. Speicherung und Verarbeitung verwandter Daten

Verschachtelte Arrays; Wir platzieren Daten für unseren Shop in verschachtelten Arrays; So erhalten Sie Informationen zu einem Produkt aus einem verschachtelten Array.

Lektion 9. Arbeiten mit Zyklen

Was tun, wenn Sie viele Daten aus einem Array auf der Seite anzeigen müssen?

Lektion 10. Wie man eine Website zum Leben erweckt

Wie man das Programm dazu bringt, sein Verhalten je nach verschiedenen Bedingungen zu ändern; wie man versteht, welche Seite geöffnet werden soll; Parameter verwenden Adressleiste um die gewünschte Seite zu öffnen.

Lektion 11. So navigieren Sie zwischen Seiten

Lektion 12. Erstellen eines Produktkatalogs

Alle Produkte auf der Seite anzeigen; Arbeiten mit der Produktseite; wie man für jedes Produkt im Produktkatalog die richtigen Links erstellt; Produktinformationen zeigen wir auf einer separaten Seite an.

Lektion 13. Platzieren Sie eine Website im Internet

Registrierung eines Namens für unsere Website; Laden Sie Dateien auf das Hosting hoch und überprüfen Sie die Funktionalität der Site.

HTML/CSS ist eine Hypertext-Auszeichnungssprache, die Grundlage für das Studium serverseitiger Sprachen. Sobald Sie HTML gelernt haben, können Sie eine statische Webseite oder Website erstellen. Mit CSS – Cascading Style Sheets – können Sie Ihre Website nach Ihren Wünschen gestalten. Sie können sich den Videokurs zu einem geeigneten Zeitpunkt ansehen. Wenn Sie Fragen haben, wenden Sie sich an einen Mentor, der Ihren Fortschritt überwacht. Das Format fördert Kommunikation und Selbstdisziplin beim Lernen. In einem Monat lernen Sie: * Layout statischer Websites, * gültiges browserübergreifendes Layout, * Blocklayout, * grundlegende Vorgänge in Photoshop ausführen, * verwenden WENIGER Präprozessoren und Bootstrap. Ihre Hausaufgaben müssen benotet werden, bevor Sie mit der nächsten Lektion im Kurs fortfahren können. Dies zeigt, dass Sie die vorherige Lektion verstanden haben und sich leicht neues Wissen aneignen können. Die Aufgabe kann sowohl vom Mentor als auch von Mitschülern, deren Wissen Sie vertrauen, überprüft werden und dafür eine Leistung erhalten. Mit jeder Überprüfung wächst die Anzahl der Erfolge und die Fähigkeit, mit dem Code anderer Leute zu arbeiten, nimmt zu. Die Höhe des Abschlusszeugnisses richtet sich nach der Anzahl der erbrachten Leistungen: Je mehr es sind, desto höher ist der Status. Diese Spielmechanik macht den Unterricht noch interessanter.

Lektion 1. Grundlegende Konzepte in der Webentwicklung

Was ist die Webseite? Arten von Websites; Website-Entwicklungsprozess; Was ist Hypertext, Tags und Attribute? Vorbereitung des Arbeitsplatzes; HTML-Dokumentstruktur; grundlegende Textdesign-Tags; ein einfaches Beispiel einer HTML-Seite; Beispiel einer komplexen Webseite; Hotkeys zum Navigieren durch Dokumente.

Lektion 2. Grundlagen der HTML-Dokumentauszeichnungssprache

Lektion 3. Grundlagen der CSS-Dokumentstilsprache

Was ist CSS? CSS-Syntax; CSS-Deklarationsmethoden; Selektoren (ID, Klasse, Tag); Attributselektoren.; grundlegende Eigenschaften von Stilen; nistend; Vererbung und Gruppierung von Immobilien; Überprüfen der Verbindung der Styles-Datei.

Lektion 4. Pseudoklassen und Pseudoelemente, Tabellenlayout

Prioritäten für die Anwendung von Stilen; Pseudoklassen und Pseudoelemente; Erstellen von Tabellen; Zellen verschmelzen; verschachtelte Tabellen; Gestaltung von Tischen.

Lektion 5. Bildung eines Blockmodells, Blocklayout

Grundlegende Tags für das Layout (div und span); Elementeinzüge (Rand und Polsterung); stromlinienförmige Elemente; Blockpositionierung.

Lektion 6. Arbeiten mit einem Designmodell im PSD-Format

Grundfunktionen und Einführung in Photoshop; Hervorheben der Hauptteile des Layouts; Layoutschneiden; Layout der Website mithilfe von Blöcken; Einfügen von Teilen des Layouts in das Layout;

Lektion 7. Website-Markup und Einführung in Bootstrap

Erstellen des Haupt-Site-Layouts; Verwendung von Overflow und Clear im realen Layout; Füllen der Markierungen mit Teilen des Schnittlayouts; Techniken zur Positionierung von Elementen; Einführung und Verwendung von Bootstrap.

Lektion 8. Webstandards und unterstützende Tools

Hochladen von Projekten auf den Server; Cross-Browser-Problem; HTML/CSS-Standards; Die Zukunft liegt in den Standards HTML5 und CSS3. kompetentes, universelles Layout; Einführung in Präprozessoren am Beispiel von LESS.

Git. Schneller Start
Git-Grundlagen

Der Videokurs vermittelt Erfahrungen in der Teamentwicklung mit Git. Erfahren Sie, wie Sie ein gemeinsam genutztes Code-Repository von Grund auf organisieren und effektiv nutzen. Die Studierenden beherrschen Git-Clients mit grafischen und Konsolenschnittstellen, lernen, die Veröffentlichung von Programmversionen zu steuern und auf frühere Versionen zurückzusetzen. Häufige Fehler bei der Teamentwicklung werden ausführlich besprochen: beim Zusammenführen von Zweigen, beim Erstellen von Commits, beim Speichern ausführbarer Dateien in einem Repository.

Lektion 1. Zweck und Fähigkeiten

Lassen Sie uns herausfinden, warum Git benötigt wird und welche Möglichkeiten es Programmierern eröffnet.

Lektion 2: Grundlegende Operationen

Wir erstellen ein Code-Repository, auf das alle Entwicklungsteilnehmer über das Netzwerk zugreifen können. Wir beherrschen grundlegende Operationen: Clone, Commit, Push, Pull.

Lektion 3. Codeänderungen rückgängig machen

Lernen, Codeänderungen mit Git rückgängig zu machen. Wir beherrschen die Operationen Verwerfen, Zurücksetzen, Zurücksetzen.

Lektion 4. Mit Zweigen arbeiten

Arbeiten mit Zweigen.
Parallel dazu entwickeln wir mehrere Versionen des Programms. Wir beherrschen die Operationen Filiale hinzufügen, Auschecken, Zusammenführen.

Lektion 5. Konflikte

Lernen, Konflikte beim Zusammenführen von Zweigen zu lösen.

Lektion 6. Häufige Fehler. Teil 1

Angst vor der Gründung neuer Filialen. Ausführbare Dateien in einem Repository speichern.

Lektion 7. Häufige Fehler. Teil 2

Fehler beim Arbeiten mit Zweigen. Fehler beim Erstellen von Commits.

Lektion 8. Pull-Anfrage. Arbeiten mit Open-Source-Projekten

Lassen Sie uns Pull Requests am Beispiel der Arbeit mit Open-Source-Projekten meistern.

Lektion 9. Pull-Anfrage. Hausaufgaben abgeben.

Senden Sie Hausaufgaben mithilfe von Pull Request an GeekBrains.

Lektion 10. Konsolen-Git-Client. Grundoperationen

Wir beherrschen grundlegende Operationen im Konsolen-Git-Client.

Lektion 11. Konsolen-Git-Client. Arbeiten mit Zweigen

Lernen, mit Zweigen im Konsolen-Git-Client zu arbeiten.

Lektion 12. Arbeiten mit Programmversionen

Loslassen lernen verschiedene Versionen Softwareprodukt mit Git.

Lektion 13. Ergebnisse

Fassen wir die geleistete Arbeit zusammen.

HTML5 und CSS3. 1 Monat.
Moderne Webentwicklungstools

Die Basis der Web-Technologie ist HTML/CSS. Dies ist die Grundlage, die als Grundlage für die Erstellung moderner Websites dient und die erste Stufe zum Erlernen anderer Programmiertechnologien für das globale Internet darstellt. Jede bedeutende Organisation verfügt über eine eigene Vertretung im globalen Netzwerk. Dies ist eine Anforderung der Zeit und eine Anforderung des Marktes. Ohne Berücksichtigung der modernen Realitäten der Welt ist es unmöglich, Wettbewerbsfähigkeit und damit Erfolg zu erreichen. Es ist die HTML/CSS-Kombination, die es ermöglicht, Layouts zu erstellen sowie statische Websites zu erstellen und zu bearbeiten. Die in diesem Studiengang erlernte Programmiertechnologie ermöglicht es Ihnen, eine langfristige Grundlage zu schaffen und in diesem Bereich auf dem Arbeitsmarkt Fuß zu fassen.

Lektion 1. HTML5: Semantische Elemente.

Überprüfung von HTML5, Neue semantische Elemente von HTML5, Neue Art der Seitenstrukturierung. Semantik auf Textebene. Einrichten des Editors, praktische Beispiele für die Verwendung semantischer Tags zum Erstellen einer Site-Struktur. Einführung in Plugins, die das Website-Layout beschleunigen.

Lektion 2. Elemente positionieren, praktisches Layout.

Positionierung von Elementen, Anordnung von Elementen auf der Seite (Positionierung von Elementen vertikal, horizontal). Schauen wir uns die beliebtesten CSS-Generatoren an, was sie sind und wofür sie jeweils verwendet werden.

Lektion 3. HTML5-Formulare. Hinzufügen von Audio und Video zur Seite.

Lassen Sie uns diese Merkmale anhand praktischer Beispiele im Detail betrachten und analysieren. Verbesserungen gegenüber traditionellen Formen (Hinzufügen von Hinweisen, Fokussierung auf ein Element usw.). Formulare auf Ausfüllfehler prüfen. Neue Elementtypen (Adressen Email, URLs usw.). Fügen wir unserem Projekt Video- und Audioinformationen hinzu und sehen wir, wie das alles in der Praxis umgesetzt wird. Schauen wir uns an, wie Tags funktionieren

Lektion 4: Hintergrund-CSS-Optionen. Verwenden von SVG.

Erstellen mehrerer Hintergründe für die Site. Übung Hintergrundbilder für responsive Websites. Erstellen eines Hintergrunds mit Farbverlauf für eine Website. Einführung in Sprites und Symbolschriftarten. Lassen Sie uns unser Projekt entsprechend den neuen Funktionen von CSS3 modernisieren. Fügen wir die notwendigen Elemente und Effekte hinzu. Einführung in das SVG-Format.

Lektion 5. Arbeiten mit Text. Grenzen in CSS3

Arbeiten mit Schriftarten. GOOGLE Web-Schriftarten. Platzieren von Text in mehreren Spalten. Betrachten wir die Mechanismen zur Darstellung von Textinformationen: Design, Ausrichtung, Einrückung. Umschaltbare Registerkarten zum Erstellen von Menüs. Schauen wir uns die Grundlagen von Canvas an. Schauen wir uns die Arbeit mit Rahmen in CSS und Möglichkeiten zum Erstellen von Rahmen für Elemente an. Erstellen Sie transparente Rahmen, Schatten, abgerundete Ecken und Farbverläufe.

Lektion 6. CSS3-Übergangs- und Transformationseffekte.

Übergangseffekte. Transformation anwenden. Drehen Sie Elemente, wenn Sie mit der Maus darüber fahren. Animationen mit CSS3 erstellen. Lassen Sie uns herausfinden, wofür es ist diese Technologie und wo es angewendet werden soll. Fügen wir einigen Elementen unserer Website Animationen hinzu.

Lektion 7. Adaptives Layout (Teil 1).

Schauen wir uns das Konzept des responsiven Designs an. Wofür und in welchen Fällen wird es verwendet. Grundlegende Syntax und Beispiele. Geben wir dem Design ein modernes Aussehen.

Lektion 8. CSS3 Advanced Study.SASS. Flexbox.

Schauen wir uns die neue Flex-Eigenschaft an, die erstellt werden soll flexible Struktur interne Blöcke der Site. Wir werden das endgültige Projekt mit allen durch CSS3 eingeführten Verbesserungen und Innovationen erstellen und dabei einen der beliebtesten SASS-Präprozessoren verwenden.

Grundlagen der Programmierung
Grundlagen der Programmierung, Grundbegriffe und Konzepte

Der Videokurs führt die Studierenden in die Grundlagen der Programmierung, Grundbegriffe und Konzepte ein. Es vermittelt Ihnen, wie Sie Algorithmen entwickeln, und vermittelt Ihnen echte Erfahrungen bei der Erstellung von Webprodukten. Die Lektionen umfassen einen Überblick über aktuelle Programmiersprachen und -bereiche, helfen den Schülern bei der Auswahl derjenigen, die für sie am interessantesten sind, und stellen Materialien und Anleitungen für die weitere berufliche Entwicklung bereit.

Lektion 3. Erstes Programm

Auswahl einer Programmiersprache. Vorbereiten des Browsers. Programm „Hallo Welt!“

Lektion 4. Variablen

Installieren eines praktischen Code-Editors. Einführung in Variablen. Ein einfacher Taschenrechner.

Lektion 5. Datentypen

Datentypen. Operationen mit verschiedene Typen Daten. Datentypkonvertierung.

Lektion 6. Algorithmen und Flussdiagramme

Algorithmisches Denken. Visuelle Flussdiagramme.

Lektion 7. Filialbetreiber, wenn

Auswählen von Optionen im Programm. Filialbetreiber, wenn. Ein Rätselspiel.

Lektion 8. Logische Operationen

Komplexe Auswahlbedingungen. Logisches UND, ODER. Spiel „Angry Birds“.

Lektion 9. Machen Sie While-Schleifen

Do- und While-Schleifen. Russisches Roulette spielen.

Lektion 10. For-Schleife

Die for-Schleife. Finanzrechner.

Lektion 11. Arrays

Große Datensätze und Arrays. Roulette-Spiel.

Lektion 12. Funktionen

Funktionen. Ich bereite mich darauf vor, das Spiel „Black Jack (21)“ zu schreiben.

Lektion 13. Spiel „Black Jack“. Teil 1

Ein vollständiges Spiel schreiben. Grundlage ist das Austeilen von Karten und das Zählen von Punkten.

Lektion 14. Spiel „Black Jack“. Teil 2

Abschluss des Schreibens des Spiels. Ermittlung der Ergebnisse und Gewinner.

Lektion 15. Programmierkarriere

Überblick über die Hauptrichtungen der Programmierung. Wie wähle ich eine Programmiersprache aus? Was soll ich als nächstes lernen?

JavaScript. Stufe 1. 1 Monat.
Interaktive Webanwendungen

Dieser Kurs richtet sich an diejenigen, die bereits mit den Prinzipien des HTML-Layouts und der Erstellung statischer Seiten vertraut sind. Die auf dieser Stufe erworbenen praktischen Kenntnisse und Fähigkeiten ermöglichen die Arbeit und die Erstellung dynamischer Webseiten und Anwendungen. Der Kurs systematisiert das Wissen von Studierenden, die bereits mit JavaScript in Berührung gekommen sind, aber keine umfassende Erfahrung mit der Sprache haben. Die Studierenden erlernen die Grundlagen des Schaffens interaktive Webseiten mit Hilfe JavaScript-Sprache. Die im Unterricht erworbenen Kenntnisse werden durch den praktischen Teil – die Umsetzung von Spielen in JavaScript – vertieft. Vor Beginn der Ausbildung empfiehlt es sich, die Kurse „Grundlagen der Programmierung“ und „HTML/CSS“ zu belegen.

Lektion 1: JavaScript-Grundlagen

Syntax; Codestruktur; externe Skripte und die Reihenfolge ihrer Ausführung; Variablen und Datentypen; Hallo Welt; moderne Standards.

Lektion 3. Schleifen, Arrays, Datenstrukturen

Schleifen in JavaScript; Arrays in JavaScript; Datenstrukturen; Werkstatt; Spiel „Bullen und Kühe“.

Lektion 4. Objekte in JavaScript

Einführung in den Objektbegriff; Objekte in JavaScript; Arbeiten mit Objekten; Aufzählung von Werten; Werkstatt; Spiel "Quest".

Lektion 5. Einführung in DOM

Konzept von DOM; DOM in JavaScript; DOM-Manipulation in JavaScript; Werkstatt; Spiel „Quest 2.0“.

Lektion 6. Umgang mit Ereignissen in JavaScript

Das Konzept einer Veranstaltung; Klickverarbeitung; Browserereignisse; Werkstatt; Spiel „Tic Tac Toe“.

Lektion 7. Workshop-Lektion

Umsetzung des Spiels „Snake“.

Lektion 8. Anonyme Funktionen, Abschlüsse

Eingehende Untersuchung der Funktionsweise von Funktionen; Funktionen und funktionale Ausdrücke; anonyme Funktionen; Kurzschlüsse; Standard-Browseraktionen.

Der Kurs richtet sich an diejenigen, die bereits die grundlegenden Fähigkeiten der JavaScript-Sprache beherrschen und nun lernen möchten, wie man wirklich coole Dinge macht. Jede Lektion beinhaltet sowohl nützliche Theorie als auch effektive Praxis. Vollgepackt mit den neuesten Kenntnissen und Fähigkeiten ist der Aufbaukurs von GeekBrains der Weg, schnell und zuverlässig ein professioneller JavaScript-Entwickler zu werden.

Lektion 1: Modernes JavaScript

Einführung in den ES2015-Standard und einige seiner Funktionen.

Lektion 2. OOP in JavaScript

Grundprinzipien der objektorientierten Programmierung und ihre Implementierung in JavaScript.

Lektion 3. Asynchrone Anfragen

Asynchrone JavaScript-Grundlagen. AJAX, JSON und Versprechen.

Lektion 4. Reguläre Ausdrücke

Reguläre Ausdrücke in JavaScript. Grundlegende Operationen mit Reguläre Ausdrücke und Linien.

Lektion 5. Vue.js-Framework

Grundlagen der Entwicklung von Single-Page-Anwendungen mit dem Vue.js-Framework.

Lektion 6. Vue.js-Komponenten

Implementierung des Komponentenansatzes im Vue.js-Framework.

Lektion 7. JavaScript auf dem Server

Erstellen eines einfachen Servers mithilfe der Node.js-Plattform.

Lektion 8. Testen und Bauen

Testen einzelner Teile der Anwendung. Erstellen von Modulen mit Webpack.

PHP. Stufe 1. 1 Monat.
Grundlagen der Webentwicklung

PHP ist eine der drei beliebtesten und beliebtesten Programmiersprachen der Welt. Es wird häufig bei der Erstellung dynamisch generierter Webseiten verwendet. Die meisten freiberuflichen Programmierer auf der Welt verwenden PHP-Sprache: Es ermöglicht Ihnen die Entwicklung dynamischer Websites beliebiger Komplexität und verfügt über eine große Auswahl an integrierten Tools für die Entwicklung von Webanwendungen. Der Kurs „PHP. Level 1“ von GeekBrains wurde erstellt, um Programmieranfängern die Grundlagen der Entwicklung von Websites in PHP zu vermitteln. Anfänger lernen die Prinzipien der objektorientierten Programmierung kennen und lernen, die Grundkonstrukte der Sprache richtig anzuwenden. Erfahrenere Entwickler haben die Möglichkeit, ihre Programmierkultur deutlich zu verbessern und ihr Website-Skript kompetent und professionell zu gestalten.

Lektion 1. Einführung in PHP

So funktionieren dynamische Websites
Wie Webserver funktionieren
Vorbereitung der Arbeitsumgebung
Hallo Welt! [Üben]
Grundlegende Sprachkonstrukte – Deskriptoren, Variablen, Datentypen
Sprachversionen und ihre Unterschiede auf einer grundlegenden Ebene

Lektion 2. Bedingte Blöcke, Funktionsverzweigung

Verzweigungsprinzipien, Visualisierung, Flussdiagramme
Operatoren if, if-else
switch-Anweisung
Ternärer Operator
Implementierung von Verzweigungslogikschaltungen
Ternärer Operator
Funktionen, Rekursion
Verwendung von Funktionen und Rekursion zur Lösung von Problemen
Variable Bereiche

Lektion 3. Schleifen und Arrays

Das Konzept einer Schleife, Arten von Schleifen in PHP
Während, tun...während
Für
Endlosschleife und Ausstieg aus Stufen, Schleife
Das Konzept eines Arrays, Arten von Arrays in PHP
Verwenden von Schleifen zum Arbeiten mit Arrays [Übung]
Mehrdimensionale Arrays
Grundfunktionen für die Arbeit mit Arrays Funktionen für die Arbeit mit Arrays verwenden [Übung]
Vordefinierte Arrays

Lektion 4. Arbeiten mit Dateien

Dateisystem und Adressierung, Beispiele basierend auf verschiedenen Betriebssystemen
Dateien mit Code verbinden
Grundlegende Operationen mit Dateien – Lesen, Schreiben.
Grundlegende Operationen zur Lösung alltäglicher Probleme anwenden – Protokollierung, Daten lesen, Caching [Übung]
Typische Datenspeicherformate

Lektion 5. MySQL-Datenbanken und die Arbeit mit ihnen auf PHP-Ebene

Erstellen einer Datenbank, Benutzer
Tabellen erstellen
Grundlegende Abfragesyntax. Wir erstellen, bearbeiten und löschen Tabellen. Wir studieren die 4 Hauptbefehle: INSERT, UPDATE, DELETE, SELECT
Aus der Datenbank auswählen und auf dem Bildschirm anzeigen

Lektion 6. Interaktivität: GET- und POST-Datenübertragungsmethoden, Arbeiten mit Formularen und Benutzerdaten

Grundlegende Methoden zur Datenübertragung an den Server
GET- und POST-Methoden
Übergabe von Daten vom Formular an das Skript
Verarbeitung und Speicherung von Daten in der Datenbank zur Gewährleistung der Sicherheit.
Implementierung eines CRUD-Aktionspakets [Übung]

Lektion 7. Autorisierung und Authentifizierung

Lektion 8. Üben

Schreiben der fehlenden Seitenlogik
Testaufträge erstellen
Testen

PHP. Stufe 2. 1 Monat.
Professionelle Webentwicklung

Dies ist der umfassendste professionelle Kurs zum Beherrschen von PHP auf Meistervirtuosenniveau. Entwickelt für diejenigen, die bereits verstehen, was PHP ist und welche Leistungsfähigkeit und welches Potenzial diese Sprache bietet. Viele Kursabsolventen behaupten, dass ein Monat Ausbildung in unserem Programm mit jahrelangem Lernen anhand von Büchern oder Materialien aus dem Internet verglichen werden kann!

Lektion 1. OOP in PHP. Grundlegendes Konzept.

Einführung in das OOP-Paradigma, Vertrautheit mit grundlegenden Konzepten und Prinzipien. Implementierung von OOP in PHP.

Lektion 2. OOP in PHP. Erweiterte Studie.

Fortsetzung des Studiums von OOP und seiner Implementierung in PHP. Architektonische Aspekte von OOP. Magische Methoden, Typkontrolle, Eigenschaften, Muster.

Lektion 3. Template-Engines

Das Konzept der Template-Engines. Wir stellen vor: Twig. Implementierung der Template-Engine-Funktionalität. Ausnahmen in PHP.

Lektion 4. Ausführlicher Entwurf relationaler Datenbanken.

Weitere Kennenlernen der Symbiose von MySQL und PHP. Das Konzept der Datennormalisierung, verschiedene Formen der Normalisierung. Links in der Datenbank. Sicherung Optimierung der Daten- und Datenbankleistung. Einführung in den Transaktionsmechanismus.

Lektion 5. Das MVC-Paradigma. Motoraktualisierungen

Einführung in das Paradigmenmuster „Model-View-Controller“. Aktualisierung der Systemarchitektur. Code-Standardisierung.

Lektion 7. Testen. PHPUnit.

Einführung in Testprinzipien, TDD, BDD. Einführung in PHPUnit, Schreiben von Tests.

Lektion 8. Die Karriere eines Entwicklers entwickeln. Werkzeuge und erforderliche Kenntnisse

Überblick über Trends in der modernen Programmierung und Entwicklung in PHP. Kennenlernen Nützliche Hilfsmittel. Diskussion der Weiterentwicklung.

Auf der neuen Stufe des Datenbank-Kurspakets erhalten Studierende umfassende Informationen zur Langzeitspeicherung. Sie werden eng mit MySQL zusammenarbeiten, einem Datenbankverwaltungssystem, das sich bei beliebten Großprojekten bewährt hat. Das Entwerfen von Datenbanken und das Arbeiten mit ihnen wird Schritt für Schritt erklärt. Der Kurs stellt auch alternative Datenbanken vor: MongoDB, Redis, ElasticSearch und ClickHouse.

Lektion 1. Schnellstart

1.1. Arten von Datenbanken.
1.2. Grundlagen relationaler Datenbanken.
1.3. MySQL und Clients.
1.4. Datenbankmanagement.
1.5. Analyse der Hausaufgaben.

Lektion 2. SQL-Abfragesprache

2.1. Einführung in SQL.
2.2. Numerische und String-Datentypen.
2.3. Kalenderdatentypen und -sätze.
2.4. Indizes.
2.5. CRUD-Operationen.
2.6. Analyse der Hausaufgaben.

Lektion 3. Operatoren, Filtern, Sortieren und Begrenzen

3.1. Betreiber.
3.2. Bedingte Probenahme.
3.3. Sortierung und Einschränkungen.
3.4. Vordefinierte Funktionen.
3.5. Vordefinierte Funktionen (Fortsetzung).
3.6. Analyse der Hausaufgaben.

Lektion 4. Datenaggregation

4.1. Daten gruppieren.
4.2. Aggregationsfunktionen.
4.3. Besonderheiten GROUP BY.
4.4. Analyse der Hausaufgaben.

Lektion 5. Komplexe Abfragen

5.1. Arten von Abfragen mit mehreren Tabellen und UNION
5.2. Verschachtelte Abfragen
5.3. JOIN-Tabellenverknüpfungen
5.4. Fremdschlüssel und referenzielle Integrität
5.5. Hausaufgabenanalyse

Lektion 6. Transaktionen, Variablen, Ansichten

6.1. Transaktionen.
6.2. Interne Umsetzung von Transaktionen.
6.3. Variablen, temporäre Tabellen und dynamische Abfragen.
6.4. Darstellung.
6.5. Analyse der Hausaufgaben.

Lektion 7. MySQL-Administration

7.1. MySQL-Administration.
7.2. MySQL-Administration (Fortsetzung).
7.3. Nutzerrechte.
7.4. Reproduzieren.
7.5. Replikation (Fortsetzung).
7.6. Analyse der Hausaufgaben.

Lektion 9. Abfrageoptimierung

9.1. Arten von Tabellen.
9.2. Erfahren Sie mehr über Indizes.
9.3. Abfrageoptimierung.
9.4. Analyse der Hausaufgaben.

Lektion 10. NoSQL

10.1. NoSQL-Datenbanken.
10.2. Schlüsselwert des Redis-Stores.
10.3. Dokumentorientiertes DBMS MongoDB.
10.4. DBMS Volltextsuche ElasticSearch.
10.5. ClickHouse-Säulen-DBMS.
10.6. Analyse der Hausaufgaben.

Yii2-Framework. 1 Monat.
Professionelle Backend-Entwicklung

Das Yii2-Framework ist eines der beliebtesten und gefragtesten PHP-Frameworks. Die Kenntnis eines beliebigen Frameworks erhöht qualitativ die Nachfrage nach einem PHP-Programmierer auf dem Arbeitsmarkt und sein Gehalt. Der Kurs richtet sich an Personen, die mit PHP und OOP auf einem grundlegenden Niveau vertraut sind. Wir werden uns eine einfache und eine erweiterte Anwendungsvorlage ansehen und eine Anwendung entwickeln, die dem Evernote-Programm ähnelt. Indem Sie Ihre Hausaufgaben machen, erstellen Sie ein vollwertiges Projekt für Ihr Portfolio: ein Kalenderprogramm, in dem Sie Notizen zu Ihren Plänen für den Tag machen und es mit anderen Benutzern „teilen“ können.

Lektion 1. Konzept eines Frameworks. Wir stellen Yii2 vor

Einführung in das Konzept eines Frameworks. Einführung in Yii2. Hallo Welt

Lektion 2. Erlernen der integrierten Funktionalität

Grundlegende Klassen und Funktionen von Yii2. Codogneration. Komponenten

Lektion 3. Hilfsklassen. Formen

Helfer. Formularverarbeitung. Protokollierung

Lektion 4. Arbeiten mit Datenbanken

Anbindung der Datenbank. Objekte zum Arbeiten mit Anfragen. Migrationen.

Lektion 5. Aktiver Datensatz

Lektion 6. Widgets. Verhaltensweisen

Prinzipien der Arbeit mit Widgets. Verhaltensmechanismus

Lektion 7. Konsolenbefehle. Zwischenspeicher

Back-End-Komponente der Logik. Serviceteams. Optimierung durch Caching

Wir leben in einer Welt, in der viele „traditionelle“ Fähigkeiten nicht mehr gefragt sind. Wenn Sie den Anweisungen in diesem Artikel folgen, werden Sie viel schneller zum Webprogrammierer. Aber es wird Ihnen trotzdem viel Mühe abverlangen!

Was ist ein Webentwickler?

Hier ist eine einfache Antwort auf diese Frage: Webentwickler. Sie brauchen die besten Spezialisten, und sie sind bereit, viel Geld auszugeben, um diese Webentwickler zu gewinnen.

Verantwortlichkeiten und Anforderungen für Webentwickler:

Erstellen von Webseiten mit verschiedenen Auszeichnungssprachen;
Erstellung hochwertiger Layouts und Prototypen;
Websites auf WordPress von Grund auf erstellen;
Verständnis von HTML und CMS;
Verständnis von UI und UX;
Entwicklung von Funktionalität und Design von Websites und Webanwendungen;
Wartung und Verbesserung der Website.

Wenn wir über die Spezialisierung von Webprogrammierern sprechen, gibt es drei Hauptbereiche:

Frontend-Entwicklung. « Frontend„ bezeichnet die Elemente auf der Website, die Sie sehen und mit denen Sie interagieren, wie z. B. Menüs, Dropdown-Listen usw.;
Backend-Entwicklung. " Backend„Sieht aus wie der Unterwasserteil eines Eisbergs. Ohne sie kann die Website nicht funktionieren. Das Backend befasst sich mit Dingen wie Servern, Anwendungen und Datenbanken.
Full-Stack-Entwicklung. Es handelt sich um eine Kombination aus Back-End- und Front-End-Entwicklung.

Warum Webentwickler werden?

Webentwicklung ist eine Branche, die definitiv nicht so schnell sterben wird. Das US Bureau of Labor Statistics hat bis 2024 ein Beschäftigungswachstum von 27 % in der Webentwicklung prognostiziert.

Hier sind fünf Hauptgründe, Webprogrammierer zu werden und von Grund auf zu lernen:

Sie können remote arbeiten;
Sie können selbstständig arbeiten. Freiberuflich tätig sein oder ein eigenes Unternehmen gründen;
Sie betreten einen lukrativen Technologiemarkt. Webentwicklung ist eine Eintrittskarte in die Welt der Hochtechnologie. Die meisten Technologie-Startups benötigen Webentwickler, daher könnte dies Ihr Weg zum Erfolg sein.

So werden Sie Webentwickler

Lernen Sie die Grundlagen von HTML, CSS und Javascript

Dies sind die Grundlagen jeder Website und diejenigen, mit denen Sie täglich arbeiten werden.

HTML definiert die Struktur;
CSS macht es optisch ansprechend;
Javascript sorgt dafür, dass es funktioniert.

Bevor wir Webprogrammierer werden, sollten wir jeden dieser Aspekte berücksichtigen.

HTML

HTML steht für Hypertext Auszeichnungssprache. Dies ist einer der Hauptbestandteile jeder Website und eine der sogenannten Frontend-Sprachen. Es bildet die Grundstruktur der Seite, dies geschieht hauptsächlich mit Hilfe von Tags.

Nachfolgend finden Sie einige grundlegende HTML-Tags, mit denen Sie vertraut sein sollten:

… – Dieses Tag erscheint am Anfang und Ende eines HTML-Dokuments.
… </ title>ist der Name der Webseite. Es ist sowohl für Suchmaschinen wichtig ( <span>beim Crawlen und Indexieren von Webseiten</span>) und für Benutzer ( <span>Es wird in der Titelleiste des Browsers angezeigt</span>), wobei explizit das Hauptthema jeder Seite angegeben wird <br> <head> … </ head>– enthält Informationen zu einer bestimmten Webseite, einschließlich Titel-Tags, Metadaten und Links zu Skripten und Stylesheets. <br> <body> … </ body>– umfasst alle Inhalte, die den Benutzern angezeigt werden, einschließlich allem, was sie sehen und lesen.</p> <p>Notiz: Alle Tags beginnen mit „ <body>„und endet wie“</ body>" „/“ – gibt an, wo die Aktion eines bestimmten Tags endet. Es ist wichtig, das schließende Tag hinzuzufügen, da es sonst auf das gesamte Dokument angewendet wird.</p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/css3-cheat-sheet-160331.png' height="300" width="300" loading=lazy loading=lazy></p> <p>Bei CSS handelt es sich um kaskadierende Stylesheets und etwas, das ein Webprogrammierer kennen muss.</p> <p>Sie geben den Stil vor <span>HTML-Strukturen</span>. Grundsätzlich ist HTML ohne CSS langweilig und die Webseite daher langweilig.</p> <p>So passen sie zusammen: In Ihrem HTML-Code verweisen Sie auf ein CSS-Stylesheet.</p> <p>Unten sehen Sie ein Beispiel dafür, wie CSS in Aktion aussieht:</p> <p>Beispiel-CSS</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/css-example-160332.png' width="100%" loading=lazy loading=lazy></p> <p>Javascript</p> <p>Javascript ist eine Programmiersprache, mit der Sie interaktive Elemente auf Webseiten implementieren können. Zum Beispiel interaktive Karten, 2D-/3D-Grafiken und vieles mehr, was selbst ein angehender Webprogrammierer kennt.</p> <ol><li><span>Entdecken Sie WordPress-Tutorials</span></li> </ol><p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/wordpress-logo-1-160344.png' width="100%" loading=lazy loading=lazy></p> <p>Um Webentwickler zu werden, müssen Sie sich mit WordPress vertraut machen. 25 % aller Websites im Internet laufen auf dieser Engine.</p> <ol><li><span>Lernen Sie die Grundlagen von UI und UX</span></li> </ol><p>Benutzeroberfläche ( <span>Benutzeroberfläche</span>) und UX ( <span>Benutzererfahrung</span>) ist die Grundlage für die Entwicklung von Benutzeroberflächen.</p> <p>Die meisten Entwickler sind keine Designexperten – es handelt sich um zwei verschiedene Bereiche. Wenn Sie jedoch die Grundlagen des User Experience Designs erlernen, können Sie besser verstehen, wie eine Website funktionieren sollte.</p> <p>Um mehr über die Grundlagen des Website-Designs zu erfahren, empfehle ich einen Blick auf die Adobe Creative Suite. Photoshop sollte das erste sein, mit dem Sie sich befassen, da es für die ernsthaftesten Designer geeignet ist. Wenn ein junger Webprogrammierer Adobe nicht mag, kann er auch Sketch lernen, einen aufstrebenden Stern.</p> <ol><li><span>Erlernen Sie SQL und PHP (fortgeschrittenere Kenntnisse)</span></li> </ol><p>SQL ist ein Datenbankverwaltungssystem. Und PHP ist eine „Skriptsprache“, die Daten in einer Datenbank ablegt oder abruft.</p> <p>Betrachten Sie zum Beispiel WordPress. Es verwendet MySQL zum Speichern und Verwalten von Informationen ( <span>Blogbeiträge, Seiteninhalte, Kommentare usw.</span>) in Datenbanktabellen.</p> <p>PHP macht jede WordPress-Site dynamisch, indem es mit diesen Elementen interagiert und die Datenbank aktualisiert, während sich die Site weiterentwickelt.</p> <p>Indem Sie mehr über die Funktionsweise von SQL und PHP erfahren, können Sie die Entwicklung von WordPress-Websites gründlich beherrschen. Diese Art von Service ist gefragt.</p> <p>Sie werden nicht alles in ein oder zwei Wochen meistern. Aber mit der Zeit, wenn Sie Erfahrung und Fähigkeiten sammeln, können Sie Ihre Wettbewerbsfähigkeit auf dem Markt als Webprogrammierer deutlich steigern.</p> <ol><li><span>Lernen Sie die Grundlagen von SEO</span></li> </ol><p>SEO ist Suchmaschinenoptimierung. Der Prozess zur Verbesserung des Rankings von Websites in Suchmaschinen wie Google. Dies ist eine der wichtigsten Fähigkeiten im Online-Geschäft.</p> <p>Bei SEO spielen auch Seitenstruktur und Code eine Rolle. Beispielsweise Titel-Tags ( <span>HTML</span>) sind äußerst wichtig. Sie berichten <a href="https://osblog.ru/de/chrome-search-engine-how-to-change-the-default-search-engine-in-google-chrome/">Suchmaschinen</a> was auf der Seite wirklich wichtig ist.</p> <p>Sollten Sie SEO-Experte werden? Definitiv nicht. Man sollte sich aber unbedingt mit den Grundlagen von SEO vertraut machen und diese bei der Entwicklung von Websites berücksichtigen. Auf diese Weise hat die von Ihnen erstellte Website größere Erfolgschancen.</p> <p>Hier sind einige SEO-Tipps für Webentwickler</span>:</p> <ul><li>Meta-Tags optimieren. IN <a href="https://osblog.ru/de/personalizirovannyi-poisk-i-seo-chto-takoe-personalizaciya-poiskovoi-vydachi/">Suchergebnisse</a> Meta-Tags teilen Browsern mit, worum es auf Ihrer Website geht.</li> <li>Stellen Sie sicher, dass Ihre Titel-Tags in einer bestimmten Reihenfolge sind. H1 sollte die Hauptüberschrift sein und muss dann in der Überschriftenhierarchie nach unten verschoben werden ( <span>d. h. H2, H3, H4 usw</span>.). Dies erleichtert Suchmaschinen das Crawlen Ihrer Website.</li> <li>Stellen Sie sicher, dass der Title-Tag die Webseite korrekt beschreibt.</li> </ul><p>Nehmen Sie sich mindestens 3–5 Stunden Zeit für das Lernen <a href="https://osblog.ru/de/basics-seo-where-to-start-visible-factors-present-on-the-page/">SEO-Grundlagen</a>. Dadurch können Sie Websites effizienter entwickeln und wirken sich positiv auf das Gehalt eines Webprogrammierers aus.</p> <ol><li><span>Responsive Websites</span></li> </ol><p>Adaptiv bedeutet, dass sich Site-Elemente an die Bildschirmgröße des Geräts des Benutzers anpassen. Somit sieht die Seite sowohl auf einem Laptop als auch auf einem Smartphone gut aus.</p> <h3>So finden Sie Ihren ersten Webentwicklungskunden (oder werden Freiberufler)</h3> <p>Als Webentwickler haben Sie nun zwei Möglichkeiten. Sie können: 1) versuchen, eine Festanstellung in einem Unternehmen zu bekommen, oder 2) den freiberuflichen Weg gehen und online nach Aufträgen suchen.</p> <ul><li>Freiheit: Es gibt keinen Beginn oder Ende des Arbeitstages mehr. Sie können immer noch die gleichen Stunden (oder mehr) arbeiten, aber Ihr Zeitplan, Ihr Standort und Ihre Lebensbedingungen liegen ganz bei Ihnen;</li> <li>Geld: Sobald Sie ein guter Freiberufler werden, haben Sie bessere Chancen, mehr Geld zu verdienen ( <span>und warten Sie nicht auf eine monatliche Steigerung um drei Prozent</span>);</li> <li>Prestige: Im Laufe der Zeit haben Sie die Möglichkeit, Ihr persönliches Geschäft und Ihre Marke so weit auszubauen, dass letztendlich ein stetiger Zustrom neuer Kunden gewährleistet ist.</li> </ul><p>In diesem Abschnitt konzentrieren wir uns darauf, wie ein angehender Webprogrammierer seinen ersten freiberuflichen Job bekommen kann ...</p> <ol><li><span>Nutzen Sie Jobbörsen</span></li> </ol><p>Die meisten Freiberufler fanden ihre ersten Webentwicklungsprojekte auf Marktplätzen. Diese können zum Erfahrungssammeln nützlich sein, sollten aber nicht als langfristige Strategie dienen.</p> <p>Die Qualität der dortigen Kunden kann unterschiedlich sein. Manche können wunderbar sein. Andere nicht.</p> <p>Oft stößt man auf solchen Börsen auf Kunden, die keine Erfahrung in Personalangelegenheiten haben. Dies kann zu vielen Problemen führen, wenn Sie versuchen, mit ihnen zu arbeiten.</p> <p>Eine starke Abhängigkeit von Börsen lässt Ihnen nicht die Möglichkeit, mit der Schaffung Ihrer eigenen Marke zu beginnen. Wenn Sie Ihrer Arbeit mehr Aufmerksamkeit schenken, werden Sie letztendlich bessere Ergebnisse erzielen ( <span>und das lösungsmittelreichste</span>) Kunden.</p> <p>Aber es ist ein guter Anfang.</p> <p>Denken Sie daran, dass jeder Auftrag, den Sie auf diese Weise erhalten, Ihnen dabei hilft, die notwendigen praktischen Erfahrungen für die zukünftige Arbeit zu sammeln.</p> <p>Der Einstieg in Jobbörsen ist auch ziemlich einfach ... Unten ist ein Screenshot einer Suche auf UpWork:</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/job-boards-1024x536-160322.png' width="100%" loading=lazy loading=lazy></p> <ol><li><span>Erstellen Sie eine Portfolio-Website</span></li> </ol><p>Um Kunden schneller zu finden, erstellen Sie einen Webprogrammierer-Lebenslauf und eine Portfolio-Website. Hier können Sie Ihre neuesten Projekte präsentieren und Kundenrezensionen abgeben <a href="https://osblog.ru/de/kak-v-vk-opredelit-gruppu-potencialnyh-klientov-kak-naiti/">potentielle Kunden</a> bequemer Kommunikationskanal.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://osblog.ru/web-programmirovanie-s-nulya-html-prakticheskoe-rukovodstvo-dlya/" content="https://osblog.ru/web-programmirovanie-s-nulya-html-prakticheskoe-rukovodstvo-dlya/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Web программирование с нуля html. Практическое руководство для обучения веб-программированию"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i1.wp.com/itman.in/wp-content/uploads/2016/09/rabota-programmista-768x360.jpg"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">IN VERBINDUNG STEHENDE ARTIKEL</span></h4> <div class="ads-border"> <div class="ads-content"> <div id="povusy1" style="height:90px;width:690px;" align="center"></div> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Nützlich</span></div> <div class="textwidget" align="center"><div id="povusy2" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Werbung</span></div> <div class="textwidget" align="center"><div id="povusy3" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Neu</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/vs-o-whatsapp-ot-zagruzki-do-polnocennogo-ispolzovaniya-chto/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/composs.ru/wp-content/uploads/2017/06/chto_takoe_vatsap2.jpg" alt="Alles rund um WhatsApp: vom Download bis zur vollständigen Nutzung" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/vs-o-whatsapp-ot-zagruzki-do-polnocennogo-ispolzovaniya-chto/" title="Alles rund um WhatsApp: vom Download bis zur vollständigen Nutzung" rel="bookmark">Alles rund um WhatsApp: vom Download bis zur vollständigen Nutzung</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/vhod-v-lichnyi-kabinet-vsp-group-vsp-group-wsp-partnerka-chestnyi-obzor-otzyvy-i/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/lifeha.ru/wp-content/uploads/2016/05/VSP-Group.jpg" alt="Partnerprogramm der VSP Group (WSP)." loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/vhod-v-lichnyi-kabinet-vsp-group-vsp-group-wsp-partnerka-chestnyi-obzor-otzyvy-i/" title="Partnerprogramm der VSP Group (WSP)." rel="bookmark">Partnerprogramm der VSP Group (WSP).</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/kody-na-dzhast-keis-dengi-pomoshch-kody-kuponov-i-promokody-justcase/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://osblog.ru/wp-content/uploads/2024/just-mac.png" alt="Codes für nur Fallgeld" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/kody-na-dzhast-keis-dengi-pomoshch-kody-kuponov-i-promokody-justcase/" title="Codes für nur Fallgeld" rel="bookmark">Codes für nur Fallgeld</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/kak-vybrat-nuzhnyi-byuti-keis-chto-takoe-byuti-keis-vot-neskolko/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/1ori.ru/images/b1.jpg" alt="Was ist ein Beauty Case? Hier einige Tipps" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/kak-vybrat-nuzhnyi-byuti-keis-chto-takoe-byuti-keis-vot-neskolko/" title="Was ist ein Beauty Case? Hier einige Tipps" rel="bookmark">Was ist ein Beauty Case? Hier einige Tipps</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/zagruzit-faily-bez-registracii-besplatnyi-failoobmennik-bez/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/compgramotnost.ru/wp-content/uploads/2012/02/fileobmennik-mail-ru.jpg" alt="Kostenloser File-Sharing-Dienst ohne Registrierung – DropMeFiles" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/zagruzit-faily-bez-registracii-besplatnyi-failoobmennik-bez/" title="Kostenloser File-Sharing-Dienst ohne Registrierung – DropMeFiles" rel="bookmark">Kostenloser File-Sharing-Dienst ohne Registrierung – DropMeFiles</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/kak-ispravit-oshibki-s-tunnelem-v-hamachi-zheltyi-treugolnik/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/lifehacki.ru/wp-content/uploads/2016/11/Hamachi-net-1.jpg" alt="Computerhilfe Hamachi-Tunnelproblem, was zu tun ist" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/kak-ispravit-oshibki-s-tunnelem-v-hamachi-zheltyi-treugolnik/" title="Computerhilfe Hamachi-Tunnelproblem, was zu tun ist" rel="bookmark">Computerhilfe Hamachi-Tunnelproblem, was zu tun ist</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/kitaiskii-smartfon-krasnyi-ris-obzor-xiaomi-red-rice-hongmi---oficialnyi/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/img.mysku-st.ru/uploads/images/01/56/54/2014/01/09/1e9a2f.jpg" alt="Rezension von Xiaomi Red Rice (Hongmi) – offizielles MIUI-Smartphone basierend auf MTK" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/kitaiskii-smartfon-krasnyi-ris-obzor-xiaomi-red-rice-hongmi---oficialnyi/" title="Rezension von Xiaomi Red Rice (Hongmi) – offizielles MIUI-Smartphone basierend auf MTK" rel="bookmark">Rezension von Xiaomi Red Rice (Hongmi) – offizielles MIUI-Smartphone basierend auf MTK</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/pochemu-televizor-ne-vidit-hdmi-kak-vyvesti-izobrazhenie-s-kompyutera/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/help-wifi.com/wp-content/uploads/2016/04/DSC_0651.jpg" alt="So zeigen Sie ein Bild von einem Computer auf einem Fernseher an: Was Sie wissen und tun müssen Warum ich HDMI anschließe, wird auf dem Fernseher kein Bild angezeigt" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/pochemu-televizor-ne-vidit-hdmi-kak-vyvesti-izobrazhenie-s-kompyutera/" title="So zeigen Sie ein Bild von einem Computer auf einem Fernseher an: Was Sie wissen und tun müssen Warum ich HDMI anschließe, wird auf dem Fernseher kein Bild angezeigt" rel="bookmark">So zeigen Sie ein Bild von einem Computer auf einem Fernseher an: Was Sie wissen und tun müssen Warum ich HDMI anschließe, wird auf dem Fernseher kein Bild angezeigt</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://osblog.ru/de/proverka-sostoyaniya-akkumulyatora-noutbuka-iznos-batarei-noutbuka/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/support.hp.com/doc-images/290/c05861677.jpg" alt="Überprüfen des Akkustatus des Laptops" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://osblog.ru/de/proverka-sostoyaniya-akkumulyatora-noutbuka-iznos-batarei-noutbuka/" title="Überprüfen des Akkustatus des Laptops" rel="bookmark">Überprüfen des Akkustatus des Laptops</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="https://osblog.ru/de/"><img class="td-retina-data" src="/img/logo.png" data-retina="/img/logo.png" alt="Computerportal Osblog" title="Computerportal Osblog" / loading=lazy loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p>© Computerportal osblog, 2024</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://osblog.ru/de/feedback/">Rückkopplung</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://osblog.ru/de/sitemap.xml">Seitenverzeichnis</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">Über die Website</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> <script type="text/javascript">  </script><br> <br> </body> </html>