The document discusses best practices for web development, including building a solid foundation with fonts, sizes, colors and utilities; using proper spacing and layout; naming everything consistently; and avoiding technical debt. It recommends establishing clarity, scope and structure at the start of a project to set developers up for success and allow for clean, readable code.

1. NoCode ≠ NoDevelopment
@veritystothard

4. What is good web
development?

5. Empathetic
good development is,

6. The goal:
clean, readable code

7. The goal:
clean, readable code

8. The goal:
clean, readable code

9. Get data on our user

10. Populate form fields
with data

11. On click,
submit the form!

12. Setting your developer
up for success

13. Clarity
Scope
Kickoffs

15. Ok, build time!

16. #1 Build your base

17. Fonts Sizes Colors

18. #2 Build your utilities

19. Tip #1
small scope &
are highly reusable

20. #3 create visibility

24. #4 Global means global
(and specificity is king)

36. #5 keep like concerns together

37. 0424 000 000
example@someemail.com

38. #6 Name everything, (everything)
(and use ID’s for Javascript)

39. 0424 000 000
example@someemail.com

40. #7 the internet is rectangles

42. Navigation

43. Hero
Navigation

44. Hero content
Logo Nav Links CTA

45. #8 give me space

46. Alfie McDoggo
Treat Quality Assurance Tester
The Component
(with internal spacing)
20px
20px
20px

47. Alfie McDoggo
Treat Quality Assurance Tester
The component
(with internal spacing)
Alfie McDoggo
Treat quality assurance tester
Littlest Bean
Sulking expert
Sad Boi
Nap time location scout
In layout
(layout spacing
outside component)
20px
20px
20px
20px
20px
20px
20px
20px
20px
20px
20px
20px
20px
20px

48. #9 build a landing page builder

54. Ok, so now what?

55. Living with tech debt
Good, better, best

56. • ‘Quick hack’ culture is hard to recover
• Don’t ‘hack and forget’
• Consider the true cost of tech debt

57. The true cost of tech debt:
• Fragile, unreliable (No)Code
• Slowed development time
• Poor developer experience / morale

58. HTML & CSS Foundations
https://skl.sh/2FUOh3K
@veritystothard
Learn with me
Thank you UnDraw for the lovely illustrations used in this presentation