Langara Outlines

LangaraPRM Teams 2017

WORDPRESS DESIGNER
Nelson
Tessa
Ann-Sophie
Laura

WEB DESIGNER
Freda
Diego
Stephanie

( Potential DUAL ROLE in Interface/Animation: Diego / Nelson )

MEDIA ( Videos, Images, possible custom icons, etc)
Burhan
Rony
Marianna
Maisey

EDITORIAL
Victoria
Laura / Rony (PT)

PROMOTIONS
Marianna (PT)
Victoria (PT)

QA
Wallace
Maisey
Freda ( PT: after Web Design duties are largely over )

Standard
Langara Outlines

PUBL 1232 Assignments 2017

One: Install WordPress at Your Own Domain

For this exercise, I want you to use your Host Company Control Panel to install WordPress at your own domain at the following location:

http://yourdomain.com/publishingclass/demowp

If you already have a WordPress installation at your current domain, ask your host company asap if your hosting package allows you to have additional installations on the same domain. If it doesn’t, get in touch.

In the installation process, use your real email address for the admin user. That way, if you forget the password, you can get it mailed to you.

In that installation, make five posts. Each one will be the text of one of this year’s PRM articles. Each post must have at least one image, from this year’s magazine.

However, each post must be assigned to the author who wrote it. This means that in addition to posts, you have to make additional users for your site.

Each user is supposed to have a different email address, so just use fake ones for the additional authors. However, make the password of each user the same, so that it’s easy to remember. If you forget that password, you will have to login as the admin user to change it.

Feel free to customize the installation any way you want.

For two bonus marks, use your host company’s control panel and FAQ pages to figure out how to password-protect the demowp folder. Note: Do not use the WordPress protected-post feature to do this. This is outside of WordPress.

This is something you commonly will do in order to put work online for client approval without sharing it with the entire world.

If you do this, however, make sure that one of the IDs that can access that directory is kevinmcmillan with a password of ihatenickelback — make sure that that name and password are exact, or else I won’t be able to mark your site (other than by giving you a zero). As well, make sure that you password-protect the correct directory.

This is due Tuesday, June 27th.

 

Two: Themed Portfolio (or Otherwise) Site

For the second major assignment, set up a new WordPress site at the root level of  your own domain. This can be a portfolio site, or if you have other ideas about it, get in touch.

You have two options for this assignment. In order of challenge level and mark potential, they are the following. Option A will not get first-class marks.

Option A: Use A Theme from the WP Theme Repository

Option B: Make Your Own Theme

If you choose option B, you should use a “starter” theme like Underscores.

Regardless of the option chosen, you should obviously make a site that’s responsive.You should have a contact form. You should have a search field. You should have content attractively displayed. You should make decisions about file sizes and other design considerations in such a way as to maximize the impact of the site, on a range of devices and connection speeds.

You will hand in the following items:

  • A webloc file pointing to your site on the web. Definitely test that it actually works.
  • A Duplicator archive and installer file. Make the duplicator file from your local install, not from your live site. That way, you’re not copying your live site’s database name, user, and password.

This is due Thursday, August 03. If you have a lot of LangaraPRM duties at this time, small extensions are possible.

Standard
CSS, HTML

Float-based layout exercise: Bolt 1

For this exercise, please download the starter files. As well, please download screenshot package 1 and screenshot package 2.

In the starter files package you downloaded, you will find an index.html file, and a folder of images.

The index.html file has a header, a simple menu, and a number of stories. The stories are grouped by topic into sections.

There are a number of SECTIONS. Each section contains a heading and three stories.

Your task here is to produce the three responsive layouts and typography shown in the screenshots: phone, medium, and large, as well as that in the hover screenshot,

You are free to edit the HTML file if needed.

In the large layout, the main content area never gets wider than 1200px. It is centered in the window.

The font for the story titles is the Google font CUTIVE.  All other text is in GEORGIA.

I will leave you to figure out the colors used. Please get as close as possible.

You can use any resource: notes, internet, etc.

If you talk or look at someone else’s work, you will be asked to leave and will receive a zero mark for the exam.

One final suggestion: from time to time, make a backup of your project, in case you try something that doesn’t work and you can’t quickly figure out how to recover from the problem. The easiest way to do this on a Mac is to option-drag your folder. Or you can right-click and choose DUPLICATE.

You have three hours.

When you are done, hand in your exam to your “hand in” folder on studentshare.

Standard
CSS, HTML

Float-Based Layout Practice Exercises

If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises.

