Static Websites - V School | Better Humans, Better Outcomes

Static Website of Own Choosing

Make a website of your own choosing. It can be about any topic you want, can include 1 or more pages, and should follow some generic principles of good web

Warmup

First Bootstrap Warmup

Using Bootstrap, create a site that uses the following bootstrap components: Navbar 3 Buttons of various colors & sizes An <h1> tag that is centered on the page

Exercise

DJ JS

You're starting your business as a strictly online DJ (DJ JS) and you want to start by creating a website where people can change the color of a square on

Static Websites

Travel form

You just started your own airline, and you need to create a form to collect data about your passengers' upcoming travel plans so they can book their flight. You should

Static Websites

Table it!

Create an HTML table of any kind, containing any data you want. Requirements: Must have at least 4 columns in the table Must have at least 5 entries in the

Static Websites

High-Score Haven

You're sick of people not knowing about your AMA-ZING high scores, but you also don't want to post your scores to the general public, because let's be real - they're

Static Websites

Business Time

You just decided to start a business. You know you need a website, but you're bootstrapping your business without external funding, so you can't pay someone else to do it.

Exercise

CSS Wars: The Selector Awakens

In this exercise you will use several css selectors to restyle elements of this page. The HTML base is already written for you and is found below for you to

Exercise

Newsies

You are going to recreate the front page of a newspaper using block, inline and inline-block elements. Your newspaper should have: A header with the name of your newspaper A

Lesson

HTML Block vs. Inline and Important Elements

One major concept to grasp in HTML is the difference between block elements and inline elements. Block elements are those that take up the full width available on a web

Warmup

Bare Bones HTML Page - now with Styles!

Your task is to create a bare bones HTML page, and this time include a link to a stylesheet. You'll need to also create the stylesheet file so there are

Warmup

Bare Bones HTML Page

Create a "Hello World" HTML page that includes the most bare-bones HTML skeleton. Double-click on the HTML file to open it in your browser. It should only show

Static Websites

Color Grid From Scratch

Without using the bootstrap grid system, create a website that looks like this: You don't have to worry about making it responsive at this point. Here are the colors: #F5C6D6 #EE2E84 #85CFD8 #8DC63F #E76E34 Hints: It's easiest to get the even white "spacing&

JavaScript

Draw a Circle

Write a JavaScript program to draw a circle: Expected Output:

JavaScript

JavaScript and jQuery

This tutorial will cover how to do things in JavaScript and jQuery. We will first go through how to do something with JavaScript, then show how to do the same

Exercise

Colored boxes with jQuery

In our last tutorial, we covered selectors and event listeners in JavaScript and jQuery. In this tutorial, we will spend some time practicing with event listeners and use some basic JavaScript and Bootstrap to create this: A user will be able to click a

Warmup

Advanced Bootstrap Warmup

Using Bootstrap, create a webpage that looks nearly identical to this: Should look great on mobile devices as well. You can use these colors or your own. You can grab

JavaScript

End of the world!

Create a web page with a timer that starts at 20 seconds and counts down to 0. When it reaches 0, display some large text that says, "The end

JavaScript

Building a Simple Web Game (Approaching a larger project)

This article is going to explain how to approach building a larger project as well as how to build a simple RPG web game Wireframing It is always good to

HTML

Luigi's Flexbox

Warm up Using Flexbox create a webpage that looks like this: Notes It should be responsive, meaning when you shrink down to small screens it should look great. The font

Homework

RPG

This homework will take a while so get started as soon as possible. You are going to create a RPG web page. This is how it will work: When the

Bootstrap

Responsive Color Grid Bootstrap

Using the bootstrap grid system create a website that looks like this: Here are the colors: #F5C6D6 #EE2E84 #85CFD8 #8DC63F #E76E34

Static Websites

Silly CIA Part 2

Use the HTML article from theonion.com that you formatted in Part 1. Instructions Style the article using the following: Make the main headline dark green. Use the font family

JavaScript

Looper

You are going to create a for loop inside of an inline <script> tag that must iterate through an Array of img urls and then will insert an

HTML

Silly CIA Part 1

Instructions This article comes from theonion.com. Your goal is to write the appropriate HTML to make it look like the following: Here's the text of the page you need