Special thanks to Guru for hosting us!

Wifi: guru-guest

pw: strawberry

Slides: https://tinyurl.com/y7rq7tpq

We will be using codepen for our practice problems!

All practice problems, solutions, and examples can be found here, but there will also be individual links to each practice problem. https://codepen.io/collection/AaWKGo/

Intermediate HTML and CSS

Applying your new skills

Welcome!

Welcome!

HTML

Review

Keep it simple!

From a non-technical (and non-linear) point of view...

Either in your own words or using google

define: attribute

Attribute: a quality or feature regarded as a characteristic or inherent part of someone or something (From Google)

Try to do this with all other elements and words you might not know in HTML/CSS

Review: Anatomy of a website

HTML

Review

• HTML is like the bones!
• Opening Tag
• Closing Tag
• They act like nesting dolls: last one to open is the first one to close
• There are some elements that are their own closing tag. We call these elements 'self-closing'. ex. <img/>

HTML

Review

• Each tag can have any number of attributes:
  • Classes, ids, language, source, style, reference, data, etc.

CSS

Review

CSS is like the skin! It makes the website look beautiful and not like a creepy skeleton running around.

CSS

Review

• CSS breakdown:

CSS

• Three different ways to include CSS
  • Inline

    <p style="color: red; font-size: 20px; font-style: italic;">
      This has inline styles
    </p>

  • Internal (Embedded)

    <style>
      p {
        color: red;
        font-size: 20px;
        font-style: italic;
      }
    </style>

    You put this in the head of your document!

  • External

    p {
      color: red;
      font-size: 20px;
      font-style: italic;
    }

CSS

In the beginning...

CSS didn't always exist!

Layout was initially a table and styles were added as attributes (sometimes there were even style HTML tags, such as for font!)

