Web Design Training

Web designul este un domeniu extrem de larg. Practic, orice website pe care îl vizitați prin intermediul browserului și orice aplicație pe care o descărcați din Google Play sau App Store, dar nu numai, a fost realizată de web designeri folosind tehnologiile corespunzătoare. Vorbim despre codul creat de aceștia pentru a reda conținutul în forma stabilită de designul grafic și funcționalitățile menite să îmbunătățească interacțiunea utilizatorilor cu site-urile sau aplicațiile.

De ce Training Web Design „One on One”

Videoclipurile de pe Youtube sunt fantastice. Unele sunt excelente, altele menite să completeze din informațiile pe care le dorim. Udemy este, de asemenea, o sursa extraordinară de cunoștințe, la fel și alte site-uri dedicate aprofundării uriașei nișe „web design” și „development” – Coursera, FreeCodeCamp, TreeHouse, Envato Tuts sau Frontend Masters.

Programul Web Design Training încurajează potențialii sau actuali cursanți să se documenteze de oriunde au posibilitatea. De altfel, de-a lungul timpului, am făcut sugestii de vizualizare a sute de tutoriale video sau text. Însă web designul și problemele pe care ar trebui să le rezolvăm sunt extrem de specifice. Soluțiile pentru problemele mai simple sunt prezente online și la îndemână, altele, din cele mai complexe, sunt foarte greu de găsit. În cele din urmă, unele sunt imposibil de găsit sau chiar nu există, independent de nivelul de complexitate.

Scopul programului nu este să concureze cu Youtube, Udemy sau Coursera, ci să aducă o plus-valoare concretă, acea soluție specifică, atunci când este nevoie de ea. În plus, nu se ignoră nici aspectul disciplinei profesionale, ce va conta în planul eficienței, adică, din nou, plus-valoare prin definiție.

Necesar

Pentru a putea începe trainingul veți avea nevoie de:

• un calculator cu performanțe decente;
• limba engleză minim nivel mediu;
• seriozitate, perseverență, timp liber pentru a:
  • participa la sesiunile online;
  • testa ceea ce se învață în timpul cursului, între sesiuni;
  • parcurge materialele suplimentare (video sau text) sugerate la finalul fiecărei ședințe.

Cum funcționează

Mai întâi, ne cunoaștem și ne asigurăm că putem lucra împreună. Apoi, stabilim câteva obiective. După ședința introductivă, sesiunile în sine se derulează online, într-un sistem de voce și screenshare – adică ne auzim și ne partajăm ecranele calculatoarelor.

Ședința de cunoaștere

Începem cu o ședință gratuită de cunoaștere, de 15-30 de minute. Ședința poate avea loc pe Skype, Discord sau orice alt mediu de comunicare potrivit, agreat în prealabil de ambele părți. Video nu este neapărat necesar, dar recomandat. În timpul acestei sesiuni voi încerca să înțeleg nivelul de cunoștințe al cursantului, atât din punct de vedere al limbii engleze, cât și al modului în care acesta înțelege internetul și site-urile web.

La final, ar trebui să am toate informațiile necesare pentru a pregăti abordarea următoarelor sesiuni.

Munca mea nu constă doar în consultanța și trainingul oferit în timpul sesiunilor în sine, ci și în pregătirea următoarei sesiuni. Nu suntem la școală, nu citesc după dictare, ci îmi adaptez activitatea în funcție de informația pe care cursantul a reușit s-o capaciteze.

Pentru că avem de-a face cu atât de multă informație, este nevoie să o capacităm cât mai modular, într-un ritm care să permită cursantului să testeze ceea ce a învățat, între sesiuni. Prin urmare, indiferent de nivelul la care am ajuns și de modulul sau modulele pe care le alegem, rezultatele cele mai bune le-am obținut printr-un program de 2-3 ședințe săptămânale, de câte 2 ore fiecare, cu o pauză de 5 minute după prima oră.

Data și ora fiecărei sesiuni se stabilește la finalul sesiunii precedente. Orarul este flexibil. Rugămintea mea este să mă anunțați dacă se dorește o anulare a unei anumite sesiuni cu două zile înainte.

