Einheit 02 CSS und Bootstrap Hausaufgaben: Responsive Portfolio
Responsive Design stellt sicher, dass Webanwendungen auf einer Vielzahl von Geräten und Fenstern oder Bildschirmgrößen gut abschneiden. Als Entwickler werden Sie wahrscheinlich aufgefordert, eine mobile Anwendung zu erstellen oder einer vorhandenen Anwendung reaktionsschnell Design hinzuzufügen.
Richtungen
- Verwenden Sie das Bootstrap CSS -Framework, um ein mobiles reaktionsschnelles Portfolio zu erstellen. Wie liefern Sie das?
- Erstellen Sie die folgenden Dateiendateien:
- Entwickeln Sie mit Bootstrap Ihre Portfolio -Site mit den folgenden Elementen a. Eine Navigationsleiste b. Ein reaktionsschnelles Layout c. Responsive Bilder Das Bootstrap -Portfolio sollte die Verwendung von Medienabfragen minimieren.
Hinweise
- Verwenden Sie das Gittersystem von Bootstrap (Container, Zeilen und Spalten).
- Auf einem
xs -Bildschirm sollte der Inhalt den gesamten Bildschirm aufnehmen. Auf sm und größeren Bildschirmen sollten Sie einige Ränder auf der linken und rechten Seite des Bildschirms haben. Schauen Sie sich verschiedene Websites auf Ihrem mobilen Gerät im Vergleich zu Ihrem Computer an, um Beispiele für diese Unterschiede anzuzeigen.
- Verwenden Sie einen HTML -Validierungsdienst, um sicherzustellen, dass jede Seite gültig HTML hat. Extra klein <576px klein ≥576px medium ≥ 768px groß ≥992px extra groß ≥1200px .Container 100% 540px 720px 960px 1140px .Container-SM 100% 540px 720px 960px 1140px. 1140px. Container-Lg 100% 100% 100% 960px 1140px .Container-XL 100% 100% 100% 100% 1140px .Container-Fluid 100% 100% 100% 100% 100%
Mindestanforderungen
o Funktionale, bereitgestellte Anwendung o Github -Repository mit ReadMe, das das Projekt beschreibt. o Navalleiste muss auf jeder Seite konsistent sein. o NAVABAR auf jeder Seite muss Links zu Home/About-, Kontakt- und Portfolio -Seiten enthalten. o Alle Links müssen funktionieren. o Muss semantische HTML verwenden. o Jede Seite muss gültig und korrigiert HTML haben. (Verwenden Sie einen Validierungsdienst) o muss Ihre personalisierten Informationen enthalten. (Biografie, Name, Bilder, Links zu sozialen Medien usw.) o müssen Bootstrap -Komponenten und Gittersysteme ordnungsgemäß verwenden.
Bonus
- Machen Sie mit Bootstrap eine klebrige Fußzeile und verwenden Sie Unterreihen und Unterspalten auf Ihrer Portfolio-Site ( Hinweis: Schauen Sie sich die Bootstrap-Dokumentation an).
Früh und oft verpflichten
- Eine der wichtigsten Fähigkeiten, die als Webentwickler meistern, ist die Versionskontrolle. Aus zwei Gründen ist es wichtig, die Gewohnheit zu bauen, über Git zu verpflichten: Ihre Commit -Geschichte
- ist ein Signal für Arbeitgeber, dass Sie aktiv an Projekten arbeiten und neue Fähigkeiten lernen.
- Ermöglicht Ihnen, Ihre Codebasis für den Fall zurückzuversetzen, dass Sie in einen früheren Zustand zurückkehren müssen.
Befolgen Sie diese Richtlinien für die Begehung:
- Machen Sie Einzelpark-Commits für verwandte Änderungen, um eine saubere, überschaubare Geschichte zu gewährleisten. Wenn Sie zwei Probleme beheben, machen Sie zwei Commits.
- Schreiben Sie beschreibende, aussagekräftige Festungsnachrichten, damit Sie und jeder andere, der sich Ihr Repository ansieht, die Geschichte leicht verstehen kann.
- Verpflichten Sie keine halbe Arbeit, um Ihre Mitarbeiter (und Ihr zukünftiges Selbst!) Zu willen.
- Testen Sie Ihre Bewerbung, bevor Sie sich verpflichten, um die Funktionalität bei jedem Schritt im Entwicklungsprozess sicherzustellen.
Wir möchten, dass Sie bis zum Abschluss weit über 200 Commits haben. Verpflichten Sie sich also früh und oft!
Einreichung auf BCS
Sie müssen Folgendes einreichen:
- Die URLs der bereitgestellten Anwendungen bedeutet dies nur die URL für jede HTML -Datei?
- Die URLs der Github -Repositories
- Screenshots werden als Referenz im Ordner
Assets/Images bereitgestellt. Ihre App muss nicht genau wie den Bildern sein. Verwenden Sie Bootstrap, um ein ähnliches, reaktionsschnelles Layout zu erstellen.
C: Benutzer Jonpc Google Drive Bootcamp UNC-CHH-FSF-PT-03-2020-EUC MathCodes.github.io HOMEWORK HOMEWORK2 README.MD
