Module 4: Web Design

What We’ll Learn

How the web works

To give context to what we’re doing and so you can better understand what and why behind web sites, we will learn about the internet and the world wide web and how a web page gets on the web and then to someone’s browser.

Creating web pages

We will use Replit to create our web pages (write the HTML and CSS). We will link our files to GitHub and use GitHub Pages as the server to display our web sites.

Classes

  1. 11/3 Web Design Quick Intro and Account Creation
  2. 11/8 Full Intro and HTML/CSS tutorial
  3. 11/10 Getting your site on GitHub Pages
  4. 11/15 Finishing Touches

project and quiz

  1. 11/22: Web Project Due
  2. 12/6: Web Quiz

Setup and Materials

software: BROWSER

One of the great things about doing web design is that you don’t need much. You write HTML and CSS in what is called a Text Editor. There are desktop apps that you can use (Visual Studio Code, Sublime Text, Brackets) and if you get into this you should check them out. But to keep things simpler for this class we will use a web-based text editor named Replit.

To use these you will need to set up accounts. They are all free and they are all based on GitHub so create that first.

  1. GitHub Account: https://github.com
  2. CodePen Sign in using your GitHub Account: https://codepen.io/
  3. Replit Sign in using your GitHub account: https://replit.com/
    1. There is now a mobile app that you can also use in a pinch but it’s easier on a computer with a keyboard. 
  4. Start Learn HTML CSS Online https://learnhtmlcss.online
    • After you get through the first part of the series you can sign in with your GitHub account to save your progress and your flash cards.

hardware

You will need a computer that has a browser and an internet connection. That’s it for this module.

Module Media Project

Small web site

Create a web site about a topic of your choosing that is at least four pages. One example is a “choose your own adventure” style story. Here is an example. You could also make a portfolio to display the projects from our class or just things that you’ve made or are interested in.

All your pages should include the required tags (html, head, title, body). Each page should have at least one each of: h1 (page heading), p (paragraph), img (image) and a(link). Always include an option to go back to the home page (index.html) on every page.  Make sure you only use Creative Commons or Public Domain images and that you attribute them directly on the page.

Once you’ve completed and tested all the HTML, style your code with CSS. Use at least the following properties: color, text-size, font-family, text-decoration).

Finally, upload the entire project on GitHub and display it using GitHub Pages.

Requirements

  • Site Map
  • 4 pages
  • Each page has
    • base HTML page elements (you will get this automatically from Replit and I will provide example)
    • Page name in the title element
    • link element that links to your CSS page
    • At least one of each of these elements:
      • h1 (heading element)
      • p (paragraph element)
      • img (image element)
      • a (hyperlink element)
      • You can use more of them or additional elements
  • A CSS file that uses the following properties
    • color
    • text-size
    • font-family
    • text-decoration
  • The project files are on GitHub
  • GitHub pages used to display files

DUE DATE

Friday, November 25

Turning it in

You will submit the following to Blackboard:

  1. Site Map (we did some in Miro in Class)
  2. URL to GitHub Pages
  3. Project Statement. Use this template.

Tutorials and Resources

SLIDES

Web Development Slides

TUTORIALS AND ESSENTIAL RESOURCES

Please feel free to suggest resources that helped you.

Web Design Posts

CSS for Images

Basic Responsive Image and Video The following CSS will allow images to resize down (not…

Read More
screenshot of codepen nav example

Simple Navigation

The examples I’m going to use are from the Listamatic web site. http://css.maxdesign.com.au/listamatic/ This site…

Read More
screeshot of CSS Diner game

CSS Games

In general with web design you don’t have to memorize all of the HTML and…

Read More

Leave a Reply