3+ steps you should know before going for front end position. Talk I gave in Riga Front end meetup on 1st of November, 2017.

1. How to get a serious
front end designer job

2. Confidence

3. Learn CSS
Fundamentals
Be
Modular
Learn
Fast

5. Learn CSS
Fundamentals

6. Box Model Floating Positioning

7. Box Model Floating Positioning
max/min/width
max/min/height
padding
margin
border
box-sizing
background-origin
float
clear
overflow
text-overflow
display
position
Left, right, top,
bottom
translate

8. Simple question
Code
Result?
100% Browser width
Chrome Inspector

10. Test yourself
Box-Model:
● Difference between content & padding box?
● When to use padding, when margin?
● Where goes :before & :after elements in box model?
Floating:
● What's normal document flow (what you have to deal with)?
● What does clear do?
● Develop a landing page without using floats?
Positioning:
● What's default positioning state?
● How you position things absolute?
● Is it OK to translateXY fixed element or its parent?

11. Be Modular

12. In mind Filesystem CSS
Modular

13. Modular
In mind

17. Modular
filesystem

18. CSS with 5000 code lines

19. Problems
1. Time to start fixing real issue.
2. Identifying obsolete CSS
3. Easy to hide dirty code

20. Use Sass

21. Use Sass
DRYDon't repeat yourself

22. Warnings
1. 300+ code lines
2. Tool is just a tool, it's not a goal.

23. Modular
CSS

26. Modified
element

27. Naming Convention
WRONGRIGHT

28. Why?
1. Don't let you make mistakes.
2. Self-sufficient component
3. Handles specificity

29. Learn Fast

31. WCAG 2.0 compatible?
Icon-fonts or SVG icons? WHY?
Tabs VS Spaces
PleaseimproveSEO
A tag vs button?
Do we need all those favicons?
W
hat'sInvision?
Can
you
do
UX?
Pattern
lab
or Bootstrap
Adaptive vs Responsive
Gulp vs Grunt vs Broccoli vs Mimosa
Sass, Scss, Less, Css, js inline Css
CSSWizardy
Smashing
Magazine

32. WCAG 2.0 compatible?
Icon-fonts or SVG icons? WHY?
Tabs VS Spaces
PleaseimproveSEO
A tag vs button?
Do we need all those favicons?
W
hat'sInvision?
Can
you
do
UX?
Pattern
lab
or Bootstrap
Adaptive vs Responsive
Gulp vs Grunt vs Broccoli vs Mimosa
Sass, Scss, Less, Css, js inline Css
CSSWizardy
Smashing
Magazine
EXPERT

33. Expert or T-shaped person

34. Twitter Feedly (RSS) Podcasts
Stay up to date
@SaraSoueidan
@rachelandrew
@una
@cassidoo
@rachsmithtweets
alistapart.com
css-tricks.com
smashingmagazine.com
webdesignernews.com
habrahabr.ru
YouTube conference talks
styleguides
responsivewebdesign

35. Learn CSS
Fundamentals
Be
Modular
Learn
Fast

36. Socialize
Just start with...

37. HI, my name is …
< YOUR NAME HERE >
I like/love/have… <the thing>

38. Thank You | karlisup.com/get-job
CSS: Page Layouts - Lynda.com course about CSS Fundamentals
Gulp + Sass - tarter pack hosted on Github
Atomic Design (folder structure) - organize your components
Frontend Rescue - how to follow front end trends
CSS Methodologies - introduction by Matt Stauffe
Design is a Job (Audiobook) - a lot and useful tips
caniuse.com - Browser support tables for modern web technologies