Style guide page title

Apply for the next session

Almost every page is going to have an aggresive heading like you see above. It's also very likely to have a 'page-intro' like this. In this case, Welcome to the style guide! This shows how everything on the site will look all in one place.

These intros will likely have many paragraphs. We're setting the stage for the article or lesson plan. It's the Amuse-bouche of this content. It needs to be short and sweet.

Fonts

These are them - for now!

Georgia

Helvetica

Type patterns


      micro-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      calm-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      focus-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      strong-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      loud-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      stout-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.


      huge-voice()

Here's a short sentence. This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. Hello this is some strong emphasis and here is some regular emphasis. Somethings need to be highlighted. Then there are also some Links and longer links too. Thisisareallyreallylongwordtoseewhathappens.

Color and texture ideas

Normally, I would use names like $color, and $highlight and $alternate, and $color-light... because the idea of the "main color" is different than the actual color. It might change... but in this case there are so many - that it actually makes sense to use their real names, I think...

This 70's kinda rainbow/primary colors kids-classroom - is specific enough that it pulls us all-in.

Black and white

$black $white $gray $gray-light $gray-dark $gray-lighter

Color

$black $white $wheat-light $cyan $red $orange $yellow $green $blue $purple

Old plastic

$wheat-light $wheat $wheat-dark $wheat-darker

With texture

$black $white $wheat-light $cyan $red $orange $yellow $green $blue $purple

With patterns

checkers() $color & checkers() diagnol() $color & diagnol() points() $color & points()

Edge treatments

drop-shadow() example border?

The Goals

Example goal heading/title

Example goal description.
Example goal heading/title

Example goal description.

Today's lecture

Basic text module

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Shortcut

Find

Universal

⌘+F

If you’re ever looking for something, click on whatever window or areas you are looking at, and find it!

This works great for searching web pages and most apps will also have something in place to help you navigate based on text input. If you are looking for something in your program/text document, go ahead and search the page.

Optional content heading

Teaser

Content

List with default styles

A description of this simple list here.

List item 1
List item 2
List item 3

List with type 'step'

Description.

Item one
Item two
Item three
Item four
Item five

List with checkbox styles

Description.

Item one
Item two
Item three

emphasis

This is a “picture_module” description. There is some emphasis and some strong emphasis. Somethings there will be some links and maybe some highlighted copy?

It should fit between “text” modules seamlessly – but hold it’s own – in case we style it differently – or have full-width background color etc. A lot of the images I want to use – are low quality… (because they are old!) – so, maybe we can have a filter or something to help keep them uniform… or even better… – have someone draw them… over again – so we aren’t in a legal issue… Example of ‘picture’ element for swapping out images (crop) for different screen sizes.

Don't forget that you are full of wonder...

Some general callout content. I’m still not sure how I’m going to use these / or if I’ll need a few different unique modules for this. Currently – ‘warning’ is the default. This is an internal link!

Small Alert

Small alert content

Do not put sunscreen in your eyes

This doesn’t feel good. Please add a realistic example here. Will there be images? Are there any good examples in the wild we can check out?

Remember: Cats are almost always smaller than dogs

Please put a real-world example of how we’ll use this.

Picture with heading

Picture source

Picture description

Question / prompt. Does that sound fun?

Well, maybe we can answer those questions. Let’s talk.

Key
concept

Biophilia

The hypothesis that “natural” environments can aid focus and concentration by releasing stress. In simple terms – we are natural beings. We have a history of being a part of nature. Nature has natural Rhythms that we relate too – unlike our beeps and dings and LED lighting in cubicles. Makes sense, right? So – adding some nature – and some organic stuff can really change how we feel about things. Wikipedia

Some context to how this works… in this case / the term could be “live style guide” – or something / and we could discuss what that meant – in the context of this “live style guide.”

Base HTML template html = 1

HTML

What we’d like the templating engine to spit out. This is the ideal outcome.

The data javascript =

JavaScript

var sections = [
  {
    styles: "styles-here",
    heading: "Example heading 1",
  },
  {
    styles: "styles-here highlight",
  },
  {
    styles: "styles-here",
    heading: "Example heading 3",
  },
];

Something like this

PHP implementation php = 1

PHP

Description here…

Plain JavaScript javascript =

JavaScript

function renderSection(section) {
  var hasHeading = section.heading;
  if (hasHeading) {
    var $heading = `${section.heading}`;
  }
  return `
    
      ${hasHeading ? $heading : "No heading provided"}
    
  `;
}

