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/2 Web Design Quick Intro and Account Creation
- 11/7 Full Intro and HTML/CSS tutorial
- 11/9 Getting your site on GitHub Pages
- 11/14 Web Design Lab (work on Projects)
project and quiz
- 11/28: Web Project Due
- 12/5: 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
- Base Elements
- Required Content Elements
- External Stylesheet (linked to all HTML pages)
Site Map
You need to have a site map
Minimum Page Count
You site must have at least 4 HTML pages. You can have more than that.
Base Elements
The base elements are required to set up your page. These are not content elements. All your pages should include the required base elements
- doctype
- html
- head
- title
- body
Remember that you can get all of these through the Emmet shortcut:
- Create a new .html file
- Type ! then press the tab key
Required Content Elements
Each HTML page should have at least one each of the following elements – you can use more:
- h1 (page heading)
- p (paragraph)
- img (image)
- a(link).
- Always include an option to go back to the home page (index.html) on every page.
Proper Image use and Credits
Make sure you only use Creative Commons or Public Domain images and that you attribute them directly on the page. If you use your own images, credit yourself.
CSS
Once you’ve completed and tested all the HTML, style your code with CSS. Use at least the following properties – you can use more:
- color
- font-size
- font-family
- background-color
- Extra Credit:
- margin and/or padding
- width
DUE DATE
Tuesday, November 28
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.
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 and Video
Basic Responsive Image and Video The following CSS will allow img and video elements to…
CSS Properties for Typography
These are some of the more commonly used properties for typography and creating typographic hierarchy….
CSS Basics
CSS is how you control the way a web site looks. How to Include CSS…
Learn CSS through Games
In general with web design you don’t have to memorize all of the HTML and…
Using Google Web Fonts
Google has a large number of fonts you can use in your project for free….
Where to find free images
When you use an image on a web site, you must obey copyright law and…
