Workshop – Tag 1 – Wie baue ich ein fluides Webdesign

Datum
09.11.2021

In dieser Programmier-Session zeige ich wie man ein fluides Webdesign umsetzt. Ich zeige es nur grob, nicht wie man ein 1:1 Design baut, da dies zu viel Zeit beanspruchen würde.

Video

Workshop

  • Workshop – Tag 1 – Wie baue ich ein fluides Webdesign
  • Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen
  • Breakpoints & Navigation
  • Flexbox
  • HTML Code

    <html>
      <head>
        <title>100 Bücher</title>
        <link href="style.css" rel="stylesheet"/>
      </head>
      <body>
        <nav>
          <img src="logo.svg" alt="100 Bücher Logo" />
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#">Link 7</a></li>
            <li><a href="#">Link 8</a></li>
            <li><a href="#">Link 9</a></li>
            <li><a href="#">Link 10</a></li>
          </ul>
        </nav>
        <main>
          <h1>100 Bücher</h1>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
          <div class="genre_box">
            <h2><a href="#">Thriller</a></h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <img src="buecher.png" alt="thriller bücher top 3" />
            <div>
              <a href="#" class="genre_button">Thriller öffnen</a>
            </div>
          </div>
        </main>
        <footer>
          <img src="logo.svg" alt="100 Bücher Logo" />
          <div class="footer_nav">
            <a href="#">Startseite</a>
            <a href="#">Impressum</a><br/>
            © Marc Borkowski
          </div>
        </footer>
      </body>
    </html>

    CSS

    body {
      margin: 0;
      padding: 0;
    }
    nav {
      width: 100%;
      height: 60px;
      background-color: #f3f3f3;
      border-bottom: 1px solid brown;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    nav img {
      height: 50px;
      width: auto;
      float: left;
      margin: 5px 10px;
    }
    nav ul {
      list-style: none;
      float: left;
    }
    nav ul li {
      float: left;
      margin: 5px;
    }
    nav ul li a {
      text-decoration: none;
      color: brown;
      padding: 5px 10px;
    }
    nav ul li a:hover {
      color: white;
      background-color: black;
    }
    main {
    }
    main h1 {
      font-size: 35px;
      text-align: center;
      margin: 50px auto;
    }
    main .genre_box {
      width: calc( 25% - 28px);
      margin: 14px;
      border: 1px solid grey;
      padding: 0 10px 50px 10px;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      float: left;
      position: relative;
    }
    main .genre_box h2{
      text-align: center;
    }
    main .genre_box h2 a{
      color: brown;
      text-decoration: none;
    }
    main .genre_box p {
      text-align: left;
    }
    main .genre_box img {
      position: absolute;
      bottom: -45px;
      margin: 0 auto;
      transition: bottom 1s ease;
      left: calc( 50% - 80px);
    }
    main .genre_box:hover img {
      bottom: -30px;
    }
    main .genre_box .genre_button {
      position: absolute;
      bottom: -100px;
      border: 1px solid grey;
      margin: 0 auto;
      transition: bottom 0.75s ease;
      background-color: white;
      padding: 5px 10px;
      text-decoration: none;
      display: inline-block;
      color: brown;
      left: calc( 50% - 64px);
    }
    main .genre_box:hover .genre_button {
      bottom: 20px;
    }
    footer {
      width: 100%;
      border-top: 1px solid brown;
      padding: 100px 14px;
      background-color: #f3f3f3;
      box-sizing: border-box;
      clear: both;
    }
    footer img{
      width: 250px;
    }
    footer .footer_nav {
      float: right;
      width: 250px;
    }
    footer .footer_nav a{
      text-decoration: none;
      color: brown;
    }
marc borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Twitter logoInstagram logoYouTube Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Kommentare (0)