If we have not yet covered a technique or tag yet in class, google it.

Berlin Photo Gallery

Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.

Upside Down Mag

Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.

 

The other exercises, below, are arguably harder, and they have much less hints. Try them if you like a challenge.

Gibson Vs Fender 1

Download these files. Read the included Instructions  file. Build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Border-radius
  • Position (for the heading / border trick… )

Gibson Vs Fender 2

Download these files. This package does not include an instructions file. Just build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Nested Elements

PedalMania

Download these files. Read the included Instructions file. Build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Background Images
  • Background Color
  • Tables
  • Hover
  • Position (for the heading – border trick… )
Standard
Tools & Generators

Using the iPhone Simulator

To get to the iPhone simulator on your own Mac (sorry, Windows users), you need to install Xcode. If you are in a Langara or Emily Carr lab, it should be there already.

To use the simulator, don’t open Xcode. Instead, navigate to it and then right-click (or control-click).

path to xCode

That will bring up a contextual menu. Choose SHOW PACKAGE CONTENTS.

right-click xCode

 

That will take you inside the app. From there navigate the path shown below.

path to simulator

 

You can open the Simulator from here. Better yet, drag it into your dock so that you don’t have to go through this process again.

Once you have the Simulator running (it takes a short while to start up), you can drag local web pages into it for testing, or you can navigate to them using the Safari URL field.

You can also change phones, tablets, orientations, etc from the HARDWARE menu at the top of your screen.

 

Standard
CSS

Using Google Fonts

Using a hosted font service like Google Fonts or Typekit allows us to use a much wider range of fonts and weights than are included in the default range of fonts resident on users’ computers (as itemized at cssfontstack.com).

Because the fonts will be downloaded to the user’s computer when the page loads for the first time, it is important that we  specify only  the fonts and weights we will actually use in our designs. If we want to try out a bunch, that’s completely OK, but we need to remember to edit the list of downloaded fonts or weights before we put the site goes live.

Note also that we can use a mixture of hosted and non-hosted fonts.

Anyway, here I am going to select a few weights of two fonts (as used in the guitarmania 2017 exercise elsewhere on this site).

First, I go to https://fonts.google.com:

Using the filtering options, you can search for fonts by name, or view them by type, thickness, etc.

To select, click on the + sign.

So first search for and select the OSWALD font, then search for and select ROBOTO SLAB.

In the screenshot below, I am looking at Roboto Slab, and I’ve changed the text sample to text reflective of how I’m going to use it in the exercise. Testing weights helps me determine that I will likely use the 400 weight with this face.

At the bottom of the screenshot, there is a black tab listing how many families are currently selected:

Click on that tab.

Here we see our two chosen fonts. If you decide to remove one, you can do so by clicking the minus sign near the name.

As noted, we’ve chosen a single weight of Roboto Slab. But I’m going to choose a few weights of Oswald so that we can test them in our actual project. To do that, we click the CUSTOMIZE link in the “Families Selected” tab box.

Add the four weights below.

The interface now downgrades our download time from FAST to MODERATE. But we’ll decrease our download time shortly.

Add the Link to the Fonts to Your Project

Now click back on EMBED.

The pane will now show the HTML & CSS for using the fonts.

However, if we use the HTML way of getting the fonts, we will need to add that link to all of HTML pages. An easier way is to click on @IMPORT and then copy part of the declaration (the selected text below) and paste it at the top of your stylesheet file:

Now I will test which weights of Oswald I want to use in my project:

h1 {
  font-family: Oswald, "arial narrow", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}

