Post on 15-Apr-2017
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
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Front-end - HTML, CSS i JavaScript
Front-end: pierwsza praca w HTML5, CSS3 i JavaScript
Przykładowa oferta pracy
Jak ją widzimy
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)
Jak widzi ją pracodawca
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)
Jeśli znacie CSSa, na pewno ogarniecie SASSa
Jeśli znacie CSSa, na pewno ogarniecie SASSa i ktoś Wam w firmie w tym pomoże
A co, gdy wymagają doświadczenia?
Daj sobie 3 miesiące przed zgłoszeniem do firmy
Spróbuj zrobić jakąś prostą funkcjonalność
- 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ć:
Inspiracja jest wszędzie
Paradoksalnie... wyjrzyj za okno, przeczytaj nową książkę, dowiedz się czegoś nowego, poznaj nowych ludzi
Nie masz pomysłu? Zapytaj
Przyjdź na jakiś hackaton/warsztat/konferencję
Zacznij eksperymentować, pisać, podpatrywać kod innych, naśladować
Obserwuj to, co dzieje się w branży, na Twitterze etc.
Nie bój się utrzymywać kontaktu! Mów innym ludziom, że ich praca jest ok.
Nie masz dużo czasu (rodzina, dzieci, obecna praca), daj sobie 6+ miesięcy
Po tym okresie roześlij CV
Uważaj na to, jak wyglądają Twoje maile
Staraj się nie pomijać żadnej z prac w CV, nawet jeśli nie są z IT
Bądź konkretny, jeśli chodzi o umawianie się na rozmowę, staraj się nie przekładać więcej niż raz
Nie umawiaj się na Hangout/telefon, kiedy wiesz, że będziesz wtedy np. w autobusie
Jak zachować się na rozmowie?
Nie spóźniaj się
Pochwal się tym, co zrobiłeś, lecz nie popadaj w megalomanię. subtelnie pokaż, że pasjonuje Cię front-end
Bądź aktywny w dyskusji unikaj opowiadania tak/nie
Nie mów dla samego mówienia, broń się umiejętnościami technicznymi
Bądź na czasie, daj znać, co czytasz, skąd czerpiesz informacje
W przypadku kodowania, informuj na bieżąco, co robisz…
Orientuj się w technologiach fajnie jeśli znasz chociaż ich nazwy
Staraj się opowiedzieć o swoich projektach jak najwięcej, bądź przygotowany na pytania o trudnościach i problemach podczas
pracy nad nimi
Rozmawiaj szczerze o pieniądzach. Pytaj. Nie czyń jednak tego tematu głównym Twojej rekrutacji.
To po prostu źle wygląda.
Przygotuj się na krótką rozmowę po angielsku
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
A co, jeśli chodzi o zadania techniczne?
Semantyczny HTML dlaczego <div> a nie <footer>?
czy zawsze stosujemy atrybut alt? kiedy może być pusty? dlaczego klasa „left-column” jest zła?
Wiedza o Responsive Web Design co to jest?
co to media queries? jak opiszesz działanie RWD?
jak zapisywać breakpointy (em vs px?)
Podstawowe zasady pisania kodu
Pytania o box modelco to box-sizing?
co zmienia dodanie paddingu do diva?
Robienie layoutów dlaczego float nie jest idealny?
co to jest flexbox?
Specificity
Dodatkowe punkty za atrybuty ARIA
nowinki z WHATWG sass
JavaScript?
Fizz buzz
Dodawanie eventów i różnica między onclick=„funkcja()” i addEventListener
Jak zablokować wysyłania formularza
Podstawowa wiedza o jQuery
Zaprogramowanie mini aplikacji dodającej coś do drzewa DOM a’la TODO list
Dodatkowe punkty za podstawy: git
gulp grunt
A dla seniora?
Krytycyzm, konswerwatyzm, ostrożność
wiedza o wzorcach programowania
wiedza o protokole HTTP
wiedza o CORS
Optymalizacja renderingu strony
Optymalizacja zużywania pamięci (np. object pool)
umiejętność przejścia po drzewie DOM – tzw. traversing
Umiejętność posługiwania się ::after, ::before, :not(.class)
różnice między setTimeout, requestAnimationFrame
różnice miedzy SVG, webGL, canvas
Jakie książki 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
Jeśli programowaliście już w innych językach niż JS…
Inne?
Dostałem/Dostałam się, co dalej?
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Co musisz wiedzieć o HTML-u i CSS jako front-end
developerDamian Wielgosik