function renderSections(sections) {
  var list = sections.map( function(section) {
    return renderSection(section);
  }).join('');
  document.body.innerHTML = list;
}

renderSections(sections);

…

Ember implementation handlebars = 1

Handlebars

Ember description

Vue & (angular 1.5ish) javascript =

JavaScript


  
    {{section.heading}}

Vue description

This is the video_module

Here is a description of this video.

Example heading here

Example description will go here:

Browser .png example

@pe (source with no link)

Example description will go here:

Optimism can be painful!

It’s really great that we are confident. I want to harness that power. The problem is – that this Dunning-Kruger Effect – really bums us out! Our powerful feelings and our optimism are distorted. It’s not logical to expect to be the best at anything right out of the gate (or ever). That shouldn’t be the goal. MOST PEOPLE ARE AVERAGE – AND THAT IS OK! “Average” is definitely good enough. BUT – let’s reframe this whole thing. The “Valley of dispair” is TERRIBLE and is 100% avoidable. This red line is ‘confidence.’ Why should your confidence jump around like that? I mean… you can do it. I know you can do it. It’s a fact. Your confidence can be steady.

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Callout - alert style

Alert Alert! Watch out for something!!!

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Heading level 3 – maybe as a list title

This is an unordered list
That means, that it’s order doesn’t matter
Sometimes it’s just a list of ‘stuff’ in no order

Heading level 3 – maybe as a list title

This is an ordered list
That means, that it’s order does matter
Most lists have a meaningful order
Wouldn’t you say?

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Take a break

Take 2 minutes to center – and work out your arm with this stretch.

How do you feel

about this?

In conclusion

This is some conclusion copy. I want it to have the option to style this differently than a regular text area – but mostly it’s the same. ; )

Today's Exercises:

Spend some time throughout the day thinking about x and y

Example challenge description. There’s no time placed on this for (for example)
Write up something

Example challenge description.

30 minutes suggested
Research companies who do something similar

Some reminders about research and what to do etc. etc.

60 minutes suggested
Planning

Planning example. Pull some real challenges from the lessons and put them here

40 minutes suggested
HTML/markup type stuff example

Example description

60 minutes suggested
Cascading style sheets example

Challenge description

60 minutes suggested
PHP example challenge

Challenge description

60 minutes suggested
JavaScript challenge title

Challenge description

40 minutes suggested

Related resources! (heading)

If you have time - and haven't read these related materials, take a look:

Lesson checklist

Will lists need descriptions? Probably.

First things first, you have to do the first thing – and that thing is here.
Second of all – you’ll need to do whatever this thing says.
First things first, you have to do the first thing – and that thing is here.
Second of all – you’ll need to do whatever this thing says.
First things first, you have to do the first thing – and that thing is here.
Second of all – you’ll need to do whatever this thing says.

Fonts

Type patterns

Color and texture ideas

Old plastic

Example goal heading/title

Example goal heading/title

Today's lecture

Basic text module

Shortcut

Find

List item 1

List item 2

List item 3

Item one

Item two

Item three

Item four

Item five

Item one

Item two

Item three

Don't forget that you are full of wonder...

Small Alert

Do not put sunscreen in your eyes

Remember: Cats are almost always smaller than dogs

Picture with heading

Question / prompt. Does that sound fun?

Base HTML template html = 1

The data javascript =

PHP implementation php = 1

Plain JavaScript javascript =

${section.heading}

Ember implementation handlebars = 1

Vue & (angular 1.5ish) javascript =

{{section.heading}}

This is the video_module

Example heading here

Optimism can be painful!

Heading level 2

Callout - alert style

Heading level 2

Heading level 3 – maybe as a list title

Heading level 3 – maybe as a list title

Heading level 2

Take a break

How do you feel

Spend some time throughout the day thinking about x and y

Write up something

Research companies who do something similar

Planning

HTML/markup type stuff example

Cascading style sheets example

PHP example challenge

JavaScript challenge title

Related resources! (heading)

An analogy for the designer : developer relationship?

Is it possible to learn web development / design while working full-time?

Browser png tests

Content strategy and COVID-19: Tell us how to give you money

How much does it cost to learn web development?

First things first, you have to do the first thing – and that thing is here.

Second of all – you’ll need to do whatever this thing says.

First things first, you have to do the first thing – and that thing is here.

Second of all – you’ll need to do whatever this thing says.

First things first, you have to do the first thing – and that thing is here.

Second of all – you’ll need to do whatever this thing says.

Is it possible to learn web development / design
while working full-time?