Blog

Adobe Cloud Express – Instagram Post erstellen [VIDEO]

Mit neuen kostenlosen Adobe Werkzeug „Adobe Creative Cloud Express“ kann extrem einfach und simpel Grafiken erstellen. In diesem Video zeige ich dir wie man es macht.

Dezember 14, 2021
Blog-Tipps die ich gerne gewusst hätte

Wie sollte man mit dem bloggen anfangen? Diese Frage habe ich mich die letzten paar Tage öfters gefragt und mir eine Skizze erstellt, in der ich mein bisherigen Weg aufgeschrieben habe und analysiert habe. Davon habe ich eine mögliche Zukunft abgeleitet.

SEO Content

Am Anfang bist du unbedeutend und keiner ließt dein Blog, deswegen solltest du mit SEO Content anfangen. Dies ist Content der gerne und oft gesucht wird. Sprich Tutorials oder How-To Artikel. Wenn du die Tipps von meiner SEO Strategie befolgst, kannst du nach ca. einem Jahr mit den ersten Besuchern rechnen. Der Vorteil dieser Strategie ist, dass du dann regelmäßig Leser haben wirst, die über Google und Co. kommen werden.

Wie viele Leser nach welcher Zeit?

Ich brauchte für meine ersten 1.000 Leser im Monat ca. 1½ Jahre. Wenn du ein gewisses Vertrauen bei Google aufgebaut hast, werden deine neuen Artikel nach ca. 3 Monaten schon in den Top 10 stehen. Nach ca. 4 Jahren bin ich jetzt bei 5.000 Lesern im Monat.

fokussiere dich

Ein weit verbreiteter Fehler ist es, viele Themen an zuschneiden. Es ist Ratsam sich auf eine Nische zu spezialisieren, bei mir war es CSS und Java Script (beides Themen aus der Webentwicklung). Dadurch hatte ich mir ein Experten-Status bei Google aufgebaut und expandiere langsam mit den Themen (bloggen & SEO).

Social Media

Parallel zu SEO Content kannst du auch mit Instagram oder Twitter Follower aufbauen und zu einer Personenmarke werden. Dadurch hast du mehr Spielraum für deine Artikel, da du zum Beispiel Meinungsartikel schreiben kannst. Mache dich darauf gefasst, dass nicht so viele über Social Media kommen werden, z.B. habe ich auf Twitter und Instagram 250 Follower und pro Meinungsartikel kommen so um die 3-5 Leser darüber.

Querverbindung Social Media

Was du aber von Anfang an machen solltest, was ich nicht getan habe, ist deine Social Media Kanäle auf deinem Blog promoten und auf deinen Kanälen deinen Blog. Dadurch entsteht eine Wechselwirkung, Menschen finden deinen Blog auf Social Media und deine Kanäle werden über dein Blog gefunden. Dadurch kannst du alle Plattformen gegenseitig boosten.

Schreibe auch eine detailreiche Über Mich Seite auf deinem Blog, diesen verlinkst du am Ende jedes Artikels (wird gerne geklickt). Des weiteren gibt dir das auch ein Vorteil für den SEO Content, da Google dann deine Fertigkeiten besser einschätzen kann und dies zu einem Trust-Bonus führt (wenn du deine Abschlüsse veröffentlichst).

netzwerken

Auf Social Media kannst du auch nach Verbündeten suchen und dich mit Anderen zusammentun. Das soll nicht heißen, dass ihr euch ein Blog teilt, sondern dass ihr euch gegenseitig verlinkt, z.B. mit einem Gastartikel.

Andere Blogger:innen werden aber erst mal skeptisch sein, deswegen musst du ein wenig in Vorleistung gehen. Schreibe über ein Thema von deinem Wunschpartner:in und verlinke den Blog. Danach schreibst du ein Kommentar, das dir der Artikel gut gefallen hat und du auch ein paar Worte dazu geschrieben hast.

kostenlose Werbung für Firmen

Vielleicht findest du in deiner Nische Unternehmen, die du gut findest. Dann führe ein Interview oder schreibe ein Review von einem Produkt. Danach promotest du den Artikel auf Social Media und tagst die Firma, es ist wahrscheinlich das die es reposten und du ein paar klicks bekommst. Dadurch baut sich auch ein wenig dein Ruf auf.

Listen kuratieren

