Contact Adam

[email protected]

Lectures & Projects

Shepherd University

Advanced Design at Shepherd University

Web Design at Shepherd University

Project  1
Intro to UX Pin
Project  2
Copy an Existing User Interface
Project  3
Homepage Redesign
Project  4
Design a UI Kit
Project  5

Web Coding at Shepherd University


Web Coding Build an Entire Site

If you can’t build at least a small website, then you cannot say that you’ve mastered HTML and CSS. You need to know these two markup languages like the back of your hand. So I’m supplying you with the remainder of the site’s content. Code up each page, link everything together. Make a fully functional website.

Pick up where you left off – you should have the home page and portfolio pages completed. Based on the screen shots provided, you will build this site from scratch using HTML and CSS. You will create the pages for:

  1. home (should be completed)
  2. who we are
  3. who we are subpages
  4. what we do (should be completed)
  5. what we do subpages
  6. contact

Make all HTML, CSS, and images are neatly organized in a single folder. Name all files using all lowercase letters and use dashes instead of spaces. Just like the previous assignments involving this website, the head section of your HTML documents should be at minimum:

<meta charset="UTF-8">
<title>Your Title</title>

For colors, you can use a photoshop eyedropper, or use your own color palette. For fonts, they are using Gotham Book, but you can use web-safe fonts or pick your own through google.

The homepage slideshow can use a placeholder for now – we’ll discuss Javascript and jQuery later. Same with the Google map. But I will be really impressed if anyone can figure out how to color and style the Google map like they did here.

Images for the “what we do” are supplied and should replace what you might already have. Notice they are larger than they need to be. While optimizing images is a very important practice, you should understand that for images to display clear on Apple retina displays, they need to be 2 to 3 times larger than their layout size. So for example, an image that is 400px wide would have either the width attribute or it’s CSS set to display at 200px wide. View on retina screens to check the quality of your images. Here is a basic intro to retina images with an example graphic.

You’ll have to create the logo, so the paragraph above about retina images applies here. Logo should be a transparent .PNG file. Unless you really want to be awesome, use an .SVG file (don’t be afraid to ask me how).