The opening keynote presentation for the Frontmania 2023 conference. Web development has evolved significantly since its inception. Today, the front-end landscape is a vast and ever-expanding territory, constantly undergoing change. The question that is likely on everyone's mind is, "How can I shape my front-end development career most effectively?" With numerous topics to learn and a multitude of options to choose from, it can be challenging to determine which skills are truly valuable and where to invest your time. This presentation aims to assist you in charting your personal journey toward becoming a proficient front-end professional. It will endeavour to address critical questions such as, "What defines a great front-end developer?" and "How can one achieve mastery in front-end development?”

1. T H E R O A D T O
F R O N T- E N D M A S T E RY
B O B B Y VA N D E R S L U I S

2. W E ’ R E A L L O N A P E R S O N A L J O U R N E Y
T O B E C O M E A M O R E P R O F I C I E N T
F R O N T- E N D C R A F T S P E R S O N

3. T H E W E B I S T H E M O S T P O W E R F U L
A N D V E R S AT I L E P L AT F O R M F O R
B U I L D I N G U S E R I N T E R FA C E S
+
D E L I V E R I N G T H E M T O T H E
W I D E S T P O S S I B L E A U D I E N C E

4. T H E F R O N T- E N D
L A N D S C A P E
I S A VA S T A N D
E V E R - E X PA N D I N G
T E R R I T O RY,
C O N S TA N T LY
U N D E R G O I N G
C H A N G E

5. F R O N T- E N D D E V E L O P M E N T E N C O M PA S S E S
M A N Y T I N Y D E C I S I O N S T H AT A R E O F T E N O V E R L O O K E D
B U T A R E V E RY I M P O R TA N T

6. T H E R E I S N O O N E A B S O L U T E
B E S T WAY T O D O T H I N G S

7. A L L N I C E , B U T…
H O W D O I B E C O M E A
F R O N T- E N D S U P E R S TA R ?

8. B Y G R O W I N G A D I V E R S E &
B A L A N C E D S K I L L S E T

9. L E A R N W H AT Y O U N E E D F O R
Y O U R D AY- T O - D AY W O R K
+
C O N T I N U O U S LY G R O W Y O U R
F O U N D AT I O N A L S K I L L S
P R A G M AT I C A P P R O A C H

10. 6 F O U N D AT I O N A L S K I L L P I L L A R S

11. H T M L + C S S + J S
P I L L A R 1 :
C O R E W E B T E C H N O L O G I E S

12. N E G L E C T I N G S E M A N T I C S
D I S R E G A R D I N G W H AT
Y O U G E T F O R F R E E
O V E R L O O K I N G
A C C E S S I B I L I T Y
D O N ’ T U N D E R E S T I M AT E
T H E P O W E R O F H T M L

13. O R T H E C O M P L E X I T Y O F C S S
G L O B A L S C O P E , I N H E R I TA N C E ,
S P E C I F I C I T Y, T H E C A S C A D E
S H E E R A M O U N T O F S E L E C T O R S ,
P R O P E R T I E S & VA L U E S
M A N Y WAY S O F A C H I E V I N G
L AY O U T S & R E S P O N S I V E N E S S

14. D E V T O O L S
C O M PAT I B I L I T Y
S TA N D A R D I S AT I O N
D I V E I N T O W E B B R O W S E R S

15. W E B C O M P O N E N T S
2 D C A N VA S
S V G
H T T P
B E Y O N D T H E B A S I C S

16. A D VA N C E D A P I S & F O R M AT S
W E B G L & W E B G P U
W E B A U D I O
W E B & S E R V I C E W O R K E R S
W E B A S S E M B LY

17. E X P R E S S I V E N E S S
E N A B L E U S T O C R E AT E
W H AT W E WA N T
P I L L A R 1 :
C O R E W E B T E C H N O L O G I E S

18. A L L T H AT C O N S T I T U T E S A
G R E AT U S E R E X P E R I E N C E
P I L L A R 2 :
G R E AT U X

19. Q U A L I T Y C O N T E N T
U S E R - C E N T R E D D E S I G N
V I S U A L A P P E A L
C O N S I S T E N C Y
I N T U I T I V E I N T E R A C T I O N S
S U P E R B C O N T E N T & D E S I G N

20. C O M P U T I N G D E V I C E S
S C R E E N S
I N P U T M E C H A N I S M S
R E S P O N S I V E N E S S
P E R F O R M A N C E
A N A B U N D A N C E O F H A R D WA R E

21. A C C E S S I B I L I T Y
C O U N T R I E S , R E G I O N S &
L A N G U A G E S
U S E R P R E F E R E N C E S
N O N - H U M A N U S E R S
A L L K I N D S O F P E O P L E