Ce obțineți

Fiecare modul parcurs are în vedere rezultate palpabile. Subiectele abordate sunt menționate în cuprinsul fiecărui modul în parte. Rezultatul final nu depinde doar de mine, ci și de cursant, de modul în care aprofundează fiecare concept sau tehnică folosită în timpul trainingului.

Emit factură pentru fiecare ședință în parte sau pentru pachete de mai multe ședințe. Înainte de a începe, se semnează un contract de consultanță, cu scopul declarat de vă ajuta să construiți site-uri web. Ofer și doresc confidențialitate.

Programul de training se încheie în momentul în care una din părți dorește să se retragă. Oricând, fără alte obligații.

Ce NU obțineți

Nu ofer o diplomă, nici garanții. Dacă aveți nevoie de o diplomă, vă pot îndruma în direcția potrivită. Dacă cineva oferă garanții, vă sfătuiesc să vă întoarceți 180 de grade și să fugiți în cealaltă direcție – ceva este clar în neregulă.

Știu că pot să ajut și încerc să o fac într-un mod profesionist. Nu cunosc toate tehnologiile web – nimeni nu le cunoaște. Pe de altă parte, există probleme specifice ale căror rezolvări durează și este mai constructiv să le evităm.

Iată cele două module:

Training HTML / CSS

Acest modul este dedicat celor ce-și doresc să învețe să codeze site-uri web. Este introducerea în ceea ce se cheamă „front-end development” și include HTML și CSS. La finalul acestui modul, cursantul ar trebui să știe cum să creeze site-uri simple, statice, folosind semantica corespunzătoare și tehnologii moderne de editare.

• Introducere
  • Ce sunt website-urile
  • Ce sunt domeniile
  • Despre domenii și subdomenii
  • Despre cum construim un site pe un domeniu
  • Ce este un URL
  • Browsere: prezentare
    • Chrome
    • Firefox
    • Edge
    • Opera
    • Altele
    • Diferențe (caniuse)
  • Anatomia unei pagini
    • Header
    • Elemente de branding
    • Main Navigation
    • Zona de content
    • Sidebars
    • Footer
• Codul sursă
  • View source
  • Inspect element
    • selectare
    • poziționare și configurare „developer tools”
    • cum interpretăm codul sursă
• Terminologie web
• Editare cod
  • Despre editoare
  • Cum alegem un editor
  • Comparații între editoare
    • Notepad++
    • Brackets
    • Sublime Text
    • Visual Code Studio
    • Atom
  • Editoare în browser
    • Codepen
    • JSFiddle
• Organizare cod
  • Importanța formatării corecte a codului
  • Despre indentare
  • Introducere în Emmet
• Fișiere
  • Tipuri de extensii
    • html
    • css
    • htm
    • php
    • jpg/png/svg
    • Paths și URLs
    • Absolute și relative paths și URLs
• HTML
  • Ce este HTML – scurt istoric
  • Sintaxa HTML
  • Elemente HTML de bază
    • doctype
    • html
    • head
    • body
    • title
    • elemente meta
    • link
    • h1-h6 / headings
    • div
    • p
    • a
    • ul
    • ol
    • li
    • b / strong
    • i / em
    • form
    • input
      • tipuri de inputs
    • textarea
    • button
    • select
  • Elemente block și inline
  • Atribute principale
    • Class
    • ID
    • Title
    • Style
    • Atribute de internaționalizare
  • Semantică (HTML 5)
    • Rolul elementelor semantice
    • Elemente semantice
      • main
      • nav
      • aside
      • article
      • nav
      • header
      • footer
      • section
    • Roles
      • article
      • banner
      • button
      • navigation
      • contentinfo
      • main
      • search
      • complementary
      • form
  • Text encoding
  • Coduri de limbă
  • Coduri de țară
