• Zuhause
  • Artikel
  • Web 101 Die wichtigsten Fragen, die Sie als Entwickler wissen sollten!
Veröffentlicht am 25-03-2019

Interviewfragen (BlogPost_03) Web 101 Die wichtigsten Fragen, die Sie wissen sollten, wenn Sie Entwickler werden!

Können Sie den Unterschied zwischen der Codierung einer Website als Reaktion auf eine Mobile-First-Strategie erklären?

Was ist responsives Design? Der Begriff Responsive Webdesign, erstmals von @Ethan Marcote im Jahr 2010 geprägt, beschreibt eine Technik, bei der das Design einer Website automatisch an die Bildschirmgröße der Benutzer angepasst wird. Dank des responsiven Designs können Benutzer problemlos eine Website durchsuchen, unabhängig davon, welches Gerät sie verwenden. Das Layout und der Inhalt der Website ändern sich je nach Breite eines Browsers auf einem Gerät. Schneller Tipp: Sie können feststellen, ob eine Website reagiert oder nicht, indem Sie manuell in das Browserfenster hinein- und herauszoomen.

Responsive Design bedeutet, dass Sie nur eine Website benötigen. Das Design, der Inhalt und die Benutzeroberfläche Ihrer Website sind so angepasst, dass Besucher sie auf jedem Gerät und jedem Browser nahtlos aufrufen können. Sie müssen nicht mehr zwei Versionen einer Website erstellen - eine für Desktop-Computer und eine für mobile Geräte. Sie können immer feststellen, ob eine Website für mobile Geräte entwickelt wurde, deren URL mit einem „m“ beginnt, wie z. B. m.facebook.com.

Was ist eine Mobile First-Strategie?

Mobile First-Strategie ist der Trend bei der Website-Entwicklung, bei dem die Gestaltung einer Website für Smartphones, Tablets und mobile Geräte Vorrang vor Desktops hat. Bei einer Mobile-First-Strategie wird ein Webdesigner eine Website unter Berücksichtigung der Einschränkungen einer mobilen Plattform (kleiner Bildschirm, langsamere Prozessoren) erstellen und anschließend die Website für die Desktopnutzung kopieren oder verbessern.

Mobile First-Strategie aufbrechen

In einer Mobile First-Strategie ist der Web-Auftritt eines Unternehmens für mobile Geräte und Desktop-Sekunden ausgelegt. Die Gestaltung der Desktop-Website ist so einfach wie möglich. Es kann dann mit zusätzlichen Funktionen aktualisiert werden, auf die nur Desktopbenutzer zugreifen können. Dies steht im Gegensatz zu einer Desktop-First-Strategie, bei der eine Website zur Zufriedenheit des Unternehmens erstellt wird und dann die nicht kompatiblen Elemente entfernt werden, um eine mobile Website zu erstellen.

Die Mobile First-Strategie nutzt auch die Technologie, die für mobile Benutzer spezifisch ist (GPS, Datenerfassung, integrierte Kameras), um Funktionen zu erstellen, die Desktopbenutzern nicht zur Verfügung stehen. Diese Interkonnektivität und Bequemlichkeit tragen dazu bei, Smartphones unverzichtbar zu machen, und können dazu beitragen, die Nutzer stärker zu motivieren. Eine Mobile-First-Strategie erleichtert auch die Verbindung zu Kunden, da Smartphones immer in der Nähe sind und für viele das erste, was die Menschen am Morgen ergreifen. Mit den Daten und Informationen, die Smartphones von Unternehmen sammeln können, können Kundenerlebnisse personalisiert werden. Dies kann zu einer besseren Benutzererfahrung und höheren Umsätzen führen.

Mobile First-Strategie-Vorteile

Die Stärke einer Mobile First-Strategie besteht darin, dass Unternehmen auf neue, effizientere und sinnvollere Weise mit Verbrauchern interagieren und Dialoge mit ihnen haben können. Die Allgegenwart mobiler Geräte ermöglicht eine zielgerichtete Kommunikation, mit der Verbraucher fundiertere Kaufentscheidungen schneller treffen können. Die Unternehmen müssen nicht mehr durch umfangreiche Marketingkampagnen ein breites Netz ziehen, um ihre Produkte zu vermarkten, und hoffen, dass potenzielle Käufer ihnen folgen.

