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

Transcript
Page 1: 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

Page 2: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

By Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Functionite founder, trainer

airbnb

meet.js

Page 3: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://functionite.com

Page 4: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

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

Page 5: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://kodu.je

Page 6: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://kodu.je/dobre_praktyki_html_i_css.html

Page 7: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Front-end - HTML, CSS i JavaScript

Page 8: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

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

Page 9: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Przykładowa oferta pracy

Page 10: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jak ją widzimy

Page 11: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Kogo szukamy? Jeśli rozpoznajesz większość z poniższych zagadnień, spotkajmy się: - Umiejętność tworzenia semantycznie poprawnych dokumentów HTML - Obsługa programów graficznych Adobe (Photoshop / Illustrator) - Znajomość zagadnień RWD - Dobra znajomość technologii webowych (SASS/CSS, HTML5) - Znajomość frameworków (Boostrap, Foundation etc.) - Umiejętność pracy z Gitem - Znajomość dobrych praktyk kodowania (DRY, KISS)

Page 12: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jak widzi ją pracodawca

Page 13: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Kogo szukamy?

Jeśli rozpoznajesz większość z poniższych zagadnień, spotkajmy się: - Umiejętność tworzenia semantycznie poprawnych dokumentów HTML

- Obsługa programów graficznych Adobe (Photoshop / Illustrator)

- Znajomość zagadnień RWD

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

- Znajomość frameworków (Boostrap, Foundation etc.)

- Umiejętność pracy z Gitem

- Znajomość dobrych praktyk kodowania (DRY, KISS)

Page 14: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jeśli znacie CSSa, na pewno ogarniecie SASSa

Page 15: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jeśli znacie CSSa, na pewno ogarniecie SASSa i ktoś Wam w firmie w tym pomoże

Page 16: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

A co, gdy wymagają doświadczenia?

Page 17: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Daj sobie 3 miesiące przed zgłoszeniem do firmy

Page 18: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Spróbuj zrobić jakąś prostą funkcjonalność

Page 19: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

- licznik znaków w formularzu - walidacja formularza (sprawdzenie czy user coś wpisał) - kliknięcie danego elementu sprawi, że inny się pojawi (tzw. pokaż więcej) - rysowanie w <canvas> - odtwarzanie różnych filmików w tle strony - podmiana obrazka na stronie co 5 sekund - pokazanie okienka z dwoma przyciskami po kliknięciu

To może być:

Page 20: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Inspiracja jest wszędzie

Page 21: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Paradoksalnie... wyjrzyj za okno, przeczytaj nową książkę, dowiedz się czegoś nowego, poznaj nowych ludzi

Page 22: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 23: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie masz pomysłu? Zapytaj

Page 24: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 25: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Przyjdź na jakiś hackaton/warsztat/konferencję

Page 26: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 27: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 28: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 29: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Zacznij eksperymentować, pisać, podpatrywać kod innych, naśladować

Page 30: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 31: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Obserwuj to, co dzieje się w branży, na Twitterze etc.

Page 32: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie bój się utrzymywać kontaktu! Mów innym ludziom, że ich praca jest ok.

Page 33: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie masz dużo czasu (rodzina, dzieci, obecna praca), daj sobie 6+ miesięcy

Page 34: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Po tym okresie roześlij CV

Page 35: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Uważaj na to, jak wyglądają Twoje maile

Page 36: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Staraj się nie pomijać żadnej z prac w CV, nawet jeśli nie są z IT

Page 37: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Bądź konkretny, jeśli chodzi o umawianie się na rozmowę, staraj się nie przekładać więcej niż raz

Page 38: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie umawiaj się na Hangout/telefon, kiedy wiesz, że będziesz wtedy np. w autobusie

Page 39: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jak zachować się na rozmowie?

Page 40: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie spóźniaj się

Page 41: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Pochwal się tym, co zrobiłeś, lecz nie popadaj w megalomanię. subtelnie pokaż, że pasjonuje Cię front-end

Page 42: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Bądź aktywny w dyskusji unikaj opowiadania tak/nie

Page 43: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Nie mów dla samego mówienia, broń się umiejętnościami technicznymi

Page 44: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Bądź na czasie, daj znać, co czytasz, skąd czerpiesz informacje

Page 45: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

W przypadku kodowania, informuj na bieżąco, co robisz…

Page 46: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Orientuj się w technologiach fajnie jeśli znasz chociaż ich nazwy

