Emanuel Mares

Tech - Fotografie - Timp liber

Parcursul FEND Saptamana 3

Am terminat si saptamana 3 din parcursul meu FEND in cadrul Udacity.

Ce am facut acum?

Saptamana asta am avut de-a face mai mult cu partea de responsiveness. Reiau de data trecuta optimizarea pentru diferite ecrane cu flexbox. Aflu cum functioneaza cu ajutorul a doua comenzi esentiale:

display: flex;
flex-wrap: wrap;

Care sunt aplicate unui container principal. Pe urma ne putem juca oricum vrem cu elementele ce se afla in acest container. Le putem intinde pe latimea maxima punand o anumita latime(width), de exemplu 50% unuia si 50% altuia si astfel avem doua boxuri unul langa altul fara sa recurgem macar odata la float. Cu order de asemenea putem aranja containere si elemente indiferent de pozitia lor in fisier. Sa spun de acum, flexbox e tare.

Apoi aflu de modelele de layout diferite. Printe care regasim, column drop, mostly fluid, layout shifter sau off canvas. Toate se refera la metodele de rearanjare cand ecranul se miscoreaza/mareste.

Pe urma intram in optimizarea imaginilor pentru mobile. Cursul este disponibil si gratuit de carte Udacity, urmati-l aici, Intelegem aici ca incarcat o imagine de 1900 pixeli pe dispozitive mobile devine o mare inutilitate care consuma si banda dar intarzie astfel si pagina. Ajutandu-ne de srcset putem da mai multe surse ale unei imagini, lasand browserul sa aleage dupa ecranul respectiv.

Momentam am inceput proiectul final din aceasta sectiune, creare unui portofoliu. Revin saptamana viitoare cu update-uri.

Share