Ich möchte 2022 anfangen Listen zu kuratieren, dadurch kann ich einfach hochwertigen Content erstellen und vielleicht wieder ein paar Backlinks sammeln (wenigstens in der Kommentarsektion vom Ziel). Danach werde ich mein Blog so erweitern, dass Listeneinträge hoch/runter gewählt werden können. Dadurch könnte ich es schaffen eine Community aufzubauen, da Leser zu Mitgliedern werden. Sollte dies klappen, kann ich dies erweitern und von meinen Lesern Listen erstellen lassen. Dadurch werde ich aus einer Personenmarke eine Wir-Marke.

Dezember 2, 2021
online Bildung hat ein Problem

Ich habe Udemy und Skillshare ausprobiert und bin von beiden Plattformen enttäuscht. Die Qualität hat wirklich ein kaum befriedigendes Niveau. Oft sind YouTube Videos besser und tiefer vom Inhalt. Des weiteren stört mich, dass Bildung hinter einer Paywall ist. Es gibt aber ein Ausreißer, edX.

online Bildung-Anbieter

Skillshare

Ich habe letzte Woche Skillshare ausprobiert, sie haben mich mit einem Black Friday Deal gelockt, ca. 80€ für 12 Monate. Ich habe nach 5 Tagen den Vertrag widerrufen, da mich die Qualität nicht überzeugen konnte. Es sind überwiegend Anfänger Videos die ein Einstieg ermöglichen. Des weiteren wurden mir sehr eigenartige Kurse vorgeschlagen. Ich hatte ein Animations-Kurs angefangen und ein UX Design Kurs. Beide Kurse habe ich zu 20% angeschaut und und dann nur noch die Zusammenfassung gelesen, da mir meine Zeit ein wenig verschwendet vorkam. Ich verspürte auch die ganze Zeit ein gewissen Druck, die Videos jetzt anzuschauen, weil ich monatlich dafür bezahlen musste.

Udemy

Udemy konnte mich absolut nicht überzeugen, der Marketing Kurs hat z.B. nur erklärt wie man WordPress aufsetzt und eine E-Mail Liste anlegt und warum man dies tun sollte. Solch einen Content gibt es auf Blogs in höherer Qualität und kostenlos. Ich habe mir die Kurse aber länger angeschaut, da ich den Kurs gekauft hatte und nach paar Monaten die weiter schauen konnte, ohne dafür regelmäßig zu bezahlen.

edX

edX hat mich bisher am meisten überzeugt, nicht nur weil der Inhalt an sich kostenlos ist, sonder man bekommt gegen eine Gebühr auch ein Zertifikat. Der Unterricht ist begleitend und man kann Fragen stellen bzw. die Student:innen helfen sich gegenseitig. Es gibt ein Zeitplan, der einem Vorgibt bis wann was erledigt sein muss. Man verspürt ein gewisse Zusammengehörigkeit mit anderen Lernenden. Die Kurse sind auf Englisch (wie bei Skillshare) und recht anspruchsvoll. Eine klare Empfehlung mal durchstöbern: https://www.edx.org/.

Zukunft

Ich erwarte in Zukunft auch eine deutschsprachige Plattform für online Kurse. Da sollte mal die kommende Regierung ein Auge drauf werfen, sie wollen schließlich Bildung und Digitalisierung fördern. Bitte nach dem Vorbild von edX mit deutschen Unis und Fachhochschulen.

Dezember 1, 2021
Meine SEO Wissen kurz erläutert
SEO ist eine Marketing Disziplin um bei Suchmaschinen wie zum Beispiel Google, auf den vorderen Plätzen zu erscheinen. Dabei gibt es 5 Kernelemente die deine Seite haben sollte.

Index
gute Technik

Die Technik muss stimmen. Ich achte penibel auf meine Vital Werte, dies sind von Google vorgegebene Richtwerte um die Seite technisch sauber zu gestalten. Du kannst die Vital Werte auf https://web.dev testen.

Grob kann man zusammenfassen: die Seite muss schnell sein, wenig Datenvolumen verbrauchen und ein nutzerfreundliches Design (Stichwort Layoutshift) haben.

Interaktiv

Für den Anfang ist ein Artikel-Index perfekt. Schreibe nach dem Intro eine Liste mit Ankerlinks zu den Artikelstellen. Durch Google Analytics habe ich festgestellt, 20% meiner benutzen diese. Dadurch kann schnell der Inhalt, der gesucht wird, gefunden werden.