h2 {
  font-family: Oswald, "arial narrow", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

If, though this testing, I decide that I need the 400 and 700 weights only, I can now edit the line (copied from Google Fonts) at the top of my stylesheet. Originally, we had this:

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,700|Roboto+Slab');

But here I have removed two unused weights

@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto+Slab');

It is always a good practice to reduce as much file size as possible on all resources your page downloads. A commonly cited metric for Walmart is that for every 1 second decrease of page download time, the Walmart site increased conversions by 2%. That’s a lot of money.

Incidentally, the Google guide to getting started with Google Fonts has some very interesting information, including how to subset your chosen font. If you’re using a font for just a logo or a single heading, for example, subsetting can decrease the weight of the font by up to 90%.

Standard
CSS, HTML

Responsive Design Exercise: GuitarMania 2017

First, please download the files you’ll need for this exercise.

Once you unpack the downloaded zip file, open the main folder in your code editor. You will see that you have two folders: one for images and one for your CSS files.

In this exercise, we are going to use a mobile first methodology to build the index page of a site devoted to Gibson guitars.

If you are taking my ECUAD Advanced WordPress course, we will build this site and then turn it into a WordPress theme.

Here’s what our final comp is going to look like:

Desktop View: Click for expanded image

 

And here it is in the iPhone simulator:

iPhone view. Click for expanded image.

 

The keys to this kind of layout:

  1. Percentage-Based Widths
  2. Fluid Images
  3. CSS3 Media Queries
  4. The Viewport Meta-Tag

The Basic Setup

First, we will download a reset stylesheet to use as a foundation for the project.

To do this, go to the normalize.css webpage and download the latest version of this “starter” stylesheet into the empty css folder. Name it normalize.css. 

This stylesheet neutralizes differences between browsers so we can build upon a level playing field. One browser might have different default values for margin, or padding, or font-sizes, etc etc,  than another browser. This can cause layout problems. The purpose of reset stylesheets is to get all browsers reset in such a way that they behave the same way with all elements.

 

Next, go to HTMLShell.com to get a starter HTML file. Before copying it, however, click the button to include the viewport meta-tag. I will explain what viewport does later in this exercise. Save the index.html file at the top level of the site folder.

Wire up the stylesheets to this html file by adding the following two lines inside the <head> of your document.

<link href= "css/normalize.css" rel= "stylesheet">
<link href= "css/style.css" rel = "stylesheet">

Make a file called style.css and save it inside the css folder.

Put the phrase Guitar Mania inside your <title> tags.

Inside the <body> of your document, put in the following code for the header .

( Type it out rather than cutting and pasting from my website: this will help you memorize the tags and concepts. )


<header>

<h1>Guitar Mania</h1>

<nav>
 <ul>
  <li><a href="#">Guitars</a></li>
  <li><a href="#">Amps</a></li>
  <li><a href="#">Players</a></li>
  <li><a href="#">Lessons</a></li>
  <li><a href="#">Search</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

</header>

Test your page. Make sure that this content is showing up.

Add The Main Content

Now wrap everything that’s inside the body tags inside a DIV with a class of wrapper. This will set the ultimate wrapper for our content. We will style it shortly.

After the closing <header> tag (but inside the .wrapper DIV), put in the following code.


<section class="original">

  <h2>Original Models</h2>

  <div class="guitar-small">
    <a href="#">
      <img src="images/custom.jpg">
      <h3>Les Paul Custom</h3>
    </a>
  </div>

  <div class="guitar-small">
    <a href="#">
      <img src="images/goldtop.jpg">
      <h3>Les Paul Goldtop</h3>
    </a>
  </div>

  <div class="guitar-small">
    <a href="#">
     <img src="images/standard.jpg">
     <h3>Les Paul Standard</h3>
    </a>
  </div>

</section>
<!-- END ORIGINAL -->

What we are doing here is the following:

  • Grouping the content with a section tag and an explanatory h2.
  • For styling purposes, wrapping a DIV around each image and the h3 text that identifies it.
  • Wrapping a link around the image and the h3 (even though the anchor tag is inline, this is allowed).

Test the page in a browser. It should now look like this:

 

The first problem we notice is that under a certain size, the images go beyond the edge of the browser window rather scaling with the page.

Responsive Images

The solution, and a fundamental technique of Responsive Web Design, is to make your images resize to fit your box. It’s easy to do this.

Open the file style.css if it isn’t already open. Add the following style:

img {
  max-width: 100%;
  height: auto;
}

.guitar-small img {
  border: 1px solid #888; /*For design, not for responsiveness. */
}

Test your page now. Shrink it to see if the images are scaling down and have the border. The page should look like this:

Images scaling responsively

Make More Rows

If it does look like this, copy that row of guitars (the <section> with a class of original). If it doesn’t look like this, consider validating your html & css.

Paste that row twice after it. Change the classes of the pasted outer <section> elements to budget and artists, respectively.

Change the h2 text in the second row to Budget Models and the H2 text in the third row to Artist Models.

In the second row, change the H3s to: Les Paul Junior, then another Les Paul Junior, and finally Les Paul Special.

In the third row, change the H3s to: Alex Lifeson, then Peter Framptonand finally Ace Frehley.

With rows two and three, change the images in the inner sections to their correspondingly named guitar pictures (there are two Les Paul JRs, but the image names reflect that).

Finally, change each comment that ends each row, to reflect the changes you’ve made to each section.

Test the page. Make sure that all the images and headings are different.

Typography

Go to the Google fonts website and select the fonts Oswald (weights 400 & 700) and Roboto Slab (weight 400 only). If you need to review how to do that, consult this page.

Now let’s make our basic typographic decisions. In your style.css file, add the following CSS;

h1, h2 {
	font-family: oswald, sans-serif;
}

h1 {
	font-weight: 400;
	color: white;
	background-color: #000;
	margin-top: 0;
	padding-top: 3rem;
	text-align: center;
}

h2 {
        font-weight: 700;
	text-transform: uppercase;
	font-size: 2.6rem;
	text-align: center;
	margin-bottom: .75rem;
	margin-top: 2rem;
	line-height: 1;
}

h3 {
	font-family: "Roboto Slab", georgia, serif;
	font-weight: 400;
	margin: 0;
	font-size: .75rem;
}

a {
	font-family: "Roboto Slab", serif;
}

Test your HTML page at a narrow browser width. It should look more or less like this:

Obviously, our content is getting too close to the end of the browser window.

Wrapper DIV

The purpose of the WRAPPER div we put in earlier was to have a box with which to easily style our main layout.

Add the following to your stylesheet. Because the wrapper div is our main structuring element, I would put it just after the BODY style.

.wrapper {
  margin: 0 2%;
}

The page should now look like this:

In other words, we have now pushed the all the content away from the left and right edges of the browser.

Later, when we work on our desktop view, we will modify the .wrapper style more.

More Header Tweaks

Let’s work on the menu.

/* MENU and LINKS =========================================== */
a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}

