Responsive Design

My files

  • Responsive design
  • Flexible layouts
    • Percentages
      • Use percentages for layout widths
      • How to do percentages inside of percentages
    • rem
      • Used instead of pixels for font-size, border, as well as margin and padding in some cases
      • Target ÷ context = result (24px ÷ 16px = 1.5rem)
        • Context is the font size of the html element (16px).
        • Put your math in a comment next to the result.
      • Continue using em for line-height
  • Borders in flexible layouts
    • CSS for divs with borders: box-sizing: border-box;
    • Counts padding and border as part of width
  • Media queries
    • Will mostly use ones based on width (max-width or min-width)
    • Other options available
    • General viewport widths
      • Newest iPhones – 375-414px
      • Older iPhones – 320px
      • iPads – 1024px by 768px
      • Other tablets – 1280px by 800px
      • Others
    • Web inspector’s responsive design mode
    • Using multiple media queries
      • Largest to smallest
      • Multiple values
  • Flexible images
    • max-width: 100%; will work most of the time
    • background-size: cover; (example) and background-size: contain; (example)

Example media query

@media screen and (max-width: 414px) {
        /* alternate CSS here */
}

Process and Design

WordPress installation and setup

  • Installation
    • Go to your DreamHost Web Panel
    • Choose Goodies > One-Click Installs
    • Choose WordPress
      • Install to: Choose domain, type in path to where you want the site to be
      • Automatically create database
      • Deluxe Install unchecked
      • Click Install it for me now
    • Wait for email, then follow instructions for setting up an admin user (don’t use admin as username)
    • Log in
  • Setup
    • Site settings
    • User settings
      • Set display name
      • Disable visual editor if you want to use HTML
    • Where content goes
      • Site title (Settings > General)
      • Pages and posts
      • Menus (Appearance > Menus)
      • Sidebars (Appearance > Widgets)

Images, Layout, and Typography

My files

  • Images
    • Create a folder in your project for images
    • Image editing basics
      • Save the largest version of an image you can find
        • Header and content images should be at least as big as your container
        • Background images should be tiling or very large (1,600 pixels wide or larger)
      • Basic editing and exporting
      • Rename your images – lowercase, no spaces, etc.
      • Image formats
        • JPG – photographs
        • PNG – images with transparency
    • Background images
      • CSS – ch. 16
        • background-image
        • background-repeat
        • background-attachment
        • background-position
        • background shorthand property
      • Useful tiling backgrounds at Subtle Patterns
      • High resolution images at Unsplash
    • Header images in CSS
    • Images in content
      • Centering
      • Floating
        • float property with margin and padding as needed
  • Typography
  • Layout – pp. 370-376
    • Columns with float
    • The clearing div
  • Adding comments to your code
    • HTML – <!-- comment -->
    • CSS – /* comment */

Images with and without captions

To include an image in your HTML file, use the following code:

<img alt="Description of picture" src="image.jpg">

If you’d like your image to have a caption, use a figure element:

<figure>
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You may wish to add a class to your figure element for easy styling:

<figure class="example">
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You can then style your image and caption using .example, .example img, and .example figcaption in your stylesheet.

HTML and CSS Basics – Day 2

My files

  • CSS
    • Reset stylesheet
    • File structure – ch. 10
      • style.css
      • Link to in HTML – <link rel="stylesheet" href="style.css">
      • Import reset stylesheet – @import url("reset.css");
      • Rule structure – see bottom of post
    • Properties
      • Color – ch. 11
      • Text – ch. 12
        • font-family
        • font-size (in pixels)
        • line-height (in ems)
        • font-weight (bold)
        • font-style (italic)
        • text-decoration (underline)
        • text-align
  • Layout and the CSS box model – see bottom of post
    • divp. 187
    • Styling – ch. 13
      • width
      • padding
      • border
      • margin
      • Centering your div
        • margin: 0 auto;
    • Classes and IDs – pp. 183-184, 238
      • Spans with classes
        • <span class="..."></span>
  • Images
    • Naming
    • Resizing
    • Centering
      • display: block;
      • margin: 0 auto;
    • Including captions – see this post for more information
  • Miscellaneous
    • Links and :hover pseudo class
    • Styling lists – pp. 333-336
      • list-style-type
    • Styling horizontal rules
      • border
    • Viewing source code in a browser
    • Using Coda reference books (also, HTML and CSS versions on the web)

CSS rule structure

selector {
    property: value;
}

CSS box model

HTML Basics – Day 1

My filesAt the end of each class, I will also upload my files to Basecamp for easy downloading.

  • HTML file structure – ch. 1
    • Creating your first page
      • Name it index.html
      • Previewing your page in a browser
    • Basic page structure
      • Tags, elements, and attributes
        • Elements made up of tag pairs and the content between them – <tag></tag>
        • Occasional single tags – <tag>
        • Attributes – <tag name="value">
      • <body>, <head>, <title>
      • DOCTYPEp. 181
      • Character encoding
  • Elements
    • Text – ch. 2
      • <p>
      • <h1><h6>
      • <strong>
      • <em>
      • <hr>
    • Lists – ch. 3
      • <ul><li>
      • <ol><li>
    • Links – ch. 4
      • <a href="http://...">
      • <a href="mailto:...">

Independent Project topics

  • Audio/video (embedded, HTML5)
  • Cross-browser compatibility
  • CSS preprocessors (LESS, Sass)
  • CSS sprites
  • CSS3 flexbox
  • Forms
  • HTML5 canvas element
  • Other content management systems
  • Parallax scrolling
  • Podcasting
  • Programming languages
    • Node.js
    • PHP
    • Ruby
  • Retina images
  • Shopping carts/ecommerce
  • Site analytics
  • Site frameworks (Bootstrap, Foundation)
  • WordPress plugins