JavaScript nur für Funktion

Bitte verwende keine Imagerotation, Slider oder sonstige optische JavaScript Effekte/Animationen, extrem toxisch! Benutze JavaScript weise, dann bekommst du ein ordentlichen boost für deine Artikel. Zum Beispiel auf meinem Größe von RAW-Bildern und Printprodukten berechnen Artikel, dort erkläre ich zuerst die Theorie und dann biete ich ein Rechner an der in JavaScript geschrieben ist. Sprich mein JavaScript Einsatz bietet ein hohen Mehrwert an.

Content Struktur

Textgliederung ist einer der wichtigsten Faktoren, baue Überschriften ein und mache lieber eine Subüberschrift mehr wenn du zweifelst ob das jetzt passt. Niemand hat Lust eine Text-Wüste zu lesen, die meisten wollen den Text scannen und die Informationen raus picken. Verwende wenig verschachtelte Sätze. Umso einfacher ein Text zu lesen ist, umso weniger muss dabei nachgedacht werden. Halte dich kurz und schwafle nicht.

Arbeite mit <b>, damit der Text noch schneller gescannt werden kann.

Mehrwert

Wenn ich ein Artikel über mein Leben oder Wünsche schreibe, wird dieser bei Google nicht erscheinen, da dies kein wirklichen Wissenszuwachs bringt. Schreibe Artikel bei dem Leute was lernen, eine handfeste Fertigkeit. Wenn du bei Google ranken willst, musst du eine Frage beantworten.

Trust

Warum sollten deine Leser dir glauben, wenn sie nichts über dich wissen? Erstelle eine Über Mich Seite und präsentiere deine Arbeit. Du kannst auch dein Werdegang beschreiben und erläutern was du wo gemacht hast. Verlinke diese Seite in einer Autorenbox unter und über jedem Artikel.
November 30, 2021
Cyber Crime Time – Cybercrime Hacker Spiel

Bin mal wieder auf ein interessantes Projekt gestoßen. Ein Cyber Security Spiel – du musst als Hacker ein Energy-Drink Firma hacken.

Du lernst verschiedene Arten von Sicherheitslücken und wie man vorgeht.

Projekt: https://www.im-c.com/game/cybercrimetime/de/#/

November 23, 2021

Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen

Tag 2 des Workshops, diesmal setzte ich das Design, mit CSS, pixelgnau um. Des weiteren erkläre ich euch was CSS Variablen sind.

Video

Workshop

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

HTML

<html>
  <head>
    <title>100 Bücher</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <nav>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <ul>
        <li><a href="#">Thriller</a></li>
        <li><a href="#">Roman</a></li>
        <li><a href="#">Fantasy</a></li>
        <li><a href="#">Science Fiction</a></li>
        <li><a href="#">Horror</a></li>
        <li><a href="#">Klassik</a></li>
        <li><a href="#">Reportage</a></li>
        <li><a href="#">Memoire</a></li>
        <li><a href="#">Kinderbuch</a></li>
        <li><a href="#">Fitness</a></li>
      </ul>
    </nav>
    <main>
      <h1>100 Bücher, die du lesen musst, bevor du stirbst</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_thriller.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box roman">
        <h2><a href="#">Roman</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_roman.png" alt="roman bücher top 3" />
        <div>
          <a href="#" class="genre_button">Roman öffnen</a>
        </div>
      </div>
      <div class="genre_box fantasy">
        <h2><a href="#">Fantasy</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_fantasy.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fantasy öffnen</a>
        </div>
      </div>
      <div class="genre_box fiction">
        <h2><a href="#">Science Fiction</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_fiction.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Science Fiction öffnen</a>
        </div>
      </div>
      <div class="genre_box horror">
        <h2><a href="#">Horror</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_horror.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Horror öffnen</a>
        </div>
      </div>
      <div class="genre_box classic">
        <h2><a href="#">Klassik</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_klassik.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Klassik öffnen</a>
        </div>
      </div>
      <div class="genre_box reportage">
        <h2><a href="#">Reportage</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_reportage.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Reportage öffnen</a>
        </div>
      </div>
      <div class="genre_box memoire">
        <h2><a href="#">Memoire</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="buercher_memorie.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Memoire öffnen</a>
        </div>
      </div>
      <div class="genre_box kinderbuch">
        <h2><a href="#">Kinderbuch</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_kinderbuch.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Kinderbuch öffnen</a>
        </div>
      </div>
      <div class="genre_box fitness">
        <h2><a href="#">Fitness</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_fitness.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fitness ö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/>
        <span>©  Marc Borkowski</span>
      </div>
    </footer>
  </body>