nav ul {
  list-style-type: none; 
  margin-left: 0; 
  padding-left: 0;
}

nav li {}

nav a {}

The NAV UL style here is an extremely common approach: we are removing the LIST dots with list-style-type: none and clearing up the space the browser made for the dots. ( We use margin-left and padding-left because different browsers have used different defaults ).

If you test the page, you will see that the dots are gone and the list is now sitting fully to the left of the wrapper.

Now let’s arrange and style the menu as in the iPhone simulator screenshot at the top of this page.

Modify your link and menu styles as follows:

nav a {
  font-size: 1.4rem;
  line-height: 2;
}
nav li {
  background-color: #ccc;
}

This will create the following presentation of our menu:

Now add the following styling

nav li {
  background-color: #ccc;
  border: 1px solid white;
  float: left;
  width: 50%;
}

Test the page. The results might surprise you:

Two things are happening here:

  • Because our LIs have borders, their width is 50% + 2px. This means that they won’t go beside each other.
  • The h2 is coming up beside the floated LI elements.

This kind of thing often confuses people, but there is an easy fix. Add box-sizing:border-box to your NAV LI style. This will make the browser treat the border (and padding, if the style has it) as inside the box. Very useful, indeed.

A few more tweaks remain. First, add the following to your h1 style:

h1 {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

This will give you rounded bottom corners on your site name (the h1).

Add text-align:center to your NAV LI style to get the links to sit in the center of their containing elements.

Finally, add display: block to your NAV A style. This will make the links cover the full width of their containing elements (so mousing over the LI will cause the browser to display the pointer cursor that indicates links).

Test your page. We’ve got much of the mobile layout covered now.

Our First Clearfix

But if you scroll down the page, you will notice that the browser appears to be ignoring the margin-top on the first h2.

In contrast to the above screenshot, here is the second h2 in the page.

Both h2s share common styling.

What’s happening here, however, is common when you use floated elements. Specifically, if all the children (or the last children) of an element are floated, the parent element will appear to shrink (ie backgrounds will disappear and borders will collapse). The reason for this is to allow subsequent elements to come up beside the floated element.

This is, in fact, desired behavior: think of a tall image in a short paragraph: if we float it, we want subsequent paragraphs to come up beside the image.

In our case, since the NAV UL’s child LIs are all floated, they hang out of the UL.

The secret to fixing that is to use the clearfix hack.

For an explanation of clearfix, read this.

Copy the clearfix code from here. (You can omit the comments and the IE 6/7 code, too). Paste it into your style.css file.

NoW, apply the clearfix class as an attribute to the UL that’s inside your NAV.

<ul class="cf">

Test your page. You should see that the clearfix has made it appear that the first h2 now has a top margin again. This is because the UL has “grown” to encompass its floated children.

Additional Layouts: Media Queries

Media Queries allow us to direct additional or different styles to different viewing conditions.

For example, we could hide advertisements and change the paragraph font-size when the document is printed (notice the used of points and inches, which make sense for print but not for screen):

@print {
  .ad {
     display: none;
  }

  p {
    font-size: 9pt;
    line-height: 11pt;
    margin: .25in;
  }

}  /* end print query */

Each query starts with an @ symbol. Often it will also include a condition. For example, this series of queries will change the body background-color as the page size increases:


@media screen and (min-width: 500px) {
  body{
     background-color: orange;
  }
} /* end 500px min query*/

@media screen and (min-width: 800px) {
  body{
     background-color: red;
  }
} /* end 800px min query */


@media screen and (min-width: 1000px) {
  body{
     background-color: yellow;
  }
} /* end 1000px min query */

Think of each query as an additional stylesheet.

As noted, we’ve been building this guitar site using the Mobile First methodology. The simple background-color example above shows how we will continue the build: with a series of escalating-value min-width media queries.

Here’s why Mobile First makes so much sense:

Since block elements already take up 100% of their containers, and since typical phone layouts are often predominantly single-column, the phone layout is the easiest one to do.

Moreover, by first making the styles that are common to all our layouts, we can build UP rather than DOWN. In other words, we will add more complex layout styles as the browser width increases, rather than remove them as the browser width decreases.

When smart phones first came out, designers typically took a Mobile Last approach. They would build the wider views and then use media queries to simplify or undo some of the layout at smaller widths. Mobile First means less work because we don’t have to undo anything we build.

Back to our Task

If we look at the desktop width screenshot at the top of the page, we’ll see some obvious divisions. For example, the h2s and the guitar-small DIVs are four per row. So we could style them like this (put the query after your other styles, so they don’t get overridden):

@media screen and (min-width: 700px) {
  h2, .guitar-small {	
	margin: 1%;
	width: 23%;
	float: left;
  }
} /* end 700px min query */

Test your page. Shrink it as much as the browser will allow. Here we see the phone layout. Now make the page wider. Eventually we will see the 700+ layout change to something like this:

As you make the page bigger, the layout will end up looking like this:


The reason for the first problem (700px to approximately 800px) is that as the images scale down, their enclosing DIVs get shorter, too. As a result, the h2 boxes are taller than the .guitar-small boxes. This causes each succeeding row to get enjambed.

The reason for the second problem is that the Les Paul Special image is a pixel or two shorter than the other ones. As a result, the h2 in the third row gets enjambed, too.

The solution to both problems: clearfix the SECTIONS. This will make each section exactly as tall as the highest element. As a result, the bottom of each section will be smooth rather than uneven, which means that succeeding content will not get enjambed.

(To add another class to an element that already has one, put it inside the ” ” and separate the classes with spaces).

 <section class="artist-models cf">

Once we clearfix the three sections, our layout should look like this.

Your Remaining Tasks: Add and Style More Content

Please download the final layout screenshots.

Open them up in Preview or some other PDF reader and view them at actual size.

Note the additional content in the screenshot. Please add it in. The image is of a Gibson ES-175, which you can find in the images folder.  The h3 that goes with the image says Featured and the paragraph below that says:

It’s not a Les Paul, and we’re a Les Paul site, but this Gibson ES-175 is so gorgeous that we decided to feature it anyway.

Beside that (in the Desktop view) is a form entitled Contact The Editors, with fields for First Name, Last Name, Email, and Comments.

I’ll give you the code for the form:

<section class="subscribe">

  <h4>Contact The Editors</h4>

  <form action="#" method="post"> 

    <label for="firstname">First Name</label>
    <input type = "text" class="firstname" id="firstname">

    <label for="firstname">Last Name</label>
    <input type = "text" class="lastname" id="lastname">	

     <label for="email">Email</label>
     <input type="email" class="email" id="email">

     <label for="comments">Comments</label>
     <textarea id="comments" class="comments"></textarea>

     <input type="submit">

  </form>
</section>

You figure out how to style the form. Hint: the display property is very useful here.

Please finish the page layout, getting it as close as possible to those shown in the downloaded screenshots, and then show your page to me.

About the Viewport Meta Tag

The Viewport Meta Tag, which we added when we got the HTML from HTMLShell.com, tells mobile browsers not to scale the page down.

First making sure that the meta tag is in your code, test your page in the Apple mobile simulator. Or test it on your phone by uploading it to webspace and then going to that URL on your phone.

Comment out the viewport meta tag line and then test it again in the mobile simulator or on an actual phone.

Doing this will show how mobile browsers scale pages without viewport meta tags, assuming that they were built without a responsive strategy (as practically all pages were built before the advent of smart phones).

In essence, when you use the viewport meta tag, you tell the mobile browser that you have in fact taken its dimensions into account in your design.

From the Mozilla Developers Network, more information on why the viewport meta tag is required.

Guitar images © Gibson Brands. Used with permission.

Standard
Student Work

Student Work Examples

Resumés

These are first-term projects from the Web & Mobile Applications Design & Development program at Langara College:

Magazines

The assignment is to make a magazine mockup (home page, story page, contact page, 404 page, sources page). None of the links had to work, which is why I list here up to five pages per student. These are also first-term projects from the Web & Mobile Applications Design & Development program at Langara College:

Here is some recent work from Langara Publishing Students with the same assignment:

WordPress Themes

In this exercise, Langara Web & Mobile Applications Design & Development program students were asked to make a WordPress-based business or magazine website. The themes were written by the student, content was written by students or taken from open source places like Wikipedia or UnSplash.

Standard
Langara Outlines

Marking Comments Abbreviations

Title
For Search Engine Optimization and Bookmark specificity, a best practice is to put the site name in the title, along with something page-specific. A page title like “article”, “contact” or “resume” does not provide a search engine much useful information. Bookmarks with titles like that are pretty much useless.
Validation
Either the HTML or the CSS, or both, did not validate. Remember to always validate your code: making your code as standards-compliant as possible is the best way to make sure it renders properly in as wide a range of browsers as possible.
Proximity
Adjust box model properties like margin and/or padding to bring related content closer together. Group elements so that there is less space between the related content pieces and more space between separate content.
Line-Length: long
If your line-length is too long (typically at Desktop width), the eye can get lost in the jump from the end of one line to the start of the next. Most typographers recommend between approximately 45 and 75 or 80 characters in your average line. Adjust font-size, box-model properties, or other aspects of the layout to maintain line-lengths within this range at all or at least most responsive breakpoints.
Line-length: short.
Conversely, if your line-length is too short (typically at Phone width), it’s harder to read because the eye has to move from the end of one line to the start of the next too often.
Line-height
The longer the line, the greater the line-height needed for the eye to comfortably jump to the next line. However, with shorter lines (as typically found at lower breakpoints), readability is often enhanced by decreasing the line-height.
Contrast
Dark text on a dark background (or light text on a light background) will be difficult for a lot of people to read. It is always better to have too much contrast than too little. Remember also, that we have no control over how bright the monitor a user is seeing your page on. If the monitor is a little bit dark, then reading that text will be even harder.
Spelling or Grammar
There are lots of online spellcheckers and grammar checkers.
Hierarchy
Content structure is not entirely clear.
Underlining
Underlining anything that is not a link is usually not a good idea: people think that text is a link. Consider using borders instead (they will go wider than the underlining, and will therefore be less likely to be confused for links).
Semantics
To ensure SEO and accessibility start at h1 and go through the headings in order. You can always modify sizes via CSS. Do not start at h3 simply because the default size fits your design.
Viewport
You did not include the VIEWPORT meta tag. This tells the browser not to scale the page down. This is important because otherwise the words in most webpages become unreadable.
As well, your media queries typically will not work without the viewport meta tag. The moral: always test your pages on phones and tablets as well as desktop. This problem is immediately visible when you check your work on actual devices. ( Everyone forgets that line of code from time to time … )
Stylesheet Order
If using a reset stylesheet, put it before your own styles. If using a grid stylesheet, put it between those two.
Justification
Be careful with justification in text. The narrower the paragraph, the more dangerous justification can be: it tends to introduce gaps in the text. In print, there are ways to compensate for that (manipulating tracking and kerning), but we do not have the same control on the web. As well, dyslexics apparently have more trouble reading justified text than left-aligned text. At the very least, you can disable justification as the line-length shortens (such as at phone width).
404s
You have broken page links. Check your paths.
Broken Images
You have broken links to images. Check your paths.
ALT
Some or all of your images are missing ALT attributes.
Deprecated Tags
You have used obsolete tags. Tags like CENTER, for example, have been removed from the language. As a rule (although there are exceptions), if a TAG only describes appearance, it is likely to have been deprecated.
Image Sizes
Either your images were not compressed properly, or they have not been sized properly.
Unsafe Fonts
Font or fonts chosen were not part of the standard “web stack” (or not hosted fonts). Consult www.cssfontstack.com for examples of websafe fonts.
Text/Box
Adjust margin or padding values to prevent text from getting too close to the edge of their boxes or to the edge of the browser window.
Standard