Design and create a single page guessing game using HTML, CSS, and jQuery. The game should ask a user to answer a question and then react to that answer. This could be a game like Hot or Cold where the game is only over once the user guesses correctly or could be a one chance game like Rock, Paper, Scissors. The game should have a different answer each time the page is loaded, meaning that the game cannot be "Guess My Middle Name" and the answer is always "George" but it could be "Guess a Name" and that name is randomly generated from a list of names.
HTML/CSS The page only needs two things, a question and a place where the user can input an answer. More might be necessary depending on the complexity of the game you are building. It should also be responsive.
jQuery The jQuery should have some kind of variable, a way to check the input against that variable, and then an outcome or outcomes based on whether that input is right or wrong.
Create a single page that has at least three unique interactions on it using jQuery. The interactions should each use a different mouse event to start the interaction and each mouse event should do something different. For example, a mouse click could change the color of an object but hovering could change the position of some text. The content of the page should be a list of your top five favorite somethings. That could be your top five favorite songs, movies, places in the world, colors, etc.
The interactions should not be hidden and should try to have some relevance to the content of your list.
Broadly speaking, websites are an interactive collection of things. Whether it be an e-commerce site, a newspaper or journal site, an email application, or a portfolio, the website is the container for a collection of digital objects.
Create a responsive website for a collection of your choosing. You might choose to create a portfolio website but I encourage you to choose a different collection of things than your own work. The collection can be something you collect — baseball cards, stickers, writing, photographs of leaves — or a collection you from somewhere else — the music of a band, art from a museum, items from an online store. The number of items in the collection should be around 10.
The final site should have a home page, detail pages for the individual items, and an about page. The home page should be a broad overview of the collection that draws users in while the detail pages should elaborate on a specific item in the collection with more text and more images. The about page should tell the user about the collection, where it came from, how it was gathered, the history of it, and any other relevant information.
Create a Halloween themed image using drawing in the browser using only HTML and CSS. Do do this you will draw some divs, position them on the page, and then style each piece with CSS. The divs will then get layered and moved around to make your final drawing. Take a look at this link for a reference on how these might get set up.
At the end of class we will display them all and then there will be a People's Choice award and a Teacher's Choice award based on the quality of the code and the final image. The prizes are to be determined.
Start with copies of your Exercise 1 files. The first step is to improve the design of that page using ideas and principles we have learned up to this point — things like heirarchy, contrast, column widths, type size. The second step is to make it responsive. You will need a mobile version, something below 600px, and then the desktop version, something above 600px. The changes between screen sizes should be noticeable with the main principle being a well designed site.
Design a responsive single page site. The site should have a mobile version (320px–768px), tablet version (768px–1024px), small desktop version (1024px–2000px), and large desktop version (2000px+). The content of the site is up to you but you should have at least text, images, and links to external sites. The digital versions should be built in Sketch, Illustrator, or XD and the final will be coded by you.
Some ideas could be a site for a current issue, a site re-presenting a longform article, or a site acting as a type specimen.
Create two wireframes for the home page of the site you used for your site map. The first wireframe should be done on Sketch, Illustrator, or XD and use the widest version of the site you can see. The second wireframe should be done with pen/pencil and paper and use the mobile version of the site.
Upload an image of both wireframes to your site.
Select a book from this list. Using the title, author, chapter title, and first paragraph, make 10 different layouts. Each layout should be different and focus on contrast, heirarchy, and positioning. Design some pages with one typeface and some pages with multiple typefaces. Try symmetrical and asymmetrical layouts and use color, size, weight, style and other typographic concepts to create a well designed, readable page.
Upload each layout to your site.
Create a site map showing the structure and organization of a website. Also include who you think the intended audience is and what the main action or actions the site is hoping a user to accomplish. The site needs to be more than a few pages. It should multiple levels of information across multiple pages. You can create your sitemap in any software you choose but it needs to be done digitally. My recommendation would be to use Illustrator.
Upload your final site map to your site and include a link to the website you made the site map for.
The structure of a website is as equally important as the design of a website. Getting from page X to page Y needs to be intuitive and simple. This structure also needs to be reflected on the back end. Create a site that takes the user through a narrative using text, links, and multiple pages.
Part 1 - Choose the Text Pick a text that can be broken into parts. The text can be something straight forward like a news article or more abstract like a poem. The text needs to be long enough to be broken into at least 10 pages.
Part 2 - Build the Site Now weave these distinct units together using many html pages and links. Allow for user choice, branching structures, loops, etc. The linking does not have to follow a linear sequence. See if you can produce new readings and ways of traversing your composition. When linking different parts of the composition together, think of the meaning of each link. Are they linking between similar content? Similar characters? Similar actions? Are the meaning of links consistent across all of your pages? Do you have different types of links? How could these different types of links be indicated? Remember that you cannot add words to the text, the links you create must exist in the original words.
You may include additional materials in the webpages if they add meaning to your sequences of links.
File naming and organization are important parts of making sure your files are easy to find both visually and while writing links. On Blackboard there is a simple site with a terrible file structure. Rename these files something clear and simple and then organize them into a nice folder structure. The site has a main page and then 3 sub pages for an about page, a menus page, and a gallery page.
Once you have organized and renamed the files, take a screenshot of the new structure and post it to your site. If you cannot get a view where all the files and folders are shown in one folder, take multiple screenshots or position multiple folders on the screen to show the structure.
Part 1 - The Programmer Create a simple drawing in Illustrator in 2 minutes. Once you are finished, write a very precise set of instructions that will be executed by a computer. A classmate will be the computer and the result of that person following your program should result in an exact copy of your drawing. You cannot use images or verbal communications to help explain your instructions, only written words. You also cannot let the computer see what the final drawing should look like.
Upload the instructions to your website but do not upload the drawing yet.
Part 2 - The Computer Using a classmates program, execute those instructions to recreate the drawing. Do not assume instructions, follow what is written as closely as you can. Send the final drawing back to the programmer. Do this step for two different programs.
Part 3 - Upload Once you have two drawings back from the two different computers, upload the two drawings along with your original to the same page as the instructions.
Brief History Lesson A computer was actually a job description held by many humans at one point in time, especially during WWII, where computers (mostly women) were hired to do calculation and computation on vast quantities of numbers. Also, Ada Lovelace (December 10, 1815–November 17, 1852), the daughter of poet Lord Byron, published the first algorithm intended to be carried out by a machine and is regarded as the first computer programmer. Furthermore, the term "debugging" originated from the actions of programmer Grace Hopper (December 9, 1906–January 1, 1992), who took a literal moth out of military computer. In today's male-dominated tech fields, it's important recognize the roots of computation and programming.
A single serve website is comprised of a single page that only does one thing. You will come up with a concept and design for a single serve website and then build the website. The concept can be simple or complex but the site must only be a single page and serve a single function. The URL of the site should help explain the concept and the content should help reinforce the URL. If you need a place to look at single serve websites go here. That website is a single serve website that takes you to other single serve websites.
Recreate the tennis court layout from E2 using absolute positioning.
Using what you have learned so far, make some patterns with html. You can use divs or type to make these patterns. You should make five different patterns.
Recreate the layouts in the E2 PDF on Blackboard with HTML using divs and floats. Remember that you might need to contain some divs inside other divs to get the layouts to work.
Copy and paste the text from the source file to your HTML file. Mark up the document by keeping in mind which HTML tags are appropriate for which segments of content. Using your new knowledge of some simple CSS styling properties, style the Carl Dair content. Keep in mind web font implementation and font properties. Play with color and scale, and experiment to get familiar with this new language.
Download the Essay
Websites do not have to be complicated. Make a website that answers the questions that are asked in class.