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

4,907 views

Published on

Prezentacja z Warszawskich Dni Informatyki 2016.

Published in: Software
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,907
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
47
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. Co musisz wiedzieć o HTML-u i CSS jako front-end developer Damian Wielgosik
  2. 2. By Damian Wielgosik Nokia Roche ferrante.pl Front-Trends SiteSell javascript.pl meet.js Falsy Values @varjs otwartasiec.pl Functionite founder, trainer airbnb meet.js
  3. 3. http://functionite.com
  4. 4. http://ferrante.pl/books/html/
  5. 5. http://kodu.je
  6. 6. http://kodu.je/dobre_praktyki_html_i_css.html
  7. 7. Chcesz dodać obrazek do strony?
 Używasz znacznika <img> z HTML, bodo tego go stworzono Front-end - HTML, CSS i JavaScript
  8. 8. Front-end: pierwsza praca w HTML5, CSS3 i JavaScript
  9. 9. Przykładowa oferta pracy
  10. 10. Jak ją widzimy
  11. 11. 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)
  12. 12. Jak widzi ją pracodawca
  13. 13. 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)
  14. 14. Jeśli znacie CSSa, na pewno ogarniecie SASSa
  15. 15. Jeśli znacie CSSa, na pewno ogarniecie SASSa i ktoś Wam w firmie w tym pomoże
  16. 16. A co, gdy wymagają doświadczenia?
  17. 17. Daj sobie 3 miesiące przed zgłoszeniem do firmy
  18. 18. Spróbuj zrobić jakąś prostą funkcjonalność
  19. 19. - 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ć:
  20. 20. Inspiracja jest wszędzie
  21. 21. Paradoksalnie... wyjrzyj za okno, przeczytaj nową książkę, dowiedz się czegoś nowego, poznaj nowych ludzi
  22. 22. Nie masz pomysłu? Zapytaj
  23. 23. Przyjdź na jakiś hackaton/warsztat/konferencję
  24. 24. Zacznij eksperymentować, pisać, podpatrywać kod innych, naśladować
  25. 25. Obserwuj to, co dzieje się w branży, na Twitterze etc.
  26. 26. Nie bój się utrzymywać kontaktu!
 Mów innym ludziom, że ich praca jest ok.
  27. 27. Nie masz dużo czasu (rodzina, dzieci, obecna praca), daj sobie 6+ miesięcy
  28. 28. Po tym okresie roześlij CV
  29. 29. Uważaj na to, jak wyglądają Twoje maile
  30. 30. Staraj się nie pomijać żadnej z prac w CV,
 nawet jeśli nie są z IT
  31. 31. Bądź konkretny, jeśli chodzi o umawianie się na rozmowę, staraj się nie przekładać więcej niż raz
  32. 32. Nie umawiaj się na Hangout/telefon, kiedy wiesz, że będziesz wtedy np. w autobusie
  33. 33. Jak zachować się na rozmowie?
  34. 34. Nie spóźniaj się
  35. 35. Pochwal się tym, co zrobiłeś, lecz nie popadaj w megalomanię. subtelnie pokaż, że pasjonuje Cię front-end
  36. 36. Bądź aktywny w dyskusji unikaj opowiadania tak/nie
  37. 37. Nie mów dla samego mówienia,
 broń się umiejętnościami technicznymi
  38. 38. Bądź na czasie, daj znać, co czytasz, skąd czerpiesz informacje
  39. 39. W przypadku kodowania, informuj na bieżąco, co robisz…
  40. 40. Orientuj się w technologiach fajnie jeśli znasz chociaż ich nazwy
  41. 41. Staraj się opowiedzieć o swoich projektach jak najwięcej, bądź przygotowany na pytania o trudnościach i problemach podczas pracy nad nimi
  42. 42. Rozmawiaj szczerze o pieniądzach. Pytaj. Nie czyń jednak tego tematu głównym Twojej rekrutacji. To po prostu źle wygląda.
  43. 43. Przygotuj się na krótką rozmowę po angielsku
  44. 44. 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
  45. 45. A co, jeśli chodzi o zadania techniczne?
  46. 46. Semantyczny HTML dlaczego <div> a nie <footer>? czy zawsze stosujemy atrybut alt? kiedy może być pusty? dlaczego klasa „left-column” jest zła?
  47. 47. Wiedza o Responsive Web Design co to jest?
 co to media queries? jak opiszesz działanie RWD? jak zapisywać breakpointy (em vs px?)
  48. 48. https://www.youtube.com/watch?v=H7LUUsbpbrg
  49. 49. Podstawowe zasady pisania kodu
  50. 50. Pytania o box model
 co to box-sizing?
 co zmienia dodanie paddingu do diva?
  51. 51. Robienie layoutów
 dlaczego float nie jest idealny? co to jest flexbox?
  52. 52. Specificity
  53. 53. Dodatkowe punkty za atrybuty ARIA nowinki z WHATWG sass
  54. 54. JavaScript?
  55. 55. Fizz buzz
  56. 56. Dodawanie eventów i różnica między onclick=„funkcja()” i addEventListener
  57. 57. Jak zablokować wysyłania formularza
  58. 58. Podstawowa wiedza o jQuery
  59. 59. Zaprogramowanie mini aplikacji dodającej coś do drzewa DOM a’la TODO list
  60. 60. Dodatkowe punkty za podstawy: git gulp grunt
  61. 61. A dla seniora?
  62. 62. Krytycyzm, konswerwatyzm, ostrożność
  63. 63. wiedza o wzorcach programowania
  64. 64. wiedza o protokole HTTP
  65. 65. wiedza o CORS
  66. 66. Optymalizacja renderingu strony
  67. 67. Optymalizacja zużywania pamięci (np. object pool)
  68. 68. umiejętność przejścia po drzewie DOM – tzw. traversing
  69. 69. Umiejętność posługiwania się ::after, ::before, :not(.class)
  70. 70. Eventy layout, paint, composition
 https://csstriggers.com
  71. 71. różnice między setTimeout, requestAnimationFrame
  72. 72. różnice miedzy SVG, webGL, canvas
  73. 73. schema.org, json-ld.org
  74. 74. Jakie książki czytać?
  75. 75. Speaking JavaScript
  76. 76. CSS Secrets
  77. 77. Eloquent JavaScript
  78. 78. Eloquent JavaScript
  79. 79. Illustrated Guide to Front-End Development
  80. 80. Illustrated Guide to Front-End Development
  81. 81. Maintainable JavaScript Writing Readable Code
  82. 82. Effective JavaScript
  83. 83. Jeśli programowaliście już w innych językach niż JS…
  84. 84. http://jstherightway.org/
  85. 85. http://jsforcats.com/
  86. 86. http://diveintohtml5.info/index.html
  87. 87. http://jsbooks.revolunet.com/
  88. 88. http://hakim.se/experiments
  89. 89. Inne?
  90. 90. https://frontendfront.com
  91. 91. http://webplatformdaily.org/
  92. 92. http://javascriptweekly.com
  93. 93. http://ferrante.pl
  94. 94. http://css-weekly.com
  95. 95. http://uptodate.frontendrescue.org/
  96. 96. http://codecademy.com/
  97. 97. summit.meetjs.pl
  98. 98. Dostałem/Dostałam się, co dalej?
  99. 99. Chcesz dodać obrazek do strony?
 Używasz znacznika <img> z HTML, bodo tego go stworzono
  100. 100. http://kodu.je
  101. 101. Co musisz wiedzieć o HTML-u i CSS jako front-end developer Damian Wielgosik

×