• CSS
  • Ce este CSS
  • Cum se utilizează / implementează
  • Sintaxă
  • Selectoare de bază
    • element
    • class
    • ID
    • selectoare multiple
    • pseudo-selectoare
    • atribute
  • Proprietăți CSS de bază
    • height
    • width
    • background
    • color
    • border
    • font
    • margin
    • padding
    • z-index
    • display
    • position
    • list-style
    • line-height
    • float
    • box-sizing
  • Valori CSS de bază
    • Unități de măsură
    • Culori
  • Fonturi pentru web
    • Tipuri de fonturi
      • serif, sans-serif, cursive, monospace
    • Fonturi web-safe
    • Font weights
    • Font styles
    • Introducere Google Fonts
• Media
  • Tipuri de media
    • Imagini
      • jpg, png
      • webp, avif
      • Compatibilitate browsere
    • Video
    • Audio
    • Vectori / SVG
  • Surse gratuite de media
    • Imagini
    • Video
    • Audio
  • Utilizare și inserare media
• Introducere în responsive design
• Ce este responsive design
  • Introducere în breakpoints
    • media queries
    • Cum stabilim breakpoints
  • Responsive media
• Resurse web design

Training grafică pentru web design

Acest modul a fost conceput pentru cei ce-și doresc să învețe mai multe despre grafica pentru web design. Dacă inserarea unei imagini în cod este relativ simplă, prelucrarea și optimizarea pot fi considerate procese complexe. La finalul acestui modul, cursantul ar trebui să știe să prelucreze imagini folosind aplicații precum Photoshop și sa realizeze vectori svg în Figma sau Adobe XD. Nu este un modul despre creativitate, ci abordează latura tehnică a designului grafic pentru web.

Notă: unele aplicații necesită plata unui abonament. De exemplu, Adobe Photoshop este o unealtă premium, ce oferă însă o versiune de încercare pentru 7 zile. Pentru a contracta perioada de încercare, este posibil ca Adobe să necesite crearea unui profil cu adăugarea unei forme de plată (de pildă card de credit sau de debit).

Iată cuprinsul:

• Unelte de prelucrare pentru desktop
  • Adobe Photoshop
    • Introducere
    • Deschidere sau import documente
    • Salvare și export documente
    • Unitățile de măsură ale elementelor
    • Prezentarea canvas
    • Interfață
    • Prezentarea meniului principal
    • Bara de unelte
      • Move
      • Text
      • Shape
      • Crop
      • Pencil
      • Selection
      • Zoom
    • Bara de opțiuni
    • Redimensionare imagini
    • Crop imagini
    • Panelul de layere
    • Ce sunt layerele
      • Lock / unlock
      • Opacitate
      • Stabilirea ordinii layerelor
      • Crearea de noi layere
      • Organizare layerelor în foldere
      • Layer style
        • Color overlay
        • Stroke
        • Gradient
        • Drop Shadow
    • Ștergere background
    • Alinierea obiectelor în canvas
    • Adăugare și prelucrare text
      • Selectare font
      • Dimensiuni font
      • Culoare font
      • Distanța dintre caractere
      • Grosimi de font
      • Aliniere text
    • Lucrul cu forme (shapes)
      • Prezentarea formelor disponibile
      • Dreptunghiuri și pătrate
      • Cercuri și elipse
      • Linii
      • Umplere folosind culoare
      • Stroke (bordură)
    • Crearea unui grid
  • Figma
    • Introducere
    • Cum ne poate ajuta
    • Surse SVG / media pentru Figma
    • Deschidere sau import elemente
    • Salvare sau export elemente
    • Crearea unui „icon”
    • Optimizare SVG
• Aplicații în browser
  • Pixlr
  • Sumo app
  • Alternative
• Optimizare imagini
  • Ce înseamnă optimizarea
  • De ce este importantă
  • Lossy vs. lossless
  • Unelte de optimizare
    • Aplicații desktop
      • ImageOptim / FileOptimizer
      • Caesium
      • Riot
    • Aplicații în browser
      • Squoosh
      • Compressor
      • TinyPNG
      • Kraken
  • Ce este EXIF data
  • Optimizare nume fișiere