Cautare in site

Cursuri

Curs Bootstrap Online

40.8% Nou Promo
Curs Bootstrap Online
Media Queries pentru Bootstrap
Exemplu Bootstrap Dreamweaver
Curs Bootstrap Online
Media Queries pentru Bootstrap
Exemplu Bootstrap Dreamweaver

About Instructor

Creeaza site-uri web RESPONSIVE cu Bootstrap!

Curs Bootstrap - despre curs

BOOTSTRAP este cel mai utilizat framework HTML, CSS si JavaScript pentru crearea de site-uri web adaptabile tuturor rezolutiilor de ecran.

Adaptabilitatea layout-urilor web la variile rezolutii de dispozitiv este un factor fundamental in algoritmul Google, care prin variile actualizari penalizeaza in pozitionare acele site-uri web care nu ofera o experienta optimala pe toate dispozitivele.

In cadrul cursului, integrarea Bootstrap se realizeaza utilizand atat functiile automatizate ale Adobe Dreamweaver cat si intr-un layout realizat de la zero utilizand editorul de text gratuit Brackets.

Exemplu layout Bootstrap

In timpul realizarii layout-ului in Adobe Dreamweaver videoclipurile sunt inregistrate in vizualizarea codului, astfel incat toate lectiile din curs realizate pe propunerea de layout a Bootstrap din Dreamweaver sa poata fi urmarite si de cine utilizeaza un alt editor de text.

Ce este inclus in Cursul Bootstrap

Materiale de curs

  • 25 DE LECTII VIDEO ON DEMAND
  • FISE PDF DESCARCABILE
  • 4 PAGINI DE LAYOUT EXEMPLU CU BOOTSTRAP DESCARCABILE
  • 6 LUNI DE CONEXIUNE LA PLATFORMA DE E-LEARNING
  • ASISTENTA PE TOATA DURATA CONECTARII

245.00 lei 145.00 lei

Curs Bootstrap

Videoclip de exemplu - Crearea unui meniu de navigare

Cui se adreseaza cursul Bootstrap

Dezvoltatorilor Front End

Cursul pentru creearea de site-uri web responsive folosind Bootstrap se adreseaza dezvoltatorilor web front-end care detin conostinte minime de HTML si CSS. Bootstrap poate fi incorporat in orice tipologie de proiect web.

Despre Bootstrap - Cine il utilizeaza

Bootstrap este baza pentru temele WordPress

Bootstrap este un framework robust si foarte intuitiv. Tocmai datorita acestor calitati este incorporat in majoritatea temelor construite pentru WordPress. Adobe Dreamweaver a inclus Bootstrap incepand cu versiunea CC 2015.

Versiune Software

Bootstrap 3

Cursul trateaza versiunea 3.3.7 a Bootstrap. Versiunea 4 a framework-ului se afla momentan in faza de testare.
Pentru realizarea layout-ului cu Bootstrap in cadrul cursului sunt folosite doua tipologii de editoare de text:

Programa curs Bootstrap

Cursul Bootstrap 3 este structurat in 5 module si trateaza aspectele fundamentale pentru crearea unui layout complet responsive:

CAP I – INTRODUCERE LA BOOTSTRAP

Baza pentru a intelege cum functioneaza Bootstrap este sistemul sau de coloane. In fiecare rand se pot insera un maxim de 12 coloane. Aceste coloane se pot distribui in foarte multe combinatii.

Dar cum anume se controleaza vizualizarea elementelor la variile rezolutii de dispozitive? Cu ajutorul regulilor CSS media queries – interogari media in baza largimii dispozitivului. Bootstrap dispune de 3 seturi de media queries pentru dispozitivele mici, medii si mari care reprezinta clasele corespondente: sm, md si lg. Rezolutia de default este pentru dispozitivele foarte mici, adica pentru telefoane mobile, deoarece Bootstrap este o platforma MOBILE FIRST.

Bootstrap dispune de zeci de elemente preconfectionate, printre care galerii de imagini, meniuri de navigare, breadcrumbs – firmituri de paine, etichete, panouri, liste, butoane, alterte etc. Toate elementele in Bootstrap sunt configurate prin clase CSS. In partea de introducere la Bootstrap vom trece in revista clasele pentru elementele principale de layout, pentru ca in modulele succesive sa le scriem de la zero penru crearea layout-ului complet.

