Lernen Sie Responsive Webentwicklung

1. Einführung: Willkommen heute zurück. Wir werden diese responsive Design-Grid-Komponente erstellen. Falls du neu hier bist, hallo, ich heiße Zoe. Ich bin ein Softwareingenieur und ehemaliger Universitätsprofessor, der es liebt, Leuten beizubringen 2. Kursprojekt: Okay, also ja, wie Sie sehen können, ist es eine ziemlich einfache Komponente , die wir hier bauen werden, aber wir werden sie responsiv machen Es gibt also die Desktop-Version und die mobile Version, und wir werden CSS-Qualität verwenden, wenn wir Wenn wir uns also unsere Komponente hier ansehen, müssen wir eigentlich kein Grid verwenden. Wir könnten auch Flex verwenden. Also lass uns sehen, wie es läuft. Es könnte für uns tatsächlich einfacher sein, Flexbox zu verwenden. Aber wir sehen, dass wir unseren individuellen ersten Abschnitt hier oben haben , und dann haben wir unsere beiden kleineren Abschnitte unten Und dann das Design für Mobilgeräte, es ist einfach in einer Spalte zusammengefasst. Also ziemlich einfach, ziemlich einfach, aber nur ein bisschen anders , weil sich der untere Bereich in Bezug auf die Platzierung verschiebt. Also lasst uns weitermachen und das aufbauen. 3. Lernprogramm: Also habe ich die Starter-App bereits entwickelt . Auch das ist nichts, was ich vor Monaten gemacht habe , was die Einrichtung angeht. Sie können einfach weitermachen und dieses Starterkit verwenden. Es ist das Material, das ich als nächste Typoskript-Kombination bereits eingerichtet Und du kannst es einfach klonen und es als Starter verwenden Sie können das verwenden und müssen nicht unbedingt das Typescript-Element verwenden Sie können JavaScript verwenden, wenn Sie es vorziehen. also ganz bei Ihnen, ob Sie dies verwenden möchten, aber es ist in der folgenden Beschreibung verlinkt. Und wenn du mitmachen willst, wie immer, werde ich das Design verlinken. Dies ist eines der kostenlosen Designs von Front End Mentor. Ich werde das auch in der Beschreibung unten verlinken. Wir haben hier also unsere grundlegende App eingerichtet. Ich werde einfach weitermachen und alle vorhandenen Reset-Styles dort löschen und diese dort löschen Und dann werde ich tatsächlich weitermachen und die Hintergrundfarbe für dieses Design hier einfügen die Hintergrundfarbe für , wenn ich sie mir schnappen kann Desktop. Mal sehen, mit welcher Farbe wir es hier zu tun haben. Ich glaube, es ist diese hellblaue Farbe. Also ich sage für den Hauptteil und den HTML-Code, die Hintergrundfarbe wird so sein und, ja, das sieht ungefähr richtig aus. Also haben wir unsere Hintergrundfarbe festgelegt. Lassen Sie uns weitermachen und diese Seite ausbauen. Auf der Seite werden wir also drei Karten haben, eine Karte mit etwa drei Abschnitten, sollte ich sagen. Also ich denke, wie sollten wir das für diesen größeren Abschnitt machen? Lass uns drei kleine Boxen machen. Also werde ich einen Komponentenordner Components erstellen. Und wir werden sagen, die neue Datei wird, ähm, Kartenheader sein. Ich werde es nennen. Neue Datei. Kartenkopf. Hoppla. Kopfzeile TSX Und auch hier können Sie JSX verwenden, wenn Sie es vorziehen. Und dann werde ich eine neue Datei namens Card Container Dot TSX erstellen Card Container Dot TSX Und das wird einfach all unsere Karten enthalten. Also verwenden wir Box , um mit XX Prop als Material-UI stylen zu können, und dann importiere ich den Kartencontainer auf unsere Homepage Also Kartencontainer. Speichern Sie das dort. Fantastisch. Und dann nimmt der Kartencontainer jetzt unseren Kartenkopf auf und dann nimmt er auch die anderen beiden kleineren Kartenkomponenten auf. Kopfzeile. Fantastisch. Geil. So weit, so gut. Also lass uns jetzt am Kartenkopf arbeiten. Also nochmal, ich werde daraus eine Kiste machen. Ähm, spar dir das. Und cool. Wir sehen es auf der Seite. Ähm, lassen Sie uns den Kartenbehälter auf der Seite zentrieren. Also ja, beim Kartencontainer werde ich die Anzeige der Seite auf Flex einstellen. Und wir sagen Flex, sagen wir „Inhalt rechtfertigen“, „Entschuldigung“, Mittelpunkt“ und „Einzelartikel zentrieren“. Speichern Sie sich das. Und ich glaube, ich muss eine Höhe festlegen. Ähm, die Höhe dafür ist 98 Ansichten hoch. Ich denke, ich sollte das wahrscheinlich in CSS machen, aber wir werden diese Brücke etwas später überqueren. Ordnung. Also das nächste, was wir hier machen wollen, ist ja, bauen diese kleinen Teile hier aus Also, im Kartenkopf sieht es so aus, als ob wir unserer Community beigetreten sind. Also brauchen wir eine Art Typografie. Wir benötigen wahrscheinlich drei verschiedene Typografieelemente, also lassen Sie uns diese hinzufügen. Wir sagen Typografie Ähm. Cool. Und das wird unser erster sein. Treten Sie unserer Community bei. Fantastisch. Zweitens: Problemlose Geld-zurück-Garantie Und dann die Beschreibung dessen, was sie uns eigentlich verkaufen wollen Ähm, cool. Also das ist ziemlich einfach. Lassen Sie uns jetzt ein bisschen schweigen. Es sieht so aus, als ob es um die Elemente etwa 40 Pixel M oder Padding, ich sollte sagen, Padding, ähm, gibt Wir sagen 40 Pixel, 2,5 RAM. Ähm, und was brauchen wir hier noch? Ich denke, das könnte sein, dass wir unsere Schriftgröße und solche Dinge ändern sollten . Das werden also 24 Pixel sein. Schriftgröße. Es wird 1,5 Felgen sein. Ähm, der hier wird 18 sein. Und dann wird dieser hier regulär sein, also lassen wir das sein. Und dann legen wir unsere Farbe fest. Also dieser hier wird diese Farbe haben. Liebevoll. Oder einfach Farbe. Ähm, gut. Äh, das wird so etwas wie Neongrün sein. Lass uns das dort machen. Und dann wird das so etwas wie ein bläuliches Ding sein . Wir werden sagen Aber. Cool. Das speichern wir dort. Fantastisch. So weit, so gut, wir haben unsere kleine Kiste da. Die andere Sache, die wir tun müssen, ist die Hintergrundfarbe einzustellen. Also stellen wir die Hintergrundfarbe der Box auf Weiß ein. Speichern Sie das. Und das sieht ziemlich gut aus. So weit, so gut. Die andere Sache, die ich tun möchte, ist die maximale Breite für diese Box hier festzulegen . Es sieht also so aus, als ob die Breite 635 ist. Das wird für diesen Kartencontainer sein. Ich werde sagen, die maximale Breite wird 635 sein. Ups, Pixel. Und die maximale Höhe. Weil es einfach eine Komponente sein soll. Es ist nicht wie eine ganze Seite. Es werden 475 sein. Das werden wir dort hinstellen. Fantastisch. Geil. So weit, so gut. Oh, noch etwas. Eigentlich wollen wir am Ende noch den Eckenradius einstellen. Es sieht aus, als wären es ungefähr acht Pixel. Wir sagen also, der Grenzradius wird 0,5 RAM betragen. Und das würde einfach alle Kanten krümmen. Oh nein, war es nicht. Okay, also wir müssen es tatsächlich auf die Karte setzen. Okay, also stellen wir es ein. Wir machen weiter und setzen stattdessen die Kartenstücke auf die Karte Also werden wir den Grenzradius festlegen. Und es sollte genauso sein wie bei oben rechts, unten links. Also wird es oben sein, ähm, was ist es oben oben links? Sagen wir, 0,5 Ram, 0,5 Ram und Null und dann können wir es modifizieren, falls das nicht stimmt. Nein. Okay, ja, das ist richtig. Also sieh dir an, wie es sich einfach nach links und rechts oben krümmt. Also das ist nur, um uns die kleine Lünette zu besorgen. Also lassen wir das so wie es ist. Und ich denke, vielleicht können wir etwas Schriftstärke hinzufügen, nur ein bisschen mehr Gewicht zu dieser hier, nicht viel, vielleicht 600 Schriftstärke. Und ja, vielleicht auch für diesen. Wir werden das Gleiche tun. Speichern wir uns das. Ja, das sieht ziemlich gut aus. Ja, mach ein bisschen Abstand, vielleicht 24 Pixel. Okay, sagen wir, ähm, Margin. Marge. Die Spitze ist 1,5. Hoppla. 1,5 Rm. Ähm, richtig. Und wie hoch waren es dann 0,75 m und dann Null. Ja, und das gibt uns nur ein bisschen Spielraum Und ich denke, das ist vorerst ziemlich gut. Lass uns damit weitermachen und die nächsten beiden kleinen Boxen hier bauen . Also zuerst die Kiste da. Der nächste wird unser CTA sein, ich nenne ihn unseren CTA-Aufruf zum Handeln Was auch immer wir am Ende haben, wenn wir das Produkt ändern, wir können diese Komponente immer einfach wiederverwenden. Also sagen wir Box. Ähm, Schachtel. Cool. So weit, so gut. Und dann importieren wir es in eine Karte, unseren Kartencontainer. Nun, hier wird es interessant. Also hier dachte ich, wir könnten Griter gebrauchen. Wir können Flex benutzen Ich denke, wir verwenden hier eine Box, und dann haben wir in dieser Box unsere nächsten beiden, unsere nächsten beiden Komponenten. Also werden wir den CTA haben und wir werden jede andere YS-Komponente haben , weißt du Und dann werden wir je nach Ausrichtung ihre Position ändern Dazu verwenden wir die Medienabfrage. Lassen Sie uns das versuchen, um zu sehen, ob es funktioniert. Also mit unserem CTA sehen wir jetzt, dass wir es genau da haben. Lass uns weitermachen und dasselbe tun. Also werden wir einige ähnliche Stylings hinzufügen. Und ehrlich gesagt, wir könnten einfach ein Auto verwenden, eine Komponentenkraft und all das Zeug, aber es ist nicht so, dass wir eine Karte erstellen könnten, die automatisch einen Abstand von 2,5 hat und dann eine Hintergrundfarbe als Eigenschaft und Randradius als Eigenschaft annimmt Ich denke, wir bauen etwas Größeres, das wäre auf jeden Fall nützlich, vor allem, weil wir unsere Designsprache beibehalten Aber ich denke, weil es nur eine einzelne Komponente ist, können wir im Moment einfach ein paar der Stile kopieren Also werden wir dort etwas Polsterung hinzufügen. Wir werden die Hintergrundfarbe auf einstellen. Mal sehen, was es ist. Äh, rechteckig. Dieses Rechteck. Mm mm. Okay, lass uns sehen. Ich glaube, es ist diese Farbe. Wenn nicht, können wir es ändern . Also fangen wir mit dieser Farbe an. Cool. Und dann brauchen wir im Grunde dasselbe, drei verschiedene CTAs oder drei verschiedene , Entschuldigung, Typografie-Elemente Also fangen wir mit der Typografie an. Und das erste wird ein monatliches Abonnement sein. Spar dir das Cool. Auch hier, wenn sie sich in Bezug auf den tatsächlichen Stil ähnlicher wären , wäre es absolut sinnvoll , sie einfach in eine wiederverwendbare Komponente aufzuteilen. Dann haben wir das, und ich werde hier eine Spanne pro Monat angeben, einfach weil es ein bisschen anders ist , was den Stil angeht, aber wir wollen, dass es in derselben Zeile steht. Und dann ist es eher eine Designentscheidung als eine informationelle Trennung Und dann haben wir das und dann haben wir einen Knopf unter all dem Ups. Das spare ich mir Ordnung, cool. Also ja, im Grunde dieser Abschnitt des CTA Als Nächstes wollen wir die maximale Breite festlegen Also, ähm, was ist es? Die Körpergröße wird 259 sein. Die maximale Breite wird 318 sein, also sagen wir, die maximale Breite wird 318 Pixel betragen. Auf diese Weise nimmt es nicht zu viel Platz ein. Ähm, cool. Ich denke, das ist richtig. Ich glaube, wenn wir den anderen hinzufügen, er quasi den anderen Platz ein. Also lass uns jetzt weitermachen und wir wollen die Farbe festlegen. Also sagen wir, Farben dafür. Die Farbe ist weiß. Und das leihen wir uns auch für den nächsten, ich glaube, sind sie alle weiß? Ja, sie sind alle weiß. Bis auf den kleinen Dreh. Ich bin mir nicht ganz sicher. Lassen Sie uns einen Blick darauf werfen und sehen, welche Farbe das ist. Okay, es ist immer noch weiß. Nur die Opazität ist geringer Also werden wir das stylen. Wir werden sagen, ähm, was ist das? Äh, Farbe ist RGBA. Hoppla. Ich habe es in Anführungszeichen gesetzt. Oh oh, es fehlt. Da haben wir's. Ähm, und ich glaube, es sind 100, 100, 100. Dann 0,5. Ja, das ist im Grunde, ja. Ja, ich will es, ich will es wirklich, tut mir leid, 255, 255. Ja. Okay. Genau das will ich. Ich will es weiß, aber ein bisschen durchsichtig. Das sieht richtig aus. Und dann legen wir jetzt die Größe fest. Also das werden 18 Whoops sein. Wir sagen Schriftgröße 18 Pixel. Das werden 32 Pixel sein. Und auch die Schriftstärke, wir können wahrscheinlich auch sagen, Schriftstärke von 600. Wir sagen Schriftgröße zwei REM und Schriftstärke, wahrscheinlich 800. Ähm, und dann aber pro Monat ist es anders. Wir wollen nicht, dass wir pro Monat irgendwas davon haben. Also sagen wir eine Schriftstärke von 400 und eine Schriftgröße von äh, 16, also ein RAM. Cool. Und ich denke, wir müssen wahrscheinlich auch eine Art Display-Flex machen , ähm, Objekte in der Mitte ausrichten. Ja, auf diese Weise ist da ein bisschen Platz. Okay. Interessant. Und dann machen wir auch noch Margin Left. Nur um ihnen etwas Platz zu geben, etwa 0,5. Fantastisch. Sieht ziemlich gut aus. Und dann der letzte, ich glaube nicht, dass wir uns noch ändern müssen. Es ist nur normale Größe 16. Ähm, noch etwas, wir werden wieder etwas hinzufügen, nur etwas Polsterung hinzufügen, etwas Rand Ähm, zwischen diesen beiden liegt meiner Meinung nach etwa ein RM, sagen wir, die obere Marge. Ein Ram. Und ja, ziemlich gut. Und dann fügen wir diesen Button unten hinzu. Also der Knopf, wahrscheinlich etwa 1,5 Rm Polsterung oben drauf. Okay. Und dann heißt es: Melde dich an. Und die Hintergrundfarbe wird diese sein. Also sagen wir Hintergrund. Farbe ist das. Und die tatsächliche Textfarbe wird weiß sein. Cool. Äh, und ja, das sollte es sein. Ich denke, ja, wir machen es in voller Breite. Das ist Breite, hoppla. Entspricht 100%. Texttransformation ist keine sie zwingt sie tatsächlich dazu Großbuchstaben zu schreiben, was wir nicht wollen Und dann werden wir es wahrscheinlich so machen, Schriftstärke, vielleicht 600, etwas fetter Ähm, was die Größe angeht. Ja, es ist einfach normal. Vielleicht machen wir sogar 800. Cool. Und ich denke, da ist vielleicht ein bisschen mehr Polsterung oben drauf Zwiebel. Das sieht ziemlich gut aus. Das ist also die zweite Karte, genau da. Lass uns weitermachen und das dritte, das dritte Stück der Karte machen, würde ich sagen. Und das wird unser Y sein. Und nochmal, du kannst dir wahrscheinlich einen besseren Namen als Y einfallen lassen, aber wir werden Y dafür verwenden Das fängt also wieder mit der Box für Material You Das als Basis verwenden. Wir werden es jetzt in unseren Kartencontainer importieren , also werden wir sagen, warum. Cool. Jetzt können Sie sehen, wie es sich stapelt und direkt nach unten geht Wir wollten eigentlich zur Seite rüberkommen. Hier fangen wir an, mit unserem Display herumzuspielen . Also sagen wir Display Flex, und das sollte einfach zur Seite springen Sie sehen, dass es an den Seiten die gleiche Menge einnimmt. Es kompensiert also gewissermaßen die Tatsache, dass es da ist Die andere Sache, die wir tatsächlich tun wollen, was ich völlig vergessen habe, ist , den Grenzradius unten festzulegen Lassen Sie uns das also ganz schnell machen, bevor wir ganz weitermachen. Also, wenn wir vom Kartenkopf herüber kommen, ändern wir, wo der Grenzradius ist Wir wollen eigentlich, dass es ganz unten ist. Also werden wir das ändern. Oder nein, eigentlich, wahrscheinlich nur die unterste. Also werden es drei Nullen und 0,5 sein. Also wollen wir nur, dass der Mais gekrümmt ist. Also, ähm, ja, das haben wir da. Und dann gehen wir zu Y über. Also, was Y angeht, wollen wir im Grunde einen ähnlichen Stil wie diesen machen Also eine Kopie, wir können uns das ausleihen und das als Basis verwenden und dann einfach ändern, wohin die Null geht Also die Null, die wir auf dieser Seite haben wollen. Also ja, du wirst sehen, dass die Außenkante gekrümmt ist. Wir müssen uns auch diese Farbe schnappen, die Oh ist. Welche Farbe ist das? Mm, ich glaube, das war die andere Farbe. Ich glaube nicht, ja. Äh, eine andere schnelle Methode ich Farben oft auffinden kann, ist die Verwendung dieses Farbwählers Ja. Fantastisch. Super schnell. Uh, die Hintergrundfarbe wird das sein. Perfekt. Perfekt. In Ordnung, cool. Also haben wir das Lassen Sie uns jetzt unseren Text einfügen, und das sollte viel einfacher sein. Also haben wir meinen Bus. Ähm, gib ein Typografie-Element ein. Warum US-Typografie. Cool. Und es wird wieder Größe 18 haben. Und dann wird die Schriftstärke sein, ich glaube, bei der anderen wäre es 600. Ähm, also sollte es passen. Und dann wird die Farbe weiß sein. Cool. Fantastisch. Ähm, Max Width, wir haben das Set. Dann brauchen wir diese Liste hier. Nun, es gibt zwei Möglichkeiten, wie wir das tun können. Wir könnten das einfach so machen, indem wir Pausen verwenden, aber ich denke, der bessere Weg, das zu tun, ist, eine tatsächliche ungeordnete Liste zu verwenden eine tatsächliche ungeordnete Liste Also sagen wir Ungeordnete Liste. Haben sie eine Listenkomponente? Oh, das tun sie. Ich habe es noch nie benutzt. Lass es uns versuchen und sehen, wie es geht. Ähm, also sagen wir Liste. Und was ist es dann? Liste? Vielleicht ein Listenelement? Ja, Listenelement. Okay. Und dann lass mich den ersten reinlegen und schauen, ob das in Ordnung aussieht Tutorials von Branchenexperten. Mal sehen, Elementtyp, ich sehe schlecht aus, Lazy-Elementtyp. Oh, äh, Artikel. Okay. Mm. Es rückt es Ich liebe es nicht wirklich, rückt es ein. Ähm, ich glaube, es gibt eine Immobilie, die wie Listyle List Keine? Nein. Ähm, Listyle CSS. Ähm. Innen quadratisch. Keine. Drinnen. Oh, interessant. Okay. Ich liebe das nicht wirklich. So entfernen Sie List Indentation, CSS. Äußerer Rand links. Rand links. Null. Mal sehen, ob das funktioniert hat. Nein. Lass es uns hier versuchen. Nein. Okay. Mir gefällt die Liste nicht wirklich, nur weil sie nicht das macht, was wir tun mussten. Lassen Sie uns also eine Box verwenden und lassen Sie uns Typografie-Elemente verwenden, die einfach nach unten gehen Lassen Sie mich also den ganzen Text kopieren. Lass es dort fallen. Mm , okay. Und wir werden sie einfach in Typografie-Elemente einfügen. Also, meine Güte. Also gut. Ähm okay. Ja. Und Wow, eigentlich die richtige Zahl. Fantastisch. Uh, Ups. Okay, cool Wir werden diesen zusätzlichen kleinen Raum dort loswerden. Ordnung, cool. Also, jetzt haben wir alle diese aufgelistet Ähm, noch eine Sache , die ich gerne tun würde. Ich hätte einfach eine Stilkomponente dafür machen können, aber ich habe es nicht getan. Auch hier gibt es Möglichkeiten, das viel sauberer zu machen, weißt du, wenn du das für dein Portfolio verwendest. Und das sieht gut aus. Das einzige, was ich tun möchte, ist eine Mindestbreite festzulegen. Also was ist es? 318? Ich glaube, ich werde die maximale Breite einstellen, aber die minimale Breite. Oder ist das dasselbe? Das sollte eigentlich dasselbe sein. Oh nein, das ist nicht richtig. Ähm, ich glaube, das ist der Grund , warum es heißt, Grid benutzen. Ähm. Gehen wir also zum CSS Trix Grid Layout Guide Also sagen wir Display Grid. Lass uns das versuchen. Ähm, das wäre also für diesen Container. Wenn wir also „Raster anzeigen“, Grid-Template-Spalten“, ein FR“, ein „FR“ sagen, sollten sie einfach dieselbe Menge an Platz beanspruchen. Cool. Das hat unser Problem gelöst. Das machen wir. Das funktioniert also dafür. Für das Desktop-Design. Unser Desktop-Design ist also im Grunde vollständig. Wir sind startklar. Das nächste, was wir uns ansehen wollen, ist unser mobiles Design. Also habe ich es in einem zweiten Tab geöffnet, damit ich zwischen den beiden hin und her wechseln kann Für das mobile Design wollen wir eigentlich, dass es nur eine Option ist Also, wenn ich ein FR sage, ja , genau das wollen wir. In Ordnung, also lass uns unsere mobile Anfrage hier eintragen. Also werden wir unseren Media Query Hook von Material UI verwenden und ihn von hier importieren Ich denke, wir müssen ihn vielleicht benutzen. Nun, sieh mal. Wir haben es vielleicht an ein paar Orten benutzt, und ich werde es nur ein bisschen aufdrehen. Ich sage, C-Handy entspricht min oder sorry, max. Breite, 600 Pixel Also werde ich fragen, ob es mobil ist, mach das, wenn nicht, mach etwas anderes Wenn es also mobil ist, wollen wir, dass die Spalten der Grid-Vorlage nur einen Bruchteil ausmachen. Andernfalls wollen wir, dass es sich um einen Bruch und einen Bruch handelt. heißt im Grunde, es Das heißt im Grunde, es ist entweder wie eins und eins oder eins und zwei. Also das werden wir dort tun. Oh, und es mag es nicht , weil das eine Client-Komponente sein muss. Das speichern wir. Okay. Fantastisch. Geil. Das sieht also gut aus. Und dann, ja, es macht es hier richtig. Die einzige andere Sache, die ich ändern möchte, sind diese kleinen lästigen Dinge, ähm, Grenzradien Und ich glaube, das ist Teil des Tricks beim Design. Oh, hier haben sie es einfach überhaupt nicht gekrümmt an der Unterseite. Interessant. Also ich schätze, du entfernst einfach den Grenzradius, wenn er gerade nach unten zeigt. Ähm, ich weiß nicht, ob das ideal ist oder ob es nur ein Unfall war, aber wir werden uns an das Design halten, wie es beschrieben ist. Ähm, also Grenzradius. Ja, wir müssen noch zwei weitere, ähm, zwei weitere mobile Anfragen stellen. Also werden wir diese Medienabfrage in CTA kopieren. Und auch hier ist es nicht unbedingt notwendig, aber es sieht nicht grau aus Es sieht nicht poliert aus. Also wollen wir sicherstellen, dass wir mit dem, womit wir arbeiten, irgendwie das Beste herausholen. Also machen wir daraus eine Client-Komponente und sagen dann: Ich bin mobil, der Grenzradius ist Null, andernfalls ist der Grenzradius so. Und dann machen wir dasselbe in unserem Y. Außerdem entfernen wir einige dieser Importe aus dem Nichtgebrauch , nur um die Dinge sauber zu halten Wir sagen, wenn es mobil ist, wird der mobile Bestellradius Null sein Andernfalls wird es das tun und ja, das sieht ziemlich gut aus. Das ist genau das, was wir dort wollen. Also ich denke, ja, ich denke, wir sind ziemlich gut darin, dorthin zu gehen. Also ja, das war eine wirklich schnelle Art , wie wir CSS-Grid, eine Kombination aus Grid und Flexbox, verwenden können , um ein responsives Design zu erstellen Wie gesagt, es gibt Möglichkeiten, das zu optimieren und es irgendwie viel sauberer zu machen Und ich würde empfehlen, dass Sie sich auf jeden Fall ein paar Minuten Zeit nehmen und es einfach aufräumen, wenn dies eines Ihrer Portfolioteile ist. Wissen Sie, verwenden Sie viel vernünftigere Komponenten. Wiederhole dich nicht so oft und ja, mach daraus ein wirklich, wirklich solides Portfoliostück.