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.
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.
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.
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.
– 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.
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.
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.
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.
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.
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.
– 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.
– 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.