ADVANCED 

HTML & CSS

BLACKGIRLSCODE(2)


WELCOME!


Wi - Fi:
USERNAME | HSC
PASSWORD | youdidittoyourself

WELCOME!

Please download workshop files here: 

https://github.com/blackgirlscode






WHY WE ARE ALL HERE? 


Career Change ?
Start My Business? 
Excersice Brainpower

WHAT WE ARE LEARNING TODAY?




Learn to Code Advanced HTML & CSS 

Deeper look beyond basic front-end design and development 

Modern front-end development to round out front-end skills.

WHAT WE ARE LEARNING TODAY?


performance & management

DETAILED POSITIONING

COMPLEX SELECTORS

RESPONSIVE WEB DESIGN

PERFORMANCE & MANAGEMENT

PREPROCESSORS





PERFORMANCE & MANAGEMENT

STRATEGY & STRUCTURE


The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Specifically, building a strong directory architecture, outlining design patterns, and finding ways to reuse common code.

STRATEGY & STRUCTURE

STYLE ARCHITECTURE


One practice to organize styles includes separate styles based on intent, including directories for common base styles, user interface components, and business logic modules.

structure & strategy


# Base
  – normalize.css
  – layout.css
  – typography.css

# Components
  – alerts.css
  – buttons.css
  – forms.css
  – list.css
  – nav.css
  – tables.css

# Modules
  – aside.css
  – footer.css
  – header.css
The goal here is to start thinking of websites as systems rather than individual pages.

STRUCTURE & STRATEGY

OBJECT ORIENTED CSS

A methodology with two principles to help build scalable websites with a strong architecture & a reasonable amount of code:


Seperate structure from skin
seperate content from containter

STRUCTURE & STRATEGY

MODULE ARCHITECTURE FOR CSS

METHODOLOGY   BREAKING UP STYLES INTO FIVE CORE CATEGORIES:


  • BASE 
  • LAYOUT 
  • MODULE
  • STATE
  • THEME



STRUCTURE & STRATEGY

KEEP SELECTORS SHORT
/* Bad */
button strong span {...}
button strong span .callout {...}

/* Good */
button span {...}
button .callout {...}
FAVOR CLASSES
/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

The overall goal with short selectors is to decrease specificity, creating cleaner, more charitable code.

STRUCTURE & STRATEGY


REUSABLE CODE
/* Bad */
.news {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Good */
.news,
.social {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Even Better */
.modal {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}


DETAILED POSITIONING

DETAILED POSITIONING

CONTAINING FLOATS

When floated, an element’s position is dependent on the other elements positioned around it.

What is the DOM?

The DOM, or Document Object Model, is an API for HTML and XML documents which provides their structural representation. In our case, we are speaking specifically to HTML documents, thus the DOM represents all of the different elements and their relationship to each other.

DETAILED POSITIONING

THE OVERFLOW TECHNIQUE

.box-set {
  overflow: auto;
}

DETAILED POSITIONING

THE POSITION PROPERTY

POSITION STATIC (DEFAULT)


POSIITON RELEATIVE


POSITION ABSOLUTE


POSITION FIXED

COMPLEX SELECTORS

COMPLEX SELECTORS

COMMON: TYPE, CLASS, & ID
h1 {...}
.tagline {...}
#intro {...}
CHILD SELECTORS: DESCENDANT, DIRECT CHILD
article h2 {...}
article > p {...}

RESPONSIVE WEB DESIGN 

RESPONSIVE WEB DESIGN 

FLEXIBLE LAYOUTS

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches.
The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

target ÷ context = result

RESPONSIVE WEB DESIGN 

FLEXIBLE GRID

FLEXIBLE GRID

.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

MEDIA QUERIES

/* @media Rule */
@media all and (max-width: 1024px) {...}

/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

MOBILE FIRST

/* Default styles first then media queries */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

VIEWPORT 


Mobile devices generally do a pretty decent job of displaying websites these days. Sometimes they could use a little assistance though, particularly around identifying the viewport size, scale, and resolution of a website. To remedy this, Apple invented the VIEWPORT meta tag.

<meta name="viewport" content="user-scalable=yes">

Made with Slides.com