• Example 1
WEEEEEE!!!!! This is a marquee! (Please don't use this, unless adding a stock market marquee somewhere.)
• Example 2
• Example 3

It's ok though! We got CSS in the end!

Semantic HTML

In order for the internet to be accessible to anyone and everyone, your elements should be as meaningful as possible.

<p>Welcome!</p>
<h2>
  This is a lot of text and probably was not a 
  good idea to use a header for this.
</h2>

Semantic HTML

• If you need to write a bunch of text a <p> tag is appropriate
• For the same reason, something important and short should use header tags (h1, h2, h3, etc.)

  Don't style your <p> tags to look like <h1> tags!!

• In order for your page to be valid, you can only use one (1) <h1> tag.
• Tables are actually useful! They are for tabular data!

  You wouldn't use a spreadsheet for your resume, so don't use a table for page layout.

HTML

When you write HTML, you need to check that you are writing the correct and allowed elements within other elements.

For example: you cannot place a <div> inside of a <p>

<p>
  <div></div>
</p>

You can look up specific elements and their permitted content on the w3.org site.

Let's develop it!

Responsive Web

Difference between Responsive Design and Adaptive Design

• Responsive: the webpages will adapt when changing the size of the page
  • Responsive
• Adaptive: you create different (somewhat different) pages depending on the size of the device
  • Adaptive

HTML is already responsive!!! See this example!

Sometimes that's not enough...

Responsive Web

We can use CSS to assist in making our pages remain responsive.

• Percentage widths
  • Also percentage margins/padding
  • You can also use calc()

Responsive Web

Percentage Margins!

Fun fact about using percentage margins and padding:

The actual margin/padding is determined/calculated by the WIDTH of the CONTAINER.

Example

Feel free to use percentage left/right margin/padding on your elements, they will look significantly better than using it on top/bottom.

Responsive Web

MOAR CSS!

• min- and max-width

Use percentage widths and min/max-width in combination for some c R a Z y stuff

img {
  width: 50%;       /* Images will be 50% of their container */
  max-width: 250px; /* Until the image hits 250px
                       then it will remain at 250px */
  min-width: 100px; /* If the image starts to shrink
                       and suddenly 50% is not legible,
                       or doesn't look good,
                       this is as small as it will get */
}

Let's develop it!

CSS

Heights

• Rule of thumb: don't set a height on any elements, because most of the time the content will set the height for you. Unless your intention is to have a set height, then remember to use 'overflow' with height
• Percentages and heights don't mix

If you want to use a height, for something like a giant hero image, in that case you can use 'vh'!

vh is viewport height

For the image to take up the whole viewport size set height to 100vh

Box Model

Box Model

If we are trying to make pixel perfect responsive designs, percentage widths and padding can mess us up

How do we fix this in order to match our pixel perfect designs?

.selector {
  box-sizing: border-box;
}

The box will recalculate itself if there is padding and border to remain the same width and height.

Let's develop it!

Directory Structure

Organizing your files

When you have a small site (e.g. a landing page, a CSS file, and maybe a js file, and some images), this isn't as big of a deal

BUT!

If you are consistent and do this no matter how small the site is, your sites will be easier to develop and you will have an easier time working on teams.

Directory Structure

Examples

Basic
↳ /your_main_folder
    ↳ /images
        — me.jpg
    ↳ /javascripts
        — myjs.js
    ↳ /stylesheets
        — mystyles.css
    — index.html

More Advanced
↳ /your_main_folder
    ↳ /assets
        ↳ /fonts
            — icons.woff
        ↳ /images
            — me.jpg
            — logo.svg
        ↳ /javascripts
            — jquery.min.js
            — my_js.js
        ↳ /stylesheets
            — my_styles.css
    ↳ /views
        ↳ /any_individual_folders
        — index.html

CSS Organization

• Organize elements from least specific to most
  • Elements come first

    body {}
    div {}
    ul {}
    p {}
    a {}

  • Then do any classes (in the order that they appear in your document)

    .header {}
    .nav {}
    .container {}
    .content {}
    .footer {}

  • Finally extremely specific styles

    #facebook-icon {}
    #copyright {}

Organizing your CSS

Specificity

The more selectors we add onto our css selectors will make the stylesheet slower.

Fun fact, the browser reads CSS selectors from right to left.

So the less specific we are on the right (at the end of our selectors) the slower the browser is.

#footer .class a

div .class #link

CSS Organization

One methodology for organizing CSS and naming classes is to use something called BEM

Block, Element, Modifier

• Block level elements - essentially like your container
• Elements - the individual elements within your block/container
• Modifier - sometimes you don't want your elements to look the same every time, and they might change depending

More on BEM

.puppy {}

.puppy__eyes {}
.puppy__ears {}
.puppy__fur {}
.puppy__tail {}
.puppy__nose {}

.puppy__eyes--left {}
.puppy__eyes--right {}

CSS

Try not to use IDs for styling.

Typically IDs are used for JS hooks.

Also they are super specific and can't be reused in the future if you want to have similar styles somewhere else.

IDs can only be overridden with other IDs or more extreme methods such as inline styling or through the use of !important

More on specificity

Keeping specificity low

!IMPORTANT

This is really !important for you to remember:

Avoid using !important in your CSS

Sure, sometimes you can use it, but it overrides any other styles, and if you are trying to override styles and struggling with it, then you need to rethink your styling and not resort to !important

There are times when you might need to use it:

Some jobs might need it

Let's Develop It!

CSS Selectors

Let's take a look at the CSS selectors we might already be familiar with:

• Element selectors: div, p, ul, li, a, etc.
• Classes: .list, .paragraph, .icon
• IDs: #footer, #footer
• Child Selectors: a .icon will select any .icon within a tags
• Link pseudo selectors: a:link, a:visited, a:hover, a:active

But CSS is magical and we can select way more stuff and be more specific without resorting to IDs!

CSS Selectors

div > .pretty {}

<div>
  <span class="pretty">
    This has the styles!
    <span class="pretty">
      But this doesn't!
    </span>
  </span>
</div>

div + .pretty {}

<div></div>
<p class="pretty">
  This has the styles!
</p>
<p class="pretty">
  But this doesn't!
</p>

div ~ .pretty {}

<div class="pretty">
  This doesn't have the styles!
</div>
<p class="pretty">
  This has the styles!
</p>
  <p class="pretty">
  And so does this!
</p>

CSS Selectors (cont)

Examples

CSS Selectors you can use

But wait! There's more!

Every element has this hidden space "before" and "after" it.

It can be manipulated a lot like regular elements!

A single div project

Now a break from our regularly scheduled programming

CSS Preprocessors

Several ones you can use or learn about

• Sass
  • SCSS
• Less

CSS Preprocessors

Sass CSS

$red:          #cf202d
$almost-white: #f1f2f2
$rhythm: 8px

body
  padding: $rhythm
  background: $almost-white

  p
    color: $almost-white
    background: $red

.my-class
  color: $red

body {
  padding: 8px;
  background: #f1f2f2;
}

body p {
  color: #f1f2f2;
  background: #cf202d;
}

.my-class {
  color: #cf202d;
}

CSS preprocessors

SCSS CSS

$red:          #cf202d;
$almost-white: #f1f2f2;
$rhythm: 8px;

body {
  padding: $rhythm;
  background: $almost-white;

  p {
    color: $almost-white;
    background: $red;
  }
}

.my-class {
  color: $red;
}
          

body {
  padding: 8px;
  background: #f1f2f2;
}

body p {
  color: #f1f2f2;
  background: #cf202d;
}

.my-class {
  color: #cf202d;
}

CSS preprocessors

LESS CSS

@red:          #cf202d;
@almost-white: #f1f2f2;
@rhythm: 8px;

body {
  padding: @rhythm;
  background: @almost-white;

  p {
    color: @almost-white;
    background: @red;
  }
}

.my-class {
  color: @red;
}

body {
  padding: 8px;
  background: #f1f2f2;
}

body p {
  color: #f1f2f2;
  background: #cf202d;
}

.my-class {
  color: #cf202d;
}

CSS Preprocessors

For smaller projects it doesn't make sense to have this set up.

But in larger projects or projects worked on by several people or teams this is extremely helpful.

CSS prepropcessors allow us to write DRY code through the use of mixins which are sort of like functions.

Check out sass-lang for more info on Sass and SCSS and lesscss.org for more on LESS.

There is an upcoming class on Sass that you should definitely check out! (on Nov 27 and 29)

Now back to our regularly scheduled programming!

Display

• Block: most elements are set to this; div, p

  this means that no matter how wide, they will clear each other and stack on top of one another

• Inline-block: this will allow elements to stack up next to one another, as long as there is room, keeps height/width, padding/margin constraints

• Inline: the element will only take up as much space as it needs, on spans, any styling elements (em, strong)

  will ignore any top/bottom margin you add, will add top/bottom padding, but not move other elements out of the way, will also ignore width and height settings

Display (continued)

• Table: the elements behave like a table, used with display: table-cell/table-row and so on

• None: will hide the element and remove it from affecting the document flow

  Not the best rendering solution, you probably shouldn’t put the element in there if you don’t want it to show, usually used in conjunction with js, elements will still load (like images)

Display (continued)

• Flex: used on parent element to align the internal elements wherever you need them to be

  Flexbox Froggy

  Flexbox tower defense

  Guide to Flexbox

• Grid: also used on a parent element to position inner elements similarly to table. But allows for more granular positioning

  CSS Grid Garden

  Guide to Grid

DEBUGGING!

Live in the inspector!

Every browser renders HTML elements differently

Example

We use CSS to try to unify how things look across all the different browsers

Sometimes browsers won’t accept certain styles without the use of browser specific prefixes

-webkit-, -ms-, -moz-, -o-

But also make sure you also include the code without the prefix at the end!

Debugging

Can I use?

Should I prefix?

Inspectors in various browsers are pretty robust!

Debugging in Browsers

Can’t access a certain browser or want to see how your code will look on a specific browser on a phone?

Browserstack (free 30min trial)

Microsoft Edge This takes a screen shot of your site on Edge or allows you to run a virtual windows machine

Codepen allows free crossbrowser testing of your code snippets

xcode can allow you to emulate iphones/ipads

Chrome has some robust mobile emulators

Commenting

Not just for taking notes!

Sometimes things just won’t work no matter what you do. Maybe you are absolutely sure you wrote your markup or styles absolutely perfectly, spelled everything right and it’s still just not working, commenting out chunks of code and checking where it still works is the best way to debug something not working.

Speaking of comments!

Developers love comments! (But don't go overboard)

Comments help others understand your code if you do something a little out of the ordinary

Comments help you remember why you did something out of the ordinary

Linting

What is a linter?

A linter checks our code and lets us know of any if we took a wrong turn while writing our code

It will set some rules for your editor to follow and your editor can be set to autimatically fix those bad coding practices or to warn you that you did something bad.

There are some "rules" that are suggested that you can follow, but this is really just an opinion:

CssLint

And if you don't know any Korean (I don't)

CssLint

Most editors have plugins for these rules to make it easier for you!

Clean Code

White space isn't read by the browser. So make good use of it!

Use indentation!

add a space between a CSS selector and the opening of the rule block ( .some-class {} ) (the blue highlighted part)

CSS Guidelines

Moar debugging!

Can't figure out a problem using any of these tips?

ASK REAL PEOPLE!

StackOverflow

GDI has a Slack group! Ask in the #css-help channel

We also offer awesome Code & Coffee meetups once a month where you can ask real people real questions!

Also, please feel free to bug me at any time of day (morning, evening, 3am). I might not respond at 3am, but I will definitely respond within 24 hours.

Questions?