Static Websites

A collection of 33 posts

Static Websites

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

Warmup

First Bootstrap Warmup

Using Bootstrap, create a site that uses the following bootstrap components: * Navbar * 3 Buttons of various colors & sizes * An

tag that is centered on the page * 2 Glyphicons of any kind, anywhere 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 the page by interacting with different HTML Events. The square's color will change as follows: * Blue when the mouse hovers

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 collect the following information from the user: * First name (text input) * Last name (text input) * Age (number input) * Gender (radio

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 table (rows) * Must have a heading row and a body (and optionally a footer row) * Must be styled well with

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 really not that good. So you decide to create a website where only your friends/frenemies/family can come to

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. The type of business doesn't really matter, so get creative with it. This will be a static website, so 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 copy into your project. Complete the following: 1. Select the body and give it a background color of #111111. 2.

Exercise

Newsies

You are going to recreate the front page of a newspaper using block, inline and inline-block elements. Your newspaper should have: 1. A header with the name of your newspaper 2. A title for the front page article 3. A body with a story. 4. Several words in the body

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 page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are

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 no broken links. Your page should include a title tag, a first-level header that says anything you want, and a

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 the words "Hello, world!" as text on the screen. If you can't remember what the basic pieces of an HTML document are,

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" by actually using a thick, white border

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 thing with jQuery. Why would we use jQuery or JavaScript? JavaScript is, frankly, what makes websites cool. It allows a

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 colored box at the top to

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 the color hex values from here: http://html-color-codes.info/colors-from-image/ (Just save this image and upload it to the site)

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 of the world has come upon us" or something of the sort. (Feel free to get creative, too - change the

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 wireframe your website on paper (or in Photoshop/etc) before you start laying things out in code. Just draw up

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 and images are provided below: Font: Mario 256

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: 1. When the page loads or refreshes: * The player will enter their name * The player will choose between 3 characters (images) * After

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: 1. Make the main headline dark green. 2. Use the font family "Georgia" for the main headline and the sub-headline. 3. Center the text of the main headline and the

JavaScript

Looper

You are going to create a for loop inside of an inline

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 to add (so you don't need to type it all out manually): CIA Realizes It's Been Using Black Highlighters All