Photoshop to Bootstrap

Cursul îşi propune o prezentare aprofundată a procesului de transformare a unei machete PSD, create în Photoshop, într-o interfață web codată utilizând tehnologiile HTML/CSS în contextul librăriei Bootstrap. Cursul este adresat tuturor celor interesați de o carieră în UI/UX Design şi Front-End Web Development şi vor să asimileze deprinderile practice necesare procesului de slicing. Folosind atât Photoshop-ul cât şi Bootstrap-ul, materia de curs este predată într-o manieră interactivă care permite cursanților însușirea temeinică a conceptelor teoretice prezentate prin punerea lor în aplicare cu ajutorul codării în timp real alături de instructor, precum și a exemplelor și studiilor de caz.

Acest curs presupune cunoștințe medii de Photoshop şi HTML/CSS, de aceea recomandăm absolvirea în prealabil a cursurilor de începători oferite de BIT Academy pentru aceste două discipline:

• Photoshop - a se vedea cursul Web Graphic Design
• HTML/CSS - a se vedea cursul Front-end Web Development - Modulul 1 (HTML/CSS)
  
  

Pe durata cursului vei învață despre:

• Exportul din Photoshop al resurselor grafice necesare pentru procesul de development​
• Anatomia unei pagini web și crearea unui grid iniţial folosind librăria Bootstrap
• Concepte de bază de UI & UX: culori - palete cromatice, gradienţi; fonturi- Google Web Fonts si Font Awesome; imagini - optimizarea dimensiunii de încărcare
• Responsive Web Design: adaptarea fiecărui element de design pentru desktop, tabletă şi smartphone
• Stabilirea unui workflow de lucru care să combine Photoshop şi Bootstrap şi să optimizeze utilizarea resurselor puse la dispoziţie de cele două resurse grafice şi de cod
• Adoptarea celor mai bune practici în coding pentru ca interfaţa web să nu aibă erori, să fie uşor de înţeles pentru restul echipei de development şi să fie pixel perfect.
  

Curriculum

• Ședința 1 Introducere (3h 30m)
  • Obiectivele cursului
  • Prezentare generală Bootstrap
  • Download Bootstrap
  • Alegere editor de cod
  • Descarcarea PSD-ului ce urmează a fi codat
  • Resurse adiţionale Photoshop: generarea paletelor cromatice, optimizarea imaginilor, Google Fonts, Font Awesome, Responsive Web Design
    
• Ședința 2 Exportul resurselor PSD și construirea grid-ului în Bootstrap (3h 30m)
  • Photoshop - exportul resurselor necesare procesului de development
  • Bootstrap - componente
  • Bootstrap - media queries, Responsive Web Design
  • Bootstrap - construirea gridului inițial al principalelor blocuri de conținut
    
• Ședința 3 Header - coding şi exportul resurselor PSD (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea secțiunii de header
  • Bootstrap - codarea secțiunii de header pentru desktop
  • Bootstrap - codarea secțiunii de header pentru tabletă
  • Bootstrap - codarea secțiunii de header pentru smartphone
    
• Ședința 4 Jumbotron - coding şi exportul resurselor PSD (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea secțiunii de jumbotron
  • Bootstrap - codarea secțiunii de jumbotron pentru desktop
  • Bootstrap - codarea secțiunii de jumbotron pentru tabletă
  • Bootstrap - codarea secțiunii de jumbotron pentru smartphone
    
• Ședința 5 Features & Portfolio - coding şi exportul resurselor PSD (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea secțiunilor de features și portfolio
  • Bootstrap - codarea secțiunilor de features și portfolio pentru desktop
  • Bootstrap - codarea secțiunilor de features și portfolio pentru tableta
  • Bootstrap - codarea secțiunilor de features și portfolio pentru smartphone
    
• Ședința 6 Showcase & Blog - coding şi exportul resurselor PSD (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea secțiunilor de showcase și blog
  • Bootstrap - codarea secţiunilor de showcase şi blog pentru desktop
  • Bootstrap - codarea secţiunilor de showcase şi blog pentru tabletă
  • Bootstrap - codarea secțiunilor de showcase şi blog pentru smartphone
    
• Ședința 7 Testimonials & Footer - coding şi exportul resurselor PSD (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea secțiunilor de testimonials și footer
  • Bootstrap - codarea secțiunilor de testimonials şi footer pentru desktop
  • Bootstrap - codarea secțiunilor de testimonials şi footer pentru tabletă
  • Bootstrap - codarea secțiunilor de testimonials și footer pentru smartphone
    
• Ședința 8 Coding: formular de contact, sticky footer, fixed navbar, diverse componente Bootstrap și prezentarea cerințelor pentru proiectul final (3h 30m)
  • Photoshop - exportul resurselor necesare pentru codarea unui formular de contact
  • ootstrap - codarea unui formular de contact pentru desktop
  • Bootstrap - codarea unui formular de contact pentru tabletă
  • Bootstrap - codarea unui formular de contact pentru smartphone
  • Bootstrap - codarea unor 'sticky footer' şi 'fixed navbar'
  • Bootstrap - componente: breadcrumb, card, collapse, modal, pagination
  • Prezentarea cerințelor pentru proiectul final