Co musisz wiedzie‡ o HTML-u i CSS jako front-end developer

download Co musisz wiedzie‡ o HTML-u i CSS jako front-end developer

of 126

  • date post

    15-Apr-2017
  • Category

    Software

  • view

    5.403
  • download

    1

Embed Size (px)

Transcript of Co musisz wiedzie‡ o HTML-u i CSS jako front-end developer

  • Co musisz wiedzie o HTML-u i CSS jako front-end

    developerDamian Wielgosik

  • By Damian Wielgosik

    Nokia

    Roche

    ferrante.pl

    Front-Trends

    SiteSell

    javascript.plmeet.js

    Falsy Values

    @varjsotwartasiec.pl

    Functionite founder, trainer

    airbnb

    meet.js

  • http://functionite.com

    http://functionite.com

  • http://ferrante.pl/books/html/

    http://ferrante.pl/books/html/

  • http://kodu.je

    http://kodu.je

  • http://kodu.je/dobre_praktyki_html_i_css.html

    http://kodu.je/dobre_praktyki_html_i_css.html

  • Chcesz doda obrazek do strony?Uywasz znacznika z HTML, bodo tego go stworzono

    Front-end - HTML, CSS i JavaScript

  • Front-end: pierwsza praca w HTML5, CSS3 i JavaScript

  • Przykadowa oferta pracy

  • Jak j widzimy

  • Chcesz doda obrazek do strony?Uywasz znacznika z HTML, bodo tego go stworzono

    Kogo szukamy? Jeli rozpoznajesz wikszo z poniszych zagadnie, spotkajmy si: - Umiejtno tworzenia semantycznie poprawnych dokumentw HTML - Obsuga programw graficznych Adobe (Photoshop / Illustrator) - Znajomo zagadnie RWD - Dobra znajomo technologii webowych (SASS/CSS, HTML5) - Znajomo frameworkw (Boostrap, Foundation etc.) - Umiejtno pracy z Gitem - Znajomo dobrych praktyk kodowania (DRY, KISS)

  • Jak widzi j pracodawca

  • Kogo szukamy?

    Jeli rozpoznajesz wikszo z poniszych zagadnie, spotkajmy si: - Umiejtno tworzenia semantycznie poprawnych dokumentw HTML

    - Obsuga programw graficznych Adobe (Photoshop / Illustrator)

    - Znajomo zagadnie RWD

    - Dobra znajomo technologii webowych (SASS/CSS, HTML5)

    - Znajomo frameworkw (Boostrap, Foundation etc.)

    - Umiejtno pracy z Gitem

    - Znajomo dobrych praktyk kodowania (DRY, KISS)

  • Jeli znacie CSSa, na pewno ogarniecie SASSa

  • Jeli znacie CSSa, na pewno ogarniecie SASSa i kto Wam w firmie w tym pomoe

  • A co, gdy wymagaj dowiadczenia?

  • Daj sobie 3 miesice przed zgoszeniem do firmy

  • Sprbuj zrobi jak prost funkcjonalno

  • - licznik znakw w formularzu - walidacja formularza (sprawdzenie czy user co wpisa) - kliknicie danego elementu sprawi, e inny si pojawi (tzw. poka wicej) - rysowanie w - odtwarzanie rnych filmikw w tle strony - podmiana obrazka na stronie co 5 sekund - pokazanie okienka z dwoma przyciskami po klikniciu

    To moe by:

  • Inspiracja jest wszdzie

  • Paradoksalnie... wyjrzyj za okno, przeczytaj now ksik, dowiedz siczego nowego, poznaj nowych ludzi

  • Nie masz pomysu? Zapytaj

  • Przyjd na jaki hackaton/warsztat/konferencj

  • Zacznij eksperymentowa, pisa, podpatrywa kod innych, naladowa

  • Obserwuj to, co dzieje si w brany, na Twitterze etc.

  • Nie bj si utrzymywa kontaktu! Mw innym ludziom, e ich praca jest ok.

  • Nie masz duo czasu (rodzina, dzieci, obecna praca), daj sobie 6+ miesicy

  • Po tym okresie rozelij CV

  • Uwaaj na to, jak wygldaj Twoje maile

  • Staraj si nie pomija adnej z prac w CV, nawet jeli nie s z IT

  • Bd konkretny, jeli chodzi o umawianie si na rozmow, staraj si nie przekada wicej niraz

  • Nie umawiaj si na Hangout/telefon, kiedy wiesz, e bdziesz wtedy np. w autobusie

  • Jak zachowa si na rozmowie?

  • Nie spniaj si

  • Pochwal si tym, co zrobie, lecz nie popadaj w megalomani. subtelnie poka, e pasjonuje Ci front-end

  • Bd aktywny w dyskusji unikaj opowiadania tak/nie

  • Nie mw dla samego mwienia, bro si umiejtnociami technicznymi

  • Bd na czasie, daj zna, co czytasz, skd czerpiesz informacje

  • W przypadku kodowania, informuj na bieco, co robisz

  • Orientuj si w technologiach fajnie jeli znasz chocia ich nazwy

  • Staraj si opowiedzie o swoich projektach jak najwicej, bd przygotowany na pytania o trudnociach i problemach podczas

    pracy nad nimi

  • Rozmawiaj szczerze o pienidzach. Pytaj. Nie czy jednak tego tematu gwnym Twojej rekrutacji.

    To po prostu le wyglda.

  • Przygotuj si na krtk rozmowpo angielsku

  • Wypowiedzi, ktrych warto unika

    suchajcie, a co tak w ogle robi Wasza firma?(przerywa), suchajcie, mam 30 minut, przejdmy moe do spraw finansowych

    (po przeczytaniu zadania) a, to bdzie atwe, miaem to

    nie wiem czy jest sens bym Wam o tym mwi, pewnie to wiecie

    widz to tak: zgodz si na juniora, jeli po 4 miesicach wskocz na poziom seniora

  • A co, jeli chodzi o zadania techniczne?

  • Semantyczny HTML dlaczego a nie ?

    czy zawsze stosujemy atrybut alt? kiedy moe by pusty? dlaczego klasa left-column jest za?

  • Wiedza o Responsive Web Design co to jest?

    co to media queries? jak opiszesz dziaanie RWD?

    jak zapisywa breakpointy (em vs px?)

  • https://www.youtube.com/watch?v=H7LUUsbpbrg

    https://www.youtube.com/watch?v=H7LUUsbpbrg

  • Podstawowe zasady pisania kodu

  • Pytania o box modelco to box-sizing?

    co zmienia dodanie paddingu do diva?

  • Robienie layoutw dlaczego float nie jest idealny?

    co to jest flexbox?

  • Specificity

  • Dodatkowe punkty za atrybuty ARIA

    nowinki z WHATWG sass

  • JavaScript?

  • Fizz buzz

  • Dodawanie eventw i rnica midzy onclick=funkcja() i addEventListener

  • Jak zablokowa wysyania formularza

  • Podstawowa wiedza o jQuery

  • Zaprogramowanie mini aplikacji dodajcej co do drzewa DOM ala TODO list

  • Dodatkowe punkty za podstawy: git

    gulp grunt

  • A dla seniora?

  • Krytycyzm, konswerwatyzm, ostrono

  • wiedza o wzorcach programowania

  • wiedza o protokole HTTP

  • wiedza o CORS

  • Optymalizacja renderingu strony

  • Optymalizacja zuywania pamici (np. object pool)

  • umiejtnoprzejcia po drzewie DOM tzw. traversing

  • Umiejtno posugiwania si ::after, ::before, :not(.class)

  • Eventy layout, paint, composition https://csstriggers.com

    https://csstriggers.com

  • rnice midzy setTimeout, requestAnimationFrame

  • rnice miedzy SVG, webGL, canvas

  • schema.org, json-ld.org

    http://schema.org/http://json-ld.org/

  • Jakie ksiki czyta?

  • Speaking JavaScript

  • CSS Secrets

  • Eloquent JavaScript

  • Eloquent JavaScript

  • Illustrated Guide to Front-End

    Development

  • Illustrated Guide to Front-End

    Development

  • Maintainable JavaScript Writing Readable Code

  • Effective JavaScript

  • Jeli programowalicie ju w innych jzykach ni JS

  • http://jstherightway.org/

    http://jstherightway.org/

  • http://jsforcats.com/

    http://jsforcats.com/

  • http://diveintohtml5.info/index.html

    http://diveintohtml5.info/index.html

  • http://jsbooks.revolunet.com/

    http://jsbooks.revolunet.com/

  • http://hakim.se/experiments

    http://hakim.se/experiments

  • Inne?

  • https://frontendfront.com

    https://frontendfront.com

  • http://webplatformdaily.org/

    http://webplatformdaily.org/

  • http://javascriptweekly.com

    http://webplatformdaily.org/

  • http://ferrante.pl

    http://ferrante.pl

  • http://css-weekly.com

    http://css-weekly.com

  • http://uptodate.frontendrescue.org/

    http://uptodate.frontendrescue.org/

  • http://codecademy.com/

    http://codecademy.com/

  • summit.meetjs.pl

    http://summit.meetjs.pl

  • Dostaem/Dostaam si, co dalej?

  • Chcesz doda obrazek do strony?Uywasz znacznika z HTML, bodo tego go stworzono

  • http://kodu.je

    http://kodu.je

  • Co musisz wiedzie o HTML-u i CSS jako front-end

    developerDamian Wielgosik