Media Queries pentru Bootstrap

CAP. II – MARKUP PAGINA RESPONSIVE CU BOOTSTRAP

Pentru ca o pagina web sa functioneze corect cu Bootstrap va trebui sa configuram link-urile catre foaia de stil si javascript a framework-ului. Pe langa aceste link-uri pagina va fi configurata pentru a putea fi interpretata ca si responsive de catre browserele web prin metatagul viewport. In plus pentru functionarea elementelor javascript specifce Bootstrap va fi adaugat in pagina si link-ul catre framework-ul jQuery, iar ordinea acestui link in document este fundamentala.

In ceea ce priveste crearea unui nou layout cu Bootstrap folosind functiile automate din Adobe Dreamweaver vom vedea variile modalitati pe care programul le ofera.

CAP. III – BOOTSTRAP EXEMPLE – ELEMENTE BOOTSTRAP IN LAYOUT DREAMWEAVER CC 2017

La incarcarea layout-ului de pagina preconfectionat in Dreamweaver vom vedea in detaliu cum a fost acesta configurat si care sunt clasele folosite pentru principalele elemente: containers, randuri, coloane, offsets, titluri, butoane, iconite, labels etc.

Analiza layout-ului propus in Dreamweaver se face in vizualizarea codului si este indispensabila de parcurs si pentru cine foloseste alte editoare de text deoarece in acest modul sunt prezentate functionalitati esentiale pentru a putea realiza layout-ul de la zero in modulul succesiv.

Pagina web completa creata de Dreamweaver si analizata in acest modul este disponibila spre descarcare in cadrul cursului.

Exemplu Bootstrap Dreamweaver

CAP. IV – BOOTSTRAP EXEMPLE – CREAREA UNUI LAYOUT COMPLET DE LA ZERO IN BOOTSTRAP

In acest modul vom crea o pagina completa scriind markup-ul intr-un editor diferit fata de Dreamweaver, si anume in Brackets. Pentru reproducerea layout-ului se poate utiliza orice editor de text. Plecam de la exemplele de makup propuse de Bootstrap pentru a le personaliza intr-un layout original.

Pagina web responsive completa cu Bootstrap pe care o construim in curs cuprinde:
– sectiunea meniului de navigare si brand;
– slider de imagini – carousel;
– sectiune de oferte pentru care utilizam jumbotron si clasa pentru imagini rotunde, carora le aplicam atat efectul javascript toogle cat si efecte CSS de hover;
– diferite clase si tag-uri specifice Bootstrap pentru tipografie si butoane, printre care si doua tipologii de blockquote;
– sectiunea de articole blog unde imaginile sunt configurate cu clasa specifica pentru aceasta tipologie de vizualizare;
– partea de footer a paginii.

CAP. V – BOOTSTRAP EXEMPLE – INSERAREA ELEMENTELOR DE LAYOUT IN BOOTSTRAP

Toate elementele incluse in Bootstrap sunt exemplificate cu respectivul markup ce poate fi copiat si personalizat in cadrul oricarui proiect.

In Adobe Dreamweaver meniul Insert a fost implementat cu sectiunea Bootstrap Components cu ajutorul careia se poate insera markup-ul pentru principalele componente.

Modalitati plata

Plata pentru cursul Bootstrap se poate face prin card sau transfer bancar

245.00 lei 145.00 lei

Numar de videoclipuri 25 videoclipuri HD
Curs Bootstrap Online Responsive Web Design cu Bootstrap 3
CUNOSTINTE NECESARE Cunostinte minime de HTML si CSS
MATERIALE fise pdf descarcabile + 4 pagini de layout descarcabile
CONECTARE LA PLATFORMA E-LEARNING Nelimitat timp de 6 luni
VERSIUNE SOFTWARE UTILIZATA Bootstrap 3 | Brackets 1.9 | Adobe Dreamweaver CC 2017
Pret 245.00 lei 145.00 lei

Distribuie cursul