Unit 1
Basic Site Evaluation and Rubric Creations
The first thing that we covered was the basics of website design. We spoke about what gives a website visual appeal, and on the other hand, what makes a website ugly. We used this information to create a class rubric based off of our own observations.
Color Theory in Web Design
Another thing that we touched on was color theory in web design. We discussed what colors evoke what emotion. We then learned about colors in the computer world. Because computers use additive colors, mixing colors on a screen is much different than mixing paint. Computers read color through hex codes, so we played a game to see if we could predict the color of a given hex code.
Web Standards and Accessible Design
An important topic that we covered was web accessibility. Web accessibility means making a website that everyone can use, regardless of disabilities. The most talked about disability was color blindness; due to how common it is. We learned that when making a website, you shouldn’t use colors as the main way to interpret information. For example, if you had a chart and the only distinguishing features for the different data sets was color, then it is very possible that a color blind person couldn’t properly interpret the chart. We also used a disability web simulator to learn about other disabilities but the accuracy varied.
Organizing & Planning a Website
When organizing and planning our website, we made a website chart. First we practiced by creating a website chart for our school’s website. Our goal with that activity was to reorganize an already existing website. After that activity, we briefly made a smaller one for our own website. We used it to plan what page would lead to what.
Unit 2
HTML Basics
When we began learning html, we were taught the basics such as: declaring document type, opening and closing tags, headings, paragraphs, divs and navs, and titles. We learned that the head of the HTML document (which is marked with "head" opening and closing tags) is used to store metadata. Metadata is data about data. In the context of web design, metadata is the title that is displayed for our website, of an external stylesheet that is linked into the HTML document. The body of the document (which is marked with
opening and closing tags) is where all of the visible content of the website is stored. Inside the body, we created lists, headings, paragraphs, and tables.Tables
Tables are a thing that you can create in the body of an HTML document. They are used in websites everywhere. They are mainly used to compare and sort data, but can also be used for other things like sorting instagram posts. Tables are created with the "table" tags. Inside of the "table" tags, there are "thead" and "tbody" tags. The "thead" (which stands for table head) tags are used to create the top column of the table and the "tbody" tags are for all of the other columns. Beyond that you can customize your table as much as you please using CSS.
Embedding Videos
The last thing that we learned about in unit 2 was embedding videos. Videos are embedded using the "video" tags. Using other tags called “track” and “source”, you can add captions or include other forms of video (mp4, webm, ect.). If you use “control poster” and have it equal the image that you want displayed before the video is played.
Unit 3
Coming Soon...
Unit 4
In this unit, we were taught about graphics. The first thing that we did was educate ourselves on copyright. We learned about websites that have free to use images and continued to use those for our assignments throughout this unit. We also briefly learned how to scan in physical photos and add them to our website.
Web Photo Album
The first thing we did was create a web photo album for a subject of our choice. I chose to make mine of snakes, to match the rest of my website. We made it by downloading images, and then editing and creating copies so that we have one normal-sized image and one thumbnail image for each. We inserted the thumbnail images onto our graphics page and linked the respective images to them.
Photoshop Assignments
We used photoshop to create gifs, color buttons, and make a banner. We created a gif by using images that were taken back to back, and making an animation out of them. We then saved it as a GIF file and inserted it into our graphics page. We used Photoshop to color in icons as well. We downloaded some Icons from a website called “The Noun Project” and colored them in with colors from our website. We used those colored icons as buttons in our footers. The last thing that we did with Photoshop was creating a banner. We gathered a bunch of images and collaged them together. I chose photos of snakes, eyes, a frog, a cat, and teeth. I wanted to choose subject matter that isn’t typically thought of as beautiful. I then used a gradient map with the colors of my website in order to blend it seamlessly with my website.
Unit 5
Coming Soon...
Unit 6
Coming Soon...
Unit 7
Coming Soon...