22. P U R P O S E
G U I D E U S I N M A K I N G
D E C I S I O N S
P I L L A R 2 :
G R E AT U X

23. B R E A K I N G C O M P L E X P R O B L E M S
D O W N T O S M A L L E R PA R T S ,
C O M P O S I N G T H O S E S M A L L E R
S O L U T I O N S T O G E T H E R T O
F O R M Y O U R W E B S I T E O R A P P
P I L L A R 3 :
S O F T WA R E C O M P O S I T I O N

24. P R O G R A M M I N G C O N C E P T S
B E S T P R A C T I C E S
A R C H I T E C T U R E &
D E S I G N PAT T E R N S
S O F T WA R E D E S I G N &
A R C H I T E C T U R E

25. S C A L A B I L I T Y
M A I N TA I N A B I L I T Y
S I M P L I C I T Y
S E C U R I T Y
F U T U R E - P R O O F I N G
T E C H N I C A L R E Q U I R E M E N T S

26. U I C O M P O N E N T S
D E S I G N T O K E N S
AT O M I C D E S I G N
D E S I G N S Y S T E M S
U I R E U S E &
S TA N D A R D I S AT I O N

27. S T R U C T U R E
G U I D E U S I N M A K I N G
D E C I S I O N S
P I L L A R 3 :
S O F T WA R E C O M P O S I T I O N

28. A L L S O F T WA R E A N D
T E C H N O L O G I E S U S E D T O
C R E AT E , T E S T & O P T I M I S E
W E B S I T E S A N D A P P S
P I L L A R 4 :
T O O L I N G

29. C O D E E D I T O R S
V E R S I O N C O N T R O L S Y S T E M S
B R O W S E R D E V T O O L S
J AVA S C R I P T R U N T I M E S
PA C K A G E M A N A G E R S
TA S K R U N N E R S
B U I L D T O O L S
L I B R A R I E S
F R A M E W O R K S
C O M P I L E R S
T O O L I N G G A L O R E
P R E / P O S T- P R O C E S S O R S
S TAT I C S I T E G E N E R AT O R S
L I N T E R S & F O R M AT T E R S
T E S T I N G & D E B U G G I N G T O O L S
C I / C D P I P E L I N E S
C O N T E N T M G T S Y S T E M S
C O N T E N T D E L I V E RY N E T W O R K S
D O C U M E N TAT I O N S Y S T E M S
A 1 1 Y & P E R F T O O L S
D E S I G N & P R O T O T Y P I N G T O O L S

30. I N N O VAT I O N
V S .
F R A G M E N TAT I O N
S O L U T I O N S ≫ P R O B L E M S

31. A U T O M AT E M U N D A N E TA S K S
D O N ' T R E I N V E N T T H E W H E E L
D E V E L O P E R E X P E R I E N C E
E N A B L E T E A M
C O L L A B O R AT I O N
F O C U S O N C O R E A C T I V I T I E S
W H Y W E U S E T O O L S

32. T H I N G S N E E D E D F O R Y O U R
D AY- T O - D AY W O R K
C O D E E D I T O R
J AVA S C R I P T R U N T I M E
V E R S I O N C O N T R O L
C O M M A N D - L I N E S C R I P T I N G
P R A G M AT I C A P P R O A C H

33. C O M P E T I N G T O O L S
I N N O VAT I O N S
B E N E F I T S V S . C O S T S
U N D E R S TA N D I N G T H E
L A N D S C A P E
D I V E R S I F Y I N G Y O U R T O O L
S K I L L P O R T F O L I O
B E Y O N D T H E B A S I C S

34. T H E C U S T O M E R ( U X )
T H E O R G A N I S AT I O N
( Q U A L I T Y R E Q U I R E M E N T S )
T H E D E V E L O P E R ( D X )
T O O L S E L E C T I O N :
B E N E F I T S W H O ?

35. P U T T I N G T H E S O L U T I O N
B E F O R E T H E P R O B L E M
T O O M U C H F O C U S O N
D E V E L O P E R B E N E F I T S
N O T C O N S I D E R I N G
H I D D E N C O S T S
I G N O R I N G S I M P L I C I T Y
T O O L S E L E C T I O N :
C O M M O N I S S U E S

36. T O O L S A R E J U S T A M E A N S T O
A N E N D
FA S H I O N A B L E I N D U S T RY
G R AV E YA R D W I T H PA S T T O O L S
C O R E W E B T E C H N O L O G I E S
A R E E L E M E N TA L G O D S ,
T O O L S A R E M O R TA L H E R O E S
A LWAY S R E M E M B E R

