From Newbie to
Front End Developer

Hi, I'm Raisa!

Front end developer at Copter Labs

@sweetraiscake

Wow!
Nice
That's Cool!
My Miitomo avatar jumping
My Miitomo avatar shocked

Sass?
Grunt?
BEM?
LESS?
Post CSS?
OOCSS?
WTFCSS??

Learn all the things!

Some advice...

Slow Down

Don't learn all the things!

Focus on your own progress

Everyone is learning

Tune out the noise

Understand Key Concepts

  • HTML
  • CSS
  • Good Habits

HTML

  • Semantic Code
  • Accessibility
  • IDs vs classes

Semantic Code

  • Properly describes components on the page, e.g. <header>, <footer>, <aside>
  • Results in shorter and cleaner code, easier to read for developers
  • Aids screen readers in interpreting the page
  • Allows search engines to understand the page, possibly improves ranking

Semantic Code

Instead of this...



My Web Page

Type this!



My Web Page

Accessibility

  • Alt text in images
  • ARIA roles

Alt Text in Images

A plate of strawberries
  • Describe the image
  • Keep it short and concise
  • Emphasize the subject related to the content
  • Decorative images can be ommitted with alt=""
							
A plate of strawberries
							
						

ARIA Roles

  • Accessible Rich Internet Applications
  • Defines dynamic content and behavior
  • Can indicate page structure, widgets, drag and drop areas, checkboxes, etc

ARIA Roles



My Web Page

Resource: developer.mozilla.org

ARIA Roles

ARIA Roles

                            


This is a well.

IDs vs Classes

  • IDs are unique to one element, classes can be assigned to multiple elements
  • IDs have higher specificity than classes
  • IDs may be used as page anchors
  • IDs can be used as behavioral flags for Javascript functions

Use IDs only for page anchors and Javascript listeners.

CSS

  • Specificity
  • Naming Schemes
  • DRY code
Peter from Family Guy struggling with blinds

CSS

  • Specificity
  • Naming Schemes
  • DRY code

Specificity

  • Know how CSS cascades
  • Understand !important

Specificity

Order of priority:

  1. Inline styles - <div style="width: 400px;">
  2. IDs - <div id="card">
  3. Classes - <div class="card">
  4. Elements and pseudo-elements - <div>

Specificity

							

Hello world!

							.red {
  background-color: #ff6666; /* red */
}

.card {
  background-color: #ccc; /* gray */
}
						
Latter class (.card) will apply.

Specificity

							

Hello world!

							.card p {
  color: #008000; /* green */
}

.greeting {
  color: #000; /* black */
}
						    

.card p will apply.

Specificity

Chart of CSS specificity calculation

In cases of nested or mixed selectors, the browser makes a calculation, e.g. div.card p vs p.greeting. Can become complex very fast!

Specificity Calculator: specificity.keegan.st

Understanding !important

							.red {
  background-color: #ff6666 !important; /* red */
}

.card {
  background-color: #ccc; /* gray */
}
						

.red will apply.

!important Muddles Specificity

							.red {
  background-color: #ff6666 !important; /* red */
}

.card {
  background-color: #ccc; /* gray */
}

div {
  background-color: #000033 !important; /* blue */
}
						

Code quality decreases and can cause confusion.
Avoid it when you can.

Naming Schemes

  • Consistent
  • Logical
  • Modular

Examples: BEM, Atomic, OOCSS

Inforgraphic of anatomy of a perfect landing page

source: hongkiat.com

Naming Schemes

Things to consider:

  • Components - .banner, .listing, .book-review
  • Variants - Blue .card vs red .card
  • States - .active, .disabled

Naming Schemes

								

My Book Review

This book is awesome!

							.review {
  // ...
}

.review__title {
  // ...
}

.review__content {
  // ...
}
						

Naming Schemes

  • Keep HTML classes structural
  • Describe component's state or content rather than style, e.g. <button class="disabled"> instead of <button> class="gray">
  • Break down components into child components when necessary

Naming Schemes

								
...

This book is awesome!

  • ...
...
							.review-content {
  // ...
}

.review-content__cover {
  // ...
}

.review-content__list {
  // ...
}
						

Keep Code DRY

(Don't Repeat Yourself)



						
button.active {
  color: #fff;
  text-transform: uppercase;
  background-color: #000033; /* blue */
  border-radius: 5px;
}

button.disabled {
  color: #fff;
  text-transform: uppercase;
  background-color: #ccc; /* gray */
  border-radius: 5px;
}
						

Styles that apply to multiple states or components can be bundled into one class.

Keep Code DRY

							

						
							.button {
  color: #fff;
  text-transform: uppercase;
  border-radius: 5px;
}

.button.active {
  background-color: #000033; /* blue */
}

.button.disabled {
  background-color: #ccc; /* gray */
}

.button.success {
  background-color: #008000; /* green */
}
						

Practice, practice, practice

Practice Makes Permanent

Form Good Habits

  • Formatted code
  • Comments
  • Documentation

Formatted Code

							
 

My Web Page

Formatted Code

							

My Web Page

Comments

							

Hello there!

Comments

							.navbar-default {
  -webkit-transform: translateZ(0); /* Chrome scroll bug fix */
  position: relative;
  font-size: 1.1em;
}
						

Documentation

  • Staff wiki
  • Workflow walkthrough
  • Style guides
"If I quit now, I will soon be back to where I started. And when I started I was desperately wishing to be where I am now." —Unknown

You Got This!

My Miitomo avatar sitting