Today: April 19, 2021 5:08 am

8h css rampage mit erfolgserlebnissen – live coding im discord server

hab die freie zeit am ostermontag sinnvoll mit dem career path genutzt. knappe 8h css coding am stück und ich merke, es sitzt alles einfach viel besser und schreibt sich einfacher runter als vor zwei wochen. which is nice. gibt einem auch einen gewissen motivationboost so ein erfolgserlebnis.


challenge: blog-like frontpage mit <a>buttons

topic heute war das vererbung von parent auf child classes, compound selectors und weiterer inheritance kniffe. ich fand es die tatsache das compound selectors gar nicht gerne genutzt werden und zu deutlichen problemen führen können ziemlich schade, da es für mich absolut logisch war, den code so zu schreiben und zu definieren.

hier gehts direkt zu meinem scrim



ich habe den html und den css code 4x hintereinander runter geschrieben um mir das setting von margin und padding richtig zu geben. ich will das komplett gerallt haben, da ich in der vergangenheit schon so oft an diesem problem hängen blieb und keine lösung fand. nicht nur das margin und padding muss stimmen, sondern auch zu wissen wie man sein css aufbaut was die inheritance angeht. einer der gründe wieso compound selectors nicht so dolle sind.


erstmal html zum runterkommen

die routine zeigt sich beim runterbeten vom standard html frameset. neu dazu gekommen ist die google font geschichte im header. kurz ein eigenes font set zusammen gestellt und direkt in html und css hinzugefügt. damit läuft es überall gleich. damit man nicht gleich erschlagen wird an code, hab ich dieses schicke plugin gefunden um die code schnippsel in ein accordion zu setzen. sieht zum einen geil aus und ich hab wieder was gelernt, hach ist das schön <3.


index.html

normalerweise würde hier mein html code zu sehen sein, jedoch habe ich noch nicht herausgefunden wieso mir meine css datei weiter unten angezeigt wird, aber meine html nicht. deswegen mal diesen platzhalter hier für mich. ausserdem hier der hexcode für das grün #61CE70

und css direkt noch hinterher, weils spaß macht

wie bereits weiter oben erwähnt, hatte ich mir für heute vorgenommen mein verständnis was margin und pading angeht weiter zu vertiefen. nach dem dritten von vier anläufen hat dann das schreiben vom code direkt geklappt. die ersten beiden male musste ich nochmal spicken.

margin: 0; & padding: 40px 0; – that´s the deal

kann absolut verstehen, wenn dieses <h4> für niemanden anders außer mir selbst sinn macht. ich bin beim schreiben eben nochmal gewisse punkte aus der challenge durchgegangen. aber seht selbst:

/css/index.css

body {
    margin: 0;
    font-size: 18px;
    font-family: "lato";
    color: #2e354f;
}

/* typography css */

h1,
h2,
strong {
    font-weight: 900;
}

h1 {
    font-size: 36px;
    margin: 0;
}

h2 {
    font-size: 24px;
    color: #ef5839;
    margin: 0;
}

a {
    color: #ef5839;
    font-weight: 900;
}

a:hover,
a:focus {
    color: #d4b44c;
}

/* layout css */

header {
    /* border: 1px red solid; */
    background: #2e354f;
    color: #fff;
    padding: 40px 0;
}

.container {
    /* border: 1px red solid; */
    width: 620px;
    margin: 0 auto;
    padding-bottom: 10px;
    /* there you go :D  */
}

section {
    /* border: 1px red solid; */
    padding: 40px 0;
}

.section-two {
    background: #2e354f;
    color: #fff
}

/* button css */

.btn {
    /* border: 1px red solid; */
    padding: 10px 25px;
    margin: 10px 0;
    margin-right: 5px;
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;
    border-bottom-left-radius: 0.5em; 
    text-decoration: none;
}

.btn-accent {
    background: #ef5839;
    color: #fff;
}

.btn-accent:hover {
    background: orange;
    color: #fff;
}

.btn-light {
    background: #fff;
    color: #2e354f
}

.btn-light:hover {
    background: lightgray;
    color: #fff;
}

ich bin dann mal veröffentlichen, ich hab heute kein sitzfleisch mehr. morgen gibts ein detailed review.

wer schreibt hier...?

sam
samthat´s me
self-taught frontend web dev in ausbildung und bloggt hier über alles was ihn den tag über so über den bildschirm läuft. meistens irgendwas mit coding, musik oder irgendetwas mit verbindung zu "the legend of zelda".
0.00 avg. rating (0% score) - 0 votes
0 Comments

No Comment.