zur Startseite zur Hauptnavigation zum Hauptinhalt zum Suchformular
MySign
Neuhardstrasse 38
4600 Olten, CH
+41 62 836 80 10,
info@mysign.ch
image2019 6 28 10 43 18

31.5.2019

Am Freitag habe ich die Aufträge von Cheryl erhalten, die ich in der Zeit, in der Cheryl abwesend ist erledigen muss. Am Morgen habe ich Flexbox Defense gespielt, um nochmals Flexboxen zu üben.

http://www.flexboxdefense.com/

Nach dem ich mit dieser Aufgabe fertig war, fing ich mit einigen Coding Challenges an. In dieser Zeit wurde ich jedoch von Michel gefragt, ob ich bei einem Problem helfen kann. Deswegen konnte ich ungefähr 1 ½ Stunden nicht für den Frontend-Austausch arbeiten.

In den Coding Challanges ging es darum, eine Webseite an Hand eines vorgegebenen Bildes nachzubauen.

Coding Challenges:
https://codepen.io/lars_01/pen/RmvqqW
https://codepen.io/lars_01/pen/vwbQeB
https://codepen.io/lars_01/pen/byzQBe
https://codepen.io/lars_01/pen/YbBdrN
https://codepen.io/lars_01/pen/xNMXWp

3.6.2019

Am Morgen habe ich mit den Code-Challenges weitergearbeitet, leider habe ich bei dem Nachbauen der Google Seite viel Zeit verloren. Deswegen konnte ich erst im späteren Nachmittag mit der Screen Design Challenge anfangen.

4.6.2019

Ich habe den ganzen Tag für die ScreenDesing-Challenge gebraucht. Grund dafür war, dass ich 3 mal neu anfangen musste weil ich das Ganze zu kompliziert angegangen bin und den Anfang simpler aufbauen wollte. Beim 3. Versuch hat es schlussendlich geklappt und ich habe auch mehr über Grid gelernt, bzw. es ist mir jetzt ein wenig klarer.

ScreenDesign Challenge:
https://codepen.io/lars_01/pen/BebdJm

7.6.2019

Zuerst habe ich die Header Challenge fertiggestellt.

Header Challenge:
https://codepen.io/lars_01/pen/PvrOLg

Danach habe ich hauptsächlich an der Ludo-Challenge gearbeitet. Da ich aber teils Probleme hatte, z.B. wie ich das Layout am besten mache, kam ich nicht wirklich weit. Vor allem hatte ich anfangs Probleme mit dem Zuschneiden der Bilder auf die richtige grösse mit CSS.

Die Ludo Challenge sollte fertiggestellt so aussehen:

Ludo Challenge

11.6.2019

Ich habe an der Ludo-Challenge weitergearbeitet. Anfangs ging alles ziemlich gut, doch ich hatte Probleme dabei, die 8 Bilder vom Sortiment einzufügen, da bei diesen die Höhe irgendwie nicht richtig war und ich nicht wusste, was das Problem war. Ein grosser Teil des Morgens ging für das Vorbereiten der Java Themen von Cheryl drauf.

12.6.2019

Ich habe erneut an der Ludo-Challenge weitergearbeitet. Ich hatte Mühe mit dem Kontakt Formular und habe ziemlich viel Zeit darin investiert. Ausserdem hatte ich Probleme bezüglich dem Responsive Design, z.B. dass Bilder verzerrt sind und sich nicht gleichmässig vergrössern. Dies hat mich viel Zeit gekostet. Am Ende des Tages konnte er die Ludo-Challenge fertigstellen, auch wenn noch ein Paar Bugs behoben werden müssen.

13.6.2019

Als ich Pascal die Ludo-Challenge gezeigt hat, hat Pascal gesagt ich solle doch nochmals von vorne Anfangen da die Seite nicht wirklich Responsive war. Denn ich habe zuerst garnicht an das Responsive Design gedacht, sondern habe nur auf meinem Bildschirm geschaut, ob es gut aussehen würde. Das führte dazu, dass die Website überhaupt nicht schön aussah, wenn das Fenster verkleinert wurde und ich habe daher neu angefangen. Jedoch habe mich mit dem Mobile-First Prinzip angefangen, in dem ich in den Entwicklertools die Handy Ansicht nutzte. 

14.6.2019

Ich habe nun mit der Mobile-First Ludo-Challenge weitergearbeitet. Anfangs hatte ich Mühe, da alles auf ziemlich kleinem Raum passen musste. Doch schon gegen den Nachmittag hatte ich die Mobile-Variante fertig. Ich habe jedoch noch angefangen mit Ideen sammeln, wie ich es am besten mache, damit die Seite neu angeordnet wird sobald der Bildschirm grösser wird und kam zum Entschluss, dass ich Media Queries verwenden möchte. Leider hat es mir nicht mehr gereicht die Webseite komplett responsive zu gestalten, da ich die nächste Woche dann vor allem Cheryl noch Java beigebracht habe.

 *{     padding: 0;     margin: 0; }   a{     color: black; }   ul{     list-style-type: none;     font-family: Arial, Helvetica, sans-serif; }   label{     font-family: Arial, Helvetica, sans-serif;     font-size: .75em; }   h1{     font-family: Lucida Handwriting;     margin: 10px 0 10px 0;     font-size: 1.5em; }   span, p{     font-family: Arial, Helvetica, sans-serif;     font-size: .75em; }   h2{     font-family: Arial, Helvetica, sans-serif;     font-size: 1em;     margin: 10px 0 10px 0; }   h3{     font-family: Arial, Helvetica, sans-serif;     font-size: .8em;     margin: 10px 0 10px 0; }   .kontaktInputs{     background-color: #B0153D;     width: 100%;     border-style: none;     color: white; }   textarea{     height: 7vh;     resize: none; }   hr{     border: solid 1px #DE2153;     background-color: #DE2153; } body{     width: 100vw;     height: 100vh; }   .roundImg{     min-width: 100px;     min-height: 100px;     border-radius: 50%;     object-fit: cover;     background-repeat: no-repeat; }   .picture{     height: 150px;     width: 100vw;     border-top: 2.5px solid #3C68AF;     border-bottom: 2.5px solid #DE2153;     background-position: center;     background-attachment: fixed;     background-repeat: no-repeat;     background-size: auto;     margin: 10px 0 10px 0; }   .picture1{     background-image: url('images/1.jpg');       }   .picture2{     background-image: url('images/2.jpg'); }   .picture3{     background-image: url('images/3.jpg') }   .ludoImg{     width: 20vw;     height: auto; }   .navigation{     display: flex;     align-items: center;     width: 60vw;     margin: auto; }   .item{     font-family: Lucida Handwriting;     display: inline;     font-size: .75em; }   .content{     width: 60vw;     margin: auto; }   .shopImg{     min-width: 100px;     min-height: 100px;     width: 25%;     height: 25%; }   .sortimentContainer{     display: flex;     flex-wrap: wrap; }   .sortimentImg{     background-image: url("images/spielfigur.jpg");     background-position: center;     width: 25%;     height: 25%; }   .mapImg{     width: 25%;     height: 25%; } footer{     display: flex;     border-top: solid 2px #DE2153;     flex-direction: column;     align-items: center;     background-color: #2c2d2e;     color: white; }

Kommentare