37. P R O D U C T I V I T Y
A L L O W U S T O F O C U S O N
O U R C O R E A C T I V I T I E S
E N A B L E T E A M
C O L L A B O R AT I O N
P I L L A R 4 :
T O O L I N G

38. S O F T S K I L L S : 2 F O U N D AT I O N A L P I L L A R S

39. T H E S K I L L I N M A N U A L LY M A K I N G
G R E AT H I G H - Q U A L I T Y P R O D U C T S
P I L L A R 5 :
C R A F T S M A N S H I P

40. AT T E N T I O N T O D E TA I L S & P R E C I S I O N
D E S I G N S E N S I T I V I T Y
E Y E F O R T H E B I G G E R P I C T U R E
P R A G M AT I C & C U R I O U S
A I M I N G F O R H I G H Q U A L I T Y
A R T I S A N T R A I T S

41. L E A R N I N G B Y D O I N G &
E X P E R I M E N T I N G
D E A L I N G W I T H
C O N S TA N T C H A N G E
Y O U A R E N E V E R D O N E
L E A R N I N G & I M P R O V I N G
S H A R I N G I D E A S & C O D E
G E T T I N G C O M F O R TA B L E

42. U N L O C K I N G Y O U R
I N N E R A R T I S A N
WAY O F W O R K I N G &
T H I N K I N G
P I L L A R 5 :
C R A F T S M A N S H I P

43. E F F E C T I V E LY W O R K I N G
W I T H T E A M M E M B E R S &
S TA K E H O L D E R S
P I L L A R 6 :
C O L L A B O R AT I O N

44. C O M M O N G O A L S
C O L L E C T I V E > I N D I V I D U A L
E F F E C T I V E C O M M U N I C AT I O N
E M PAT H Y
F L E X I B I L I T Y & A D A P TA B I L I T Y
B U I L D I N G T R U S T
B E I N G A T E A M P L AY E R

45. B E T W E E N B U S I N E S S , D E S I G N ,
C O N T E N T & B A C K - E N D
B R I D G I N G R O L E

46. E F F E C T I V E N E S S
O R G A N I S AT I O N A L I M PA C T
P I L L A R 6 :
C O L L A B O R AT I O N

47. G R O W I N S E N I O R I T Y &
S A L A RY
M O R E R E S P O N S I B I L I T I E S &
FA C I L I TAT I O N
C H A N G E I N F O C U S
C A R E E R L A D D E R

48. P R O D U C T
A R C H I T E C T U R E
T E C H M A N A G E M E N T
S TA F F / P R I N C I PA L
N E W AV E N U E S

49. E X P E R T I N A C E R TA I N A R E A
A WA R E N E S S O F W H AT Y O U
K N O W & D O N ’ T K N O W
B E C O N F I D E N T & P R A G M AT I C
PA R T O F T H E J O U R N E Y
I M P O S T O R S Y N D R O M E

50. – S T E P H E N M C C R A N I E
“ A M A S T E R H A S FA I L E D M O R E T I M E S
T H A N T H E B E G I N N E R H A S E V E N T R I E D ”

51. P R O F I C I E N C Y
G A I N E D T H R O U G H
S U S TA I N E D P R A C T I C E
R E C O G N I T I O N
H U M I L I T Y: Y O U A R E
N E V E R D O N E L E A R N I N G
M A S T E RY

52. – B E N J A M I N F R A N K L I N
“ A M A S T E R U S E S H I S E Y E S A N D E A R S
M O R E T H A N B O T H H I S H A N D S ”

53. T H I N K I N G B E F O R E A C T I O N
C O M P R E H E N S I O N &
I N T U I T I O N
M E N T O R S H I P
P U S H I N G B O U N D A R I E S
M A S T E RY

54. # 1 C O R E W E B T E C H N O L O G I E S
# 2 G R E AT U X
# 3 S O F T WA R E C O M P O S I T I O N
# 4 T O O L I N G
# 5 C R A F T S M A N S H I P
# 6 C O L L A B O R AT I O N
E X P R E S S I V E N E S S
P U R P O S E
S T R U C T U R E
P R O D U C T I V I T Y
A R T I S A N RY
E F F E C T I V E N E S S

55. C O N T I N U O U S L E A R N I N G
G R O W I N G A B A L A N C E D
S K I L L S E T
M A S T E RY: A C O M M I T M E N T
O F S U S TA I N E D P R A C T I C E
H AV E F U N & E N J O Y
T H E F R O N T- E N D J O U R N E Y

56. “ L I F E I S A J O U R N E Y T O B E E X P E R I E N C E D ,
N O T A D E S T I N AT I O N T O B E R E A C H E D ”
– B R A D T U R N B U L L

57. Thanks for your attention
#Frontmania