</html>

CSS

:root {
  --genrefarbe: grey;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  min-width: 960px;
}

nav {
  width: 100%;
  height: 47px;
  background-color: #f3f3f3;
  border-bottom: 1px solid brown;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav img {
  height: 27px;
  width: auto;
  float: left;
  margin: 11px 19px;
}

nav ul {
  list-style: none;
  float: left;
  padding: 0;
}

nav ul li {
  float: left;
  margin: -1px 3px;
}

nav ul li a {
  text-decoration: none;
  color: brown;
  padding: 4px 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 11pt;
}

nav ul li a:hover {
  color: white !important;
  background-color: black;
}

main {
  float: left;
  padding: 10px;
}

main h1 {
  font-size: 30px;
  text-align: center;
  margin: 41px auto 34px;
}

main .genre_box {
  width: calc( 25% - 20px);
  margin: 10px;
  border: 1px solid var(--genrefarbe);
  padding: 10px 14px 80px 14px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  float: left;
  position: relative;
  font-size: 13px;
  line-height: 150%;
}

main .genre_box h2{
  text-align: center;
  font-size: 18px;
  margin: 0px 0 20px;
}

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 var(--genrefarbe);
  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);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

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;
  margin: 150px 0 0 0;
  float: left;
}

footer img{
  width: 250px;
}

footer .footer_nav {
  float: right;
  width: 250px;
}

footer span {
  padding: 20px 0;
  display: inline-block;
}

footer .footer_nav a{
  text-decoration: none;
  color: brown;
}

a {
  color: #a86e22 !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Roboto Slab', serif;
}

.roman {
  --genrefarbe: #9700b8;
}

.fantasy {
  --genrefarbe: #0084ff;
}

.fiction {
  --genrefarbe: #0e8f94;
}

.horror {
  --genrefarbe: black;
}

.classic {
  --genrefarbe: #ffc600;
}

.reportage {
  --genrefarbe: #96ff00;
}

.memoire {
  --genrefarbe: #6600ff;
}

.kinderbuch {
  --genrefarbe: #06a60a;
}

.fitness {
  --genrefarbe: #ff0000;
}

November 13, 2021

Mein Blog unterstüzt meine Scanner Persönlichkeit

Ich habe jetzt schon öfters gehört, dass mein Blog chaotisch wirkt. Dies liegt an dem recht breiten Themenspektrum. Da mir jemand gesagt hat, das ist eine Eigenschaft von einer Scanner-Persönlichkeit. Das sind Menschen, die viele Interessen haben und nur so von Ideen explodieren. Oft werden Ideen/Wünsche 1-3 Jahre angegangen und dann wird sich etwas neues gesucht.

Was ist eine Scanner-Persönlichkeit?

Scanner sind Generalisten, 1-3 Jahre sich in etwas einarbeiten und dann erfolgreich beherschen. Gerne auch mehrere Projekte gleichzeitig z.B. in meinem Fall ist es aktuell YouTube Videos und Instagram. Beides mit dem Ziel Bekanntheit aufzubauen, aber oft fehlt bei einem Scanner das übergeordnete Ziel, oft ist es Wissen anhäufen. Scanner liebäugeln während eines Projektes schon mit dem nächsten Projekt, da es noch so viel zu lernen gibt.

Die gegensätzliche Persönlichkeit wäre Diver.

Was mir hilft

Blog

Was als Hobby angefangen hat und mir viel bei meinem Projekten geholfen hat, ist mein Blog. Hier kann ich mein Wissen vermitteln und meine Projekte dokumentieren. Ein weiterer Vorteil ist das Tagebuch auf meinem Blog (privater Scheiß). Im Tagebuch dokumentiere ich meine Gedanken, Wünsche und Projekt-Ideen. Dadurch kann ich meine Gedanken freien lauf lassen und muss nicht meine tollen Ideen oder vorgenommenen Projekte meinen Mitmenschen erzählen. Diese sind mittlerweile manchmal genervt, weil ich jeden Monat ein anderes Ziel verfolge. Ich schicke zwar die Links zu den Gedanken rum, aber man muss diese ja nicht öffnen.

Blog-Loop

