Stepping into the Front EndPart 1: HTML & CSS

What is Front End Engineering?

Look

What is Front End Engineering?

Feel

How can I become one?

Good Design SenseGreat Programming Skill

Awesome Attention to Detail

What Front End Engineers DO!!!

Semantic HyperText Markup Language (HTML) for structure

Cascading Style Sheets (CSS) for presentationJavaScript (JS) for behavior and interaction

Cross browser compatibility

HTMLHyperText Markup Language

HTML

STRUCTURE&

CONTENT

CSSCascaded Style Sheet

CSS

LAYOUT&

PRESENTATION

JSJavaScript

JS

BEHAVIOUR&

INTERACTION

Best Practices… are for best people

Why Best Practices?

UNDERSTANDABILITY&

MANAGEABILITY

Start with a Logical Structure

Don’t wrap unnecessary DIVs

<div><h1>hello</h1></div>

Know your Tools Properties

box-sizing: border-boxoutline: nonemargin: autodisplay: flex

min/max-width: 10vh/vw/vmax/vmin/calc(20vw-10px)

background-size: cover

Use “reset”

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

Keep Reference/*background color: #0f0f0ftext color: #000000link color: #d4d4d4font size: 12px*/

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

Meaningful Naming Conventions

.xyz {}

.post-list-container {}

.post_container {}

.post-title {}

.post_info {}

.post-body {}

“-” for Class, “_” for ID#post_list_container {}

.post-container {}

.post-title {}

.post-info {}

.post-body {}

Avoid Extra Selectors

body #post_list_container {} /* bad */

#post_list_container {} /* good */

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

.post-title,

.post-body { font-size: 14px; }

Create Generic Classes.box {}

.pull-right {}

.img-circle {}

Use Multiple Classes

class="pull-right img-circle"

Use CSS Shorthandsmargin-top: 0margin-right: 10pxmargin-bottom: 0margin-left: 10px /* bad */

margin: 0 10px /* good */

margin: 0 auto /* to center */

Use External, never Inline: WHY?

Separate content from presentation

Easy to organize, manage & modify

Minify, cache and other optimizations

Use Multiple Files (if necessary)

reset.csslayout.cssutility.cssform.css

actions.jsanimations.js

Love DevTools (like Facebook)

Other Resources

https://google.github.io/styleguide/htmlcssguide.xml

https://google.github.io/styleguide/javascriptguide.xml

Happy CODING ;)