Page 47: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Staraj się opowiedzieć o swoich projektach jak najwięcej, bądź przygotowany na pytania o trudnościach i problemach podczas

pracy nad nimi

Page 48: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Rozmawiaj szczerze o pieniądzach. Pytaj. Nie czyń jednak tego tematu głównym Twojej rekrutacji.

To po prostu źle wygląda.

Page 49: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Przygotuj się na krótką rozmowę po angielsku

Page 50: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Wypowiedzi, których warto unikać

słuchajcie, a co tak w ogóle robi Wasza firma?(przerywa), słuchajcie, mam 30 minut, przejdźmy może do spraw finansowych

(po przeczytaniu zadania) a, to będzie łatwe, miałem to

nie wiem czy jest sens bym Wam o tym mówił, pewnie to wiecie

widzę to tak: zgodzę się na juniora, jeśli po 4 miesiącach wskoczę na poziom seniora

Page 51: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

A co, jeśli chodzi o zadania techniczne?

Page 52: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Semantyczny HTML dlaczego <div> a nie <footer>?

czy zawsze stosujemy atrybut alt? kiedy może być pusty? dlaczego klasa „left-column” jest zła?

Page 53: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Wiedza o Responsive Web Design co to jest?

co to media queries? jak opiszesz działanie RWD?

jak zapisywać breakpointy (em vs px?)

Page 54: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 55: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

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

Page 56: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Podstawowe zasady pisania kodu

Page 57: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Pytania o box modelco to box-sizing?

co zmienia dodanie paddingu do diva?

Page 58: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Robienie layoutów dlaczego float nie jest idealny?

co to jest flexbox?

Page 59: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Specificity

Page 60: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 61: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Dodatkowe punkty za atrybuty ARIA

nowinki z WHATWG sass

Page 62: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

JavaScript?

Page 63: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Fizz buzz

Page 64: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Dodawanie eventów i różnica między onclick=„funkcja()” i addEventListener

Page 65: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jak zablokować wysyłania formularza

Page 66: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Podstawowa wiedza o jQuery

Page 67: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Zaprogramowanie mini aplikacji dodającej coś do drzewa DOM a’la TODO list

Page 68: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Dodatkowe punkty za podstawy: git

gulp grunt

Page 69: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

A dla seniora?

Page 70: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Krytycyzm, konswerwatyzm, ostrożność

Page 71: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

wiedza o wzorcach programowania

Page 72: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

wiedza o protokole HTTP

Page 73: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

wiedza o CORS

Page 74: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Optymalizacja renderingu strony

Page 75: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Optymalizacja zużywania pamięci (np. object pool)

Page 76: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

umiejętność przejścia po drzewie DOM – tzw. traversing

Page 77: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Umiejętność posługiwania się ::after, ::before, :not(.class)

Page 78: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

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

Page 79: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 80: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

różnice między setTimeout, requestAnimationFrame

Page 81: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

różnice miedzy SVG, webGL, canvas

Page 82: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

schema.org, json-ld.org

Page 83: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jakie książki czytać?

Page 84: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Speaking JavaScript

Page 85: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 86: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 87: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

CSS Secrets

Page 88: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 89: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Eloquent JavaScript

Page 90: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Eloquent JavaScript

Page 91: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Illustrated Guide to Front-End

Development

Page 92: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Illustrated Guide to Front-End

Development

Page 93: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Maintainable JavaScript Writing Readable Code

Page 94: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 95: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Effective JavaScript

Page 96: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 97: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 98: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 99: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Jeśli programowaliście już w innych językach niż JS…

Page 100: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 101: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 102: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://jstherightway.org/

Page 103: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://jsforcats.com/

Page 104: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://diveintohtml5.info/index.html

Page 105: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://jsbooks.revolunet.com/

Page 106: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://hakim.se/experiments

Page 107: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 108: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 109: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Inne?

Page 110: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 111: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 112: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 113: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

https://frontendfront.com

Page 114: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 115: Co musisz wiedzieć o HTML-u i CSS jako front-end developer
Page 116: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://webplatformdaily.org/

Page 117: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://javascriptweekly.com

Page 118: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://ferrante.pl

Page 119: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://css-weekly.com

Page 120: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://uptodate.frontendrescue.org/

Page 121: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://codecademy.com/

Page 122: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

summit.meetjs.pl

Page 123: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Dostałem/Dostałam się, co dalej?

Page 124: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Page 125: Co musisz wiedzieć o HTML-u i CSS jako front-end developer

http://kodu.je

Page 126: 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