Ein weiterer Vorteil von einem Blog ist das einfache Anknüpfen an alten Ideen. Wenn ich eine Woche nicht weiß was ich machen soll, gehe ich meine Tutorial-Reihen durch und schaue, bei welcher Reihe ich noch was erweitern oder optimieren kann. Dadurch entstehen Schleifen und ich baue über mehrere Jahre an einem Projekt, halt mit unterbrechungen.

Analyse & Feedback

Ich liebe es zu analysieren und optimieren und wenn der Blog ein wenig läuft, macht es Spaß den Wachstum zu beobachten und bekommt Feedback von Fremden wie hilfreich doch der Artikel ist. Bei so etwas fühlt man sich noch mal richtig bestätigt.

Listen

Mir wurde eine Präsentation zugeschickt, bei der eine Informatikerin über Ihre Erfahrungen als Scanner beschreibt. Sie hatte zum Beispiel den Tipp eine Liste zu führen mit Dingen auf die man Lust hat. Zuerst habe ich in mein kleines Notizbuch eine Liste geschrieben, aber nach einer Woche waren Dinge durchgestrichen mit Pfeilen verschoben oder nochmal mit Sternchen markiert, da ich dies als wichtig empfinde. Dies wurde mir zu wild, deswegen habe ich diese Liste ins digitale gezogen und auch öffentlich. Die Liste ist auf meiner Projekt Seite.

hilfreich?

Ich denke jetzt weniger über die Projekte nach, dies lenkt mich im Alltag weniger ab, weil ich im Kopf nicht mehr so viel sortieren und planen muss.

Präsentation

Danke an Mam (ein netter Kommentator hier auf Boolie) der mir das Video gezeigt hat.

November 11, 2021

Workshop – Tag 1 – Wie baue ich ein fluides Webdesign

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;
}

November 9, 2021

gute Übersicht von Statistiken von Deutschland

Habe mich Heute durch Regrierungs-Websites/PDF´s geklickt und ein Dashboard gefunden. Dies zeigt fichtige Kennzahlen von der deutschen Wirtschaft bis Corona.

Deutschland Dashboard öffnen

Technik

Es wurde mit React umgesetzt und wird auf Amazon S3 gehostet

API-Beispiel: https://www.dashboard-deutschland.de/api/dashboard/get Anscheinend werden auch die Klicks in der API ausgespielt… z.B. hat die Kategorie Gesundheit 17691 klicks.

Vielleicht debugge ich es später noch ein wenig.

November 4, 2021
HTML Tutorial

Basiswissen für HTML, von einfachen Artikel Tags bis zum Layout. Ist aktuell noch in der Schaffensphase.

Was ist HTML

HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache, dies ist eine Formatierung für Text. Sprich HTML kann jedem beliebigen Editor geschrieben werden und kann ohne weitere Verarbeitung gespeichert werden. Es wird überwiegend im Web verwendet, um Webseiten ein „Skelet“ zu geben. Es wird aber immer moderner HTML auch in Apps und Desktop Programmen zu verwenden.

Tutorials

Basiselemente

In diesem Tutorial lernst du wie man die Basis HTML Elemente anwendet. Wir schauen uns die HTML Elemente an, die zum formatieren von einem Artikel benötigt werden, von Überschrift bis zum Link. HTML Basiselemente für ein Artikel

HTML Links sind interaktive Elemente auf deiner Seite, mit einem Link kannst du auf eine andere Seite zeigen und auf bestimmte Textpassagen verlinken. Durch ein klick auf einen Link kommt man dann auf eine andere Seite bzw. ändert die Scrolltiefe auf der aktuellen Seite (oder beides zusammen). alles über HTML Links

Oktober 29, 2021

Blog

SEO Content

Wie viele Leser nach welcher Zeit?

fokussiere dich

Social Media

Querverbindung Social Media

netzwerken

kostenlose Werbung für Firmen

Listen kuratieren

online Bildung-Anbieter

Skillshare

Udemy

edX

Zukunft

Index

gute Technik

Interaktiv

JavaScript nur für Funktion

Content Struktur

Mehrwert

Trust

Video

Workshop

HTML

CSS

Was ist eine Scanner-Persönlichkeit?

Was mir hilft

Blog

Blog-Loop

Analyse & Feedback

Listen

hilfreich?

Präsentation

Video

Workshop

HTML Code

CSS

Technik

Was ist HTML

Tutorials

Basiselemente