WEB DESIGN
This course will teach students the basics of building a website from scratch. They’ll learn the two main languages for the web, HTML and CSS, using the CodeCademy platform and then go on to create an informative “How-To” website all on their own. Along the way, the instructor will challenge students with side projects and offline tasks to help them master these concepts.
Lesson
Lesson Goals
Hours
Intro to Web Design
– Why should we learn to make a website?
– Successfully log onto CodeCademy with provided username and password.
– Complete “Make a Website” course up to 1-3.
1
Links for Life
– How basic HTML tags are constructed.
– How paragraph and anchor tags interact to connect the web
– How code playgrounds allow you to test your HTML.
– Develop a small “about” site in CodePen that uses headings, paragraphs, anchors.
1
Lists + Images = Recipes
– What image attributions are and which can we use for our site.
– New HTML tags: images < img >, unordered lists < ul >, and ordered lists < ol >.
– Develop a simple recipe HTML page on CodePen.
1
Interior Design
– Why Divs are useful for organizing HTML pages and how to use them.
– Intro to CSS background and font-family.
– Add divs to recipe page HTML on CodePen and follow instructor to change background color and font family.
1
Stylin’ with CSS
– What is CSS’s role is in web design and why it’s required for modern sites?
– Basic CSS syntax, especially for font-family and color?
– Use coolors.co to choose colors and CodePen to practice Create.
– Develop color palette for new website.
1
Class on Classes
– What is the value of applying classes?
– How do we style different sections of the page using classes?
– Start portfolio website on Codepen by designing its homepage and linking the recipe site.
1
Backgrounds and Banners
– How to add background images to a web page using CSS.
– When to use IDs versus classes Apply.
– Add a background image and a heading with an ID to the student’s portfolio page.
– Make a banner using a free image and a heading with an ID.
1
Pick a Card
– How to use HTML and CSS to create clickable cards, a popular user interface element.
– Use banner page from last class to add project cards that will elegantly display the student’s portfolio.
– Use a series of divs along with CSS box-shadow to create the effect of a 3D card.
– Develop a HTML/CSS portfolio card that “floats” above the screen and leads to a specific project.
1
Shadows and Boxes
– The box-shadow effects with CSS cards.
– How a link can be turned into a button.
– Develop a HTML/CSS portfolio card that “floats” above the screen and has a button to lead to the project.
1
Hover it
– CSS has additional effects that can be used after certain actions: hover is one of them
– How a hover action is added to a link.
– Use the cards from the last lesson to animate the button with a hover animation.
– Develop an intuitive button for the 3D project cards using the :hover effect.
1
Online Store
– How wireframing works and why it’s an important first step before beginning development
– What components make up an online store?
– Use existing online stores to inspire design
– Develop a fictional online store with the concepts learned in this class.
4
Pictures
