- What is Font End Engineering? - What does Font End Engineers do? - Can I become a Font End Engineer? - HTML: best practices - CSS: best practices

1. Stepping into the
Front End
Part 1: HTML & CSS

2. What is Front End
Engineering?
Look

3. What is Front End
Engineering?
Feel

4. How can I become one?
Good Design Sense
Great Programming Skill
Awesome Attention to Detail

5. What Front End Engineers
DO!!!
Semantic HyperText Markup Language (HTML) for
structure
Cascading Style Sheets (CSS) for presentation
JavaScript (JS) for behavior and interaction
Cross browser compatibility

6. HTML
HyperText Markup Language

7. HTML
STRUCTURE
&
CONTENT

8. CSS
Cascaded Style Sheet

9. CSS
LAYOUT
&
PRESENTATION

10. JS
JavaScript

11. JS
BEHAVIOUR
&
INTERACTION

12. Best Practices
… are for best people

13. Why Best Practices?
UNDERSTANDABILITY
&
MANAGEABILITY

14. Start with a Logical
Structure

15. Don’t wrap unnecessary
DIVs
<div><h1>hello</h1></div>

16. Know your Tools
Properties
box-sizing: border-box
outline: none
margin: auto
display: flex
min/max-width: 10vh/vw/vmax/vmin/calc(20vw-
10px)
background-size: cover

17. Use “reset”
Eric Meyer’s “Reset CSS” 2.0
cssreset.com

18. Keep Reference
/*
background color: #0f0f0f
text color: #000000
link color: #d4d4d4
font size: 12px
*/

19. Stay Organized
/* Resets and overrides */
/* Typography */
/* Main Layout */
/* Navigation */
/* Form elements */
/* Miscellaneous */

20. Meaningful Naming
Conventions
.xyz {}
.post-list-container {}
.post_container {}
.post-title {}
.post_info {}
.post-body {}

21. “-” for Class, “_” for ID
#post_list_container {}
.post-container {}
.post-title {}
.post-info {}
.post-body {}

22. Avoid Extra Selectors
body #post_list_container {} /* bad */
#post_list_container {} /* good */

23. Reuse, don’t Repeat
.post-title { font-size: 14px; }
.post-body { font-size: 14px; }
.post-title,
.post-body { font-size: 14px; }

24. Create Generic Classes
.box {}
.pull-right {}
.img-circle {}

25. Use Multiple Classes
class="pull-right img-circle"

26. Use CSS Shorthands
margin-top: 0
margin-right: 10px
margin-bottom: 0
margin-left: 10px /* bad */
margin: 0 10px /* good */
margin: 0 auto /* to center */

27. Use External, never Inline:
WHY?
Separate content from presentation
Easy to organize, manage & modify
Minify, cache and other optimizations

28. Use Multiple Files (if
necessary)
reset.css
layout.css
utility.css
form.css
actions.js
animations.js

29. Love DevTools (like
Facebook)

30. Other Resources
https://google.github.io/styleguide/htmlcssguide.xml
https://google.github.io/styleguide/javascriptguide.xml

31. Happy CODING ;)