Web Design Intro
What You Will Need for the Module
- Online Accounts
- GitHub
- CodePen
- Replit
- Quizlet Account
- We use this in each module
- Computer that has a browser
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
- 11/3 Web Design Quick Intro and Account Creation
- 11/8 Full Intro and HTML/CSS tutorial
- 11/10 Getting your site on GitHub Pages
- 11/15 Finishing Touches
project and quiz
- 11/22: Web Project Due
- 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.
- GitHub Account: https://github.com
- CodePen Sign in using your GitHub Account: https://codepen.io/
- Replit Sign in using your GitHub account: https://replit.com/
- There is now a mobile app that you can also use in a pinch but it’s easier on a computer with a keyboard.
- 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:
- Site Map (we did some in Miro in Class)
- URL to GitHub Pages
- Project Statement. Use this template.
Tutorials and Resources
SLIDES
TUTORIALS AND ESSENTIAL RESOURCES
- Learn HTML and CSS Online
- Sign in with GitHub account
- This is a full-featured site for learning HTML and CSS. We will go over the beginning part of it which is all you need for our class assignment. If web design interests you then continue on to create a more complex and professional site.
- HTML basics from Mozilla Developers Network
- How CSS works on Mozilla Developer Network
- Video tutorials for HTML & CSS – “Don’t fear the Internet: Starting from Scratch – Part I (HTML)& Part II (CSS)”
- Miro Site Map Template example
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…
Simple Navigation
The examples I’m going to use are from the Listamatic web site. http://css.maxdesign.com.au/listamatic/ This site…
Using Google Web Fonts
Google has a large number of fonts you can use in your project for free….
CSS Games
In general with web design you don’t have to memorize all of the HTML and…
CSS Properties for Typography
Most of the web is text so it’s good to learn how to set and…
Creating a Web Project
This tutorial shows how to create a web project using GitHub and Replit. This is…