fylo dark theme landing page herunterladen – fylo dark theme landing page Quellcode herunterladen

fylo dark theme landing page

Komponenten von Drittanbietern

1.0.0

Herunterladen

fylo dark theme landing page – Frontend-Mentor

Hallo! Vielen Dank, dass Sie sich dieses Projekt angesehen haben!

Dies ist eine Lösung für eine Frontend-Mentor-Herausforderung , die darin besteht, eine Landingpage zu erstellen, die dem vorgegebenen Design so nahe wie möglich kommt. Das Ziel besteht darin, meine Weblayout-Fähigkeiten durch die Erstellung eines realistischen Projekts zu verbessern.

1. Inhaltsverzeichnis ✒️

fylo dark theme landing page – Frontend-Mentor
- 1. Inhaltsverzeichnis ✒️
- 2. Übersicht
  - Die Herausforderung
  - So führen Sie das Projekt aus:
  - Links
- 3. Mein Prozess?
  - Gebaut mit
  - Was ich gelernt habe
  - Nützliche Ressourcen
- 4. Autor ??

2. Übersicht

Die Herausforderung

Benutzer sollten in der Lage sein:

Sehen Sie sich das optimale Layout für die Website an, abhängig von der Bildschirmgröße Ihres Geräts
Sehen Sie sich den Hover-Status für alle interaktiven Elemente auf der Seite an

Designvorschau für die <span class= Fylo Dark Theme Landing Page Challenge“ style="max-width: 100%;">

Sie können die Herausforderungsdetails auf der Frontend-Mentor-Seite nachlesen.

So führen Sie das Projekt aus:

Ich habe mich für die Verwendung des Adalab Starter Kit entschieden, um an diesem Projekt zu arbeiten, das mit Node und Gulp erstellt wurde. Um es ausführen zu können, muss also zunächst Node JS installiert sein.

Öffnen Sie das Terminal im Stammordner des Repos.
Installieren Sie die lokalen Abhängigkeiten mit dem folgenden Befehl im Terminal:

npm install

Starten Sie die Ausführung des Projekts mit dem folgenden Befehl, der ein Browserfenster öffnet, das eine Live-Version der Seite anzeigt.

npm start

Links

Live-Site-URL: https://leireomadina.github.io/fylo-dark-theme-landing-page/
Lösungs-URL: Demnächst verfügbar

3. Mein Prozess?

Gebaut mit

Semantisches HTML5- Markup
HTML- Vorlagensystem
Benutzerdefinierte CSS3- Eigenschaften
Flexbox
CSS-Raster
SASS mit BEM -Methodik
Schluck
Responsives Design mit Mobile-First- Workflow

Was ich gelernt habe

Verwenden Sie @for , um Schleifen in SCSS zu erstellen: In diesem Fall wollte ich nur die zweite und dritte Karte des Testimonial-Abschnitts auswählen.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

Verwenden und verwalten Sie SVG-Dateien : Verwenden Sie das viewBox-Attribut, um Position und Dimension zu ändern, fügen Sie Titel und Desc-Tag hinzu, um die Barrierefreiheit zu verbessern, Inline- und CSS-Stil, passen Sie Farben mithilfe von Füllung oder Strich an ...
Verwenden Sie ARIA-Rollen , um die Barrierefreiheit im Internet zu verbessern: Schauen Sie sich zum Beispiel diese Rollen im Navigationsmenü an.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

Nützliche Ressourcen

So erstellen Sie mit @for einen Sass-Loop: https://www.youtube.com/watch?v=6CbsNFXMYgs. Sie können sich auch die offizielle SASS-Dokumentation ansehen.
Liste der ARIA-Rollen, -Zustände und -Eigenschaften (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Inline-SVG-Styling: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
Weitere Ressourcen folgen in Kürze.