2. Haben Sie mit den neuen CSS-Flexbox- oder Raster-Spezifikationen herumgespielt? Was kannst du dazu sagen? Ich habe mit beiden gespielt und beide haben ihre Vorteile. Flexbox wurde für eindimensionale Layouts und Grid für zweidimensionale Layouts entwickelt. Wenn Sie also Elemente in eine Richtung legen (z. B. drei Schaltflächen in einer Kopfzeile), sollten Sie Flexbox verwenden. Dadurch erhalten Sie mehr Flexibilität als das CSS-Grid. Es ist auch einfacher zu warten und erfordert weniger Code. Wenn Sie jedoch ein gesamtes Layout in zwei Dimensionen mit Zeilen und Spalten erstellen, sollten Sie CSS-Grid verwenden.

3.Können Sie ein Beispiel für eine andere @media-Eigenschaft als screen angeben?

Es gibt vier Typen von @media-Eigenschaften.

Alles - für alle Medientyp-GeräteDruck - Für Druckersprache - Für Bildschirmleser, die die Seite aus dem Bildschirm lesen - für Computerbildschirme, Tablets, Smartphones usw.

Hier ist ein Beispiel für eine andere @media-Eigenschaft als screen:

@media print {

Karosserie {

Farbe Rot;

}

}

4. Beschreiben Sie eine Sache, die Sie heute im Unterricht gelernt haben.

Ich habe gelernt, wie man CSS-Grid und Flexbox anwendet, um eine bessere Ergebnisse für eine Website zu erzielen.

5.Was ist der Unterschied zwischen einem relativen, festen, absoluten und statisch positionierten Element? Position statisch: Die Standardpositionierung für alle Elemente ist position: static. Dies bedeutet, dass das Element nicht an einer Stelle positioniert ist, an der es normalerweise im Dokument vorkommt. Normalerweise würden Sie dies nicht angeben, es sei denn, Sie mussten eine zuvor festgelegte Positionierung überschreiben . Position relativ: Wenn Sie Position: relativ angeben, können Sie oben oder unten und links oder rechts verwenden, um das Element relativ zu dem Ort zu verschieben, an dem es normalerweise im Dokument vorkommt. Wenn Sie Position: absolut angeben, wird das Element aus dem Dokument entfernt und genau dort platziert, wo Sie es angeben möchten. Ein Element mit Position: Fest; wird relativ zum Ansichtsfenster positioniert, dh es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird. Die oberen, rechten, unteren und linken Eigenschaften werden zum Positionieren des Elements verwendet.

6.Beschreiben Sie Pseudoelemente und besprechen Sie, wofür sie verwendet werden. Ein CSS-Pseudoelement ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, mit dem Sie einen bestimmten Teil des ausgewählten Elements (der ausgewählten Elemente) formatieren können. Zum Beispiel kann :: first-line verwendet werden, um die Schriftart der ersten Zeile eines Absatzes zu ändern. Hinweis: Im Gegensatz zu Pseudoelementen können Pseudo-Klassen verwendet werden, um ein Element basierend auf seinem Zustand zu formatieren.

7.Was sind einige der "gotchas" für effizientes CSS?

Ich fand es interessant, dass #Right nach Left ausgerichtet ist

Um zu verstehen, wie Browser Ihre CSS-Selektoren lesen, ist es wichtig, dass diese von rechts nach links gelesen werden. Das bedeutet, dass im Selektor ul> li a [title = "home"] das erste was interpretiert wird, ein [title = "home"] ist. Dieser erste Teil wird auch als "Schlüsselauswahl" bezeichnet, da letztendlich das Element ausgewählt wird.

Siehe auch

Sind IT-Zertifizierungen ausreichend? Oder brauchst du einen Abschluss?Der neugierige Fall von Phantom-UhrenSie sagtenVerbessern Sie die Wiederverwendbarkeit von Code mit dem Render Prop-Muster von ReactFollowups: Apple News und Cent für US-DollarDas Kapor Center geht zu SXSW