imagine-fundal

Blog / 🥇 Codul de la interfața veche și mia de accesări.
facebook instagram whatsapp tiktok twitter

     Salut! Sunt Andrei, și pagina web pe care te afli acum a depășit de curând un prag pe care l-am pus când am început acest proiect. Este vorba de o mie de accesări într-o singură zi pe întreg website-ul, milestone pe care l-am trecut în data de 12 decembrie 2022 pentru prima dată. Accesările până la urmă sunt doar niște numere, așa că, în acest mini-tutorial vom parcurge una dintre vechile interfețe ale site-ului, mai exact codul din spatele acesteia sub forma unei mici povești despre cum era codulluiandrei.ro înainte de 2.0 și toate celelalte schimbări.

     Ne referim la perioada stil Windows 8 a paginii de acasă (meniul de start, câteva tile-uri importante și mari). Mai jos poți vedea o captură de ecran înainte de înlocuirea acesteia. Interfața consta într-un header colorat cu numele site-ului, 8 butoane cu paginile anexe mai importante și la final link-uri către rețelele de socializare și adresele de contact. Codul era tot scris în HTML și CSS, fără nicio linie de JavaScript.

     După cum reiese și din descriere, codul era foarte simplist, un container grid și câteva ancore, întreaga pagină, încluzând stilizările CSS nu depășea 100 de linii, însă era eficientă și își făcea treaba la momentul respectiv. O pagină doar HTML și la nivelul acela de umplere nu avea de ce să nu se încarce rapid, ca urmare, scorul din LightHouse este de 100, după cum puteți vedea și în captura de mai jos.

     Cât despre cod, totul este foarte intuitiv, ca urmare voi încărca mai jos secvențele separate pentru blocurile din pagină împreună cu stilizările corespunzătoare. Pentru mai multe tutoriale de stilizare poți accesa lista de postări CSS folosind ancora de aici.

Container-ul Grid conținând 8 ancore și diviziunea titlului:

<div class="buttons_gridcontainer">
    <div class="buttons_logocontainer"><span>c</span>odul <span>l</span>ui<span> a</span>ndrei</div>
    <a href="https://www.youtube.com/channel/UCwiLIwqFn_Q3rWZmWh890Jg/videos"><div class="buttons_item buttons_item_changed">IT Simplu<br>
    <img src="https://img.icons8.com/color/96/000000/youtube-play.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/rezolvari/lista_hackerrank"><div class="buttons_item">Rezolvari Hackerrank<br>
    <img src="https://img.icons8.com/external-tal-revivo-color-tal-revivo/96/000000/external-hackerrank-is-a-technology-company-that-focuses-on-competitive-programming-logo-color-tal-revivo.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/rezolvari/lista"><div class="buttons_item">Rezolvari PBinfo<br>
    <img src="https://www.pbinfo.ro/favicon.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/blog"><div class="buttons_item buttons_item_changed">Blog de IT<br>
    <img src="https://img.icons8.com/external-soft-fill-juicy-fish/60/000000/external-mobile-information-technology-soft-fill-soft-fill-juicy-fish.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/rezolvari/lista_cssbattle"><div class="buttons_item">Rezolvari CSSbattle<br>
    <img src="https://cssbattle.dev/images/logo-no-text.svg"/></div></a>
    <a href="https://www.codulluiandrei.ro/tutorial-complet/html"><div class="buttons_item buttons_item_changed">Tutorial HTML<br>
    <img src="https://img.icons8.com/color/96/000000/html-5--v1.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/tutorial-complet/css"><div class="buttons_item">Tutorial CSS Incepatori<br>
    <img src="https://img.icons8.com/color/96/000000/css3.png"/></div></a>
    <a href="https://www.codulluiandrei.ro/tutorial-complet/js-web"><div class="buttons_item">Tutorial JS Incepatori<br>
    <img src="https://img.icons8.com/color/96/000000/javascript--v1.png"/></div></a>
</div>
.buttons_logocontainer {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .2rem;
    padding: 20px;
    grid-column: 1 / span 2;
    grid-row: 1;
    transition: 0.7s;
} 
.buttons_gridcontainer {
    display: grid; 
    grid-template-columns: 50% 50%;
    grid-template-rows: 20%;
} 
/* pentru a seta logo-ul la full width */
.buttons_item:nth-child(1) {
    grid-row: 1 span 1/2;
} 
.buttons_item {
    width: auto;
    height: 7rem;
    overflow: hidden;
    border: 1px solid #b678ff;
    border-radius: 2px 2px;
    background: url("https://codulluiandrei.ro/imagini/textura-buton-acasa.png");
    padding: 10px;
    color: #b678ff;
    text-align: center;
    margin-top: 1rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    font-size: 1rem;
    transition: 0.7s;
    letter-spacing: 0.1rem;
}

Și codul pentru header-ul colorat respectiv animațiile butoanelor:

 .buttons_logocontainer span { color: #b678ff; }
.buttons_item:hover {
    font-size: 1.3rem;
    background: url("https://codulluiandrei.ro/imagini/textura-buton-acasa-hover.png");
}
.buttons_item_changed {
    border-radius: 2px 2px;
} 

La final și script-ul pentru ancorele din partea de jos a ecranului:

<div class="links_container">
    <ul>
        <li><a href="https://www.facebook.com/codulluiandrei.ro/"><img src="https://img.icons8.com/nolan/96/facebook-new.png"/></a></li>
        <li><a href="https://www.instagram.com/codulluiandrei.ro/"><img src="https://img.icons8.com/nolan/96/instagram-new.png"/></a></li>
        <li><a href="https://twitter.com/codulluiandrei/"><img src="https://img.icons8.com/nolan/96/twitter-circled.png"/></a></li>
        <li><a href="https://www.tiktok.com/@codulluiandrei.ro"><img src="https://img.icons8.com/nolan/96/tiktok.png"/></a></li>
        <li><a href="https://github.com/codulluiandrei"><img src="https://img.icons8.com/nolan/96/github.png"/></a></li>
        <li><a href="mailto:admin@codulluiandrei.ro"><img src="https://img.icons8.com/nolan/96/email-sign.png"/></a></li>
    </ul>
</div>
.links_container {  position: absolute; top: auto; left: 50%; transform: translate(-50%); width: 100%; text-align: center; margin-left: -16px; }
.links_container img { width: 48px; height: 48px; }

imagine

hackerrank / introduction-python-if-else-py

imagine

pbinfo / 3207

imagine

pbinfo / 451