Video-Screencasts 2025, April

Nicks Illustration hatte drei verschiedene Schichten für die Köpfe. Sie sind nur leicht unterschiedliche Variationen. Wir könnten die Bilder mit einer Animation austauschen "

Während ich an diesem Design arbeitete, wurde jQuery 1.8 veröffentlicht. Dies ist nur ein kurzes Video, um sich auf die Tatsache zu verlassen, dass so etwas passiert, wenn Sie Websites entwickeln. "

Wir haben den grundlegenden Galerie-Header installiert, aber es fehlen die kleinen blauen Leute, die Erica in die Originalillustration eingefügt hat. Wir hatten darüber in "

Wir haben gerade den benutzerdefinierten Header für die Galerie eingerichtet. Fügen wir also, während wir gerade dabei sind, einen weiteren benutzerdefinierten Header hinzu. dieser wurde gemacht von "

Über die Homepage hinaus gibt es sieben verschiedene Hauptbereiche der Website. Also habe ich sieben verschiedene Illustratoren engagiert, um Entwürfe zu machen. Dies ist der erste, den wir sind "

Bis jetzt haben wir Codeänderungen lokal vorgenommen, ohne irgendeine Versionskontrolle zu verwenden. Mit der zunehmenden Komplexität dieser Website wird das "

Wir haben einen guten Start in das Responsive Design. Das Menü mit den kleinsten Bildschirmgrößen gliedert sich in ein 2x4-Raster. Es passt gut auf den Bildschirm, aber "

Wir fügen dem Raster, das wir für die Galerie eingerichtet haben, eine gewisse Reaktionsfähigkeit hinzu. Auf den breitesten Bildschirmen haben wir es auf vier Spalten eingestellt. Dann fangen wir an, "

In dem wir die Probleme herausfinden, die wir hatten, um das Spaltenlayout gut zu laden. Das Update bestand darin, das CSS zu entfernen, mit dem das "

Wir beginnen, uns mit dem Layout des Galeriebereichs zu befassen, was mir seit Beginn dieses Neugestaltungsprozesses in den Sinn gekommen ist. Meist"

Wir haben das Rasterlayout für die Galerie in Betrieb. Leider ist das Laden etwas abrupt und wackelig. Dies liegt daran, dass CSS3-Spalten so konzipiert sind, dass "

Wir haben bereits ein wenig Zeit damit verbracht, Seiten zu löschen, damit unsere Navigation funktioniert (Video Nr. 030) und Sie auf der Website klicken können, aber was ist auf diesen Unterabschnitten? "

Umfragen zu CSS-Tricks haben eine lange Tradition. Sie machen Spaß, sammeln gute wichtige Daten und verbessern die Verbindung der Menschen zur Website. Engagement FTW! "

Wir haben mit einem völlig anständigen Umfrage-Widget aufgehört. Die Typografie ist sauber und alles perfekt nutzbar. Es war jedoch nicht gerade überzeugend oder lustig. Wir"

Das oberste Modul in der Hauptseitenleiste der Site gehört Treehouse als Hauptsponsor von CSS-Tricks. Basierend auf einem Gespräch mit Ryan Carson. "

Das Suchdesign funktioniert einwandfrei, bis wir zu unserer "Baby Bear" -Größe (kleines Handy) kommen. Wir müssen dort etwas anderes machen. Wir machen Platz "

Zum ersten Mal in dieser Serie werden wir dem Design einige neue Dinge direkt hinzufügen, indem wir direkt im Browser arbeiten (nicht in Photoshop starten).

Wenn Sie einen Desktop-Browser sehr eng drücken, können Sie vage erkennen, wie ein responsives Design funktioniert, aber es ist keine genaue Darstellung eines "

Die Anzeige, die wir eingerichtet haben, eignet sich hervorragend für große Bildschirme / Desktop-Bildschirme, schlägt jedoch auf kleineren Bildschirmen ziemlich schnell fehl. Wir haben bereits einige Haltepunkte "

Wir haben das Aussehen einer Schaltfläche im normalen Zustand erstellt, aber eine solche 3D-Schaltfläche bittet um einen "gedrückten" Zustand. Was wir tun, ist eine dunklere Farbe zu "

Wir beginnen mit der Absicht, in HTML & CSS die Top Treehouse-Anzeige zu springen, die wir gerade entworfen haben, werden aber natürlich entgleist, sobald wir anfangen. "

Wir haben das Markup für die Baumhausanzeige oben auf der Seite eingerichtet, aber wir müssen noch einige Stylingarbeiten durchführen. Wir beginnen mit der Baumgrafik selbst. Wurden"

Wir haben viel Platz in der Kopfzeile gelassen. Von Anfang an wusste ich, dass dies für den Hauptsponsor von CSS-Tricks, Treehouse, sein würde. In diesem"

Wir haben noch etwas zu tun, um den Suchbereich fertigzustellen. Wir werden nur für eine Sekunde abgelenkt, als ich bemerke, dass wir das dreidimensionale nicht hinzugefügt haben. "

Wir setzen dort an, wo wir in Video Nr. 034 aufgehört haben, und bauen den Suchbereich weiter aus. Dieses Mal konzentrieren wir uns auf den "offenen" Zustand der Suche, Gebäude "

Wir machen eine kleine Pause von der Suche, um ein kleines Problem zu lösen. "FOUT" ist "Flash of Unstyled Text". Dies ist ein Phänomen, bei dem @ font-face "

Nachdem wir Photoshopping durchgeführt haben, was wir mit dem Suchbereich erreichen möchten, haben wir uns daran gemacht, es mit HTML und CSS zu erstellen. Wir haben bereits unsere Symbolschrift "

Es gibt viele Inhalte zu CSS-Tricks. Das ist eines der Dinge, die das Design etwas herausfordernd machen. Während wir mit dem Design sauber bleiben können, "

Wir beginnen damit, mit unserem Blog-Post-Modul zu spielen und mit dem Abstand herumzuspielen. Wir fügen auch das kleine farbige Quadrat oben links im Modul hinzu. "

In diesem superschnellen Video fügen wir das gesamte CSS hinzu, das erforderlich ist, um sicherzustellen, dass das aktuelle Seitenelement in der Hauptnavigation hervorgehoben wird, wenn diese Seite "