Emanuel Mares

Tech - Fotografie - Timp liber

Parcursul FEND (front-end-nanodegree) Saptamana 1

M-am decis in urma postului anterior sa imi documentez parcursul catre diploma pentru FEND(front-end-nanodegree) in cadrul Udacity.

Ce am facut in prima saptamana?

Cursul incepe cu Web Foundations. Ni se prezinta sintaxa unui document HTML si CSS apoi patrundem catre partea de afisare a unei pagini, responsiveness si afisarea pe dispozitive mobile. Si se incheie cu un proiect cu subiectul unui site de prezentare al unui portofoliu.

Cateva subiecte au fost deja completate, ramanand aceleasi de la prima faza. Sintaxa html atunci arata modelul unui document html, cu cele 3 elemente de baza si relatia lor(html,head,body). Aflam ca fiecare element are o relatie cu celelalte prezente, daca se afla inauntrul unui alt element(child), sau sunt unul dupa altul(siblings). Apoi aducem in discutie modelul ramificat al structurii, numit DOM(Document Object Model) care retine proprietati si stiluri ale elementelor.

Avem <html> ce incapsuleaza tot(este un parinte) ce este intr-o pagina. El este urmat de <head> care contine <meta>, <link> sau <title> ce declara informatii extra necesare unei pagini. Iarasi <body> retine elementele ce vor fi afisate userului. Vom avea aici <div>, <p>, <span>, <nav> sau <a>.

HTML tree

HTML tree

Trecusem apoi catre sintaxa CSS. Inteleg ca CSS este un amalgam de reguli pentru a afisa anumite elemente. Deci este alcatuit din reguli ale unui selector(elementul sau poate fi si o clasa denumita de noi) asupra careia aplicam mai multe declaratii despre stil. Astfel putem alege aplicarea catre un element(astfel se va aplica tuturor elementelor de acelasi tip) sau unei clase stabilita de noi atribuita oricarui tip de element. Aflam notatia unui selector prin simplu numele elementului  sau notatie cu punct(.class) sau diez pentru id(#id). Id si class sunt similare, in sensul ca se definesc de autor, doar ca clasa se poate refolosi de oricate elemente, dar un id se poate folosi so singura data per pagina.

h1 {
  color: green;
}
.book-summary {
  color: blue;
}
#site-description {
  color: red;
}

Am urmat apoi primul proiect, format din html si css, cu tema animal-trading card. Am primit cateva instructiuni ca sa fac un card despre un animal preferat cu dimensiuni fixe si un stil predefinit. Incarcat si reviziut, l-am trecut. Il folosisem pe cel de data trecuta, mi-am ales tigrul bengalez.

Pe urma explica necesitatea unui editor de text profi pentru a scrie cod rapid si scurtaturi foarte bine venite. Momentan folosesc Visual Studio Code pe linux manjaro(derivat din arch), dupa ce am incercat cu sublime si atom. Mi se pare cel mai curat si totusi folositor dintre cele trei.

Pe final am ramas la parte de responsiveness. Inteleg baza si de ce este neaparata nevoie cand ecranele mici au devenit normalul un web. De altfel descoperim aici un cuvant important, viewport. Dar si urmatoare instructiune:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cam atat pana acum, ramane sa ne auzim saptamana viitoare pentru mai multe update-uri. As vrea sa va prezint si mai multe proiecte la care sper ca voi lucra in viitor.

Share