Extreme Home Makeover

I will trying to turn Olathe Northwest High Schools web design:

 Link to site


Into Purina's web design:

Link to site

Smittys Lawn and Garden

This is an image of the site that I made. This is a recreation of Smitty's Lawn and Garden but what is different about this site is that this site is a Mobile-First version of the site which means that a web designer starts from the site looking as it would on a phone then move up until it would look like tell it was on a computer. This first image is the site when it is full screen on a computer.

This version of the site is what it would like if the site was on a phone. Do you notice that the nav bar at the top of the page folds into a hamburger menu? Also the paragraph folds in to fit the screen. Then the carousel becomes small to also fit the screen and finally the images and the caption go into more rows with one being in each row.

This is the site as it would be seen on a tablet. The nav bar covers three rows and because of that I had to move the paragraph down to be seen because if I had not added a media query then the viewer would not be able to see the paragraph. The carousel in this image has not scrunched yet and the images with captions have covered some rows and has put three images per row.

Jabberwocky

For this project I had to change the CSS to make it look better without changing the HTML, it was a tab bit hard to do but it wasn't very bad. Even though it could have looked better.

First, what I did was I made the background image cover the entire website. Then, I separated out each of the pieces of text into different divs. I had to also add in color and I made some of the text have weirdly colored shadows which makes it look old school. In the end I probably could have a better color scheme and not add as many shadows onto the text but besides those things it was alright.

This is the Jabberwocky site:
Jabberwocky Site

eMagine Project So Far

Rocket League

My website will be about Rocket League. So far what i have gotten down is what websites nav bar will look like. It is a nav bar with four different links. Pro Teams, RLCS, About RL, and Links. I also have the images and background images done and ready to be put into my website. i also have the logo I will be using and the website that I will be getting my information from. I will probably be needing more information though.

New Index Page

This is my site. This took quite a long time, such as trying to find a background. Trying to get the websites within my index to work was hard as well but I finally got it to work. What I had added in from the last one is a color scheme, depth and Google Web Fonts. The color scheme that I used was the color scheme that is used from the background and I had used that color scheme for everything in my website. Next I had added in depth and by that I added in the ribbon effect onto the headings that are within my website. With depth was how smoothly the background moves with the website. The final part to add was the Google web fonts that I put in for the text used throughout my website. I had to go to the Google Web Fonts website and I picked out 3 of there fonts out of the many that they have on there website. If you wanted to see the website fully instead of just looking at the screen capture go here:

eravensonline.net/students/886jjj10

TV25 Website Process

My TV25 website: http://eravensonline.net/students/886jjj10/TV25/TV25main.html

I had used an already per-built template for this project. In this screen capture each of the channels to the left are links that lead to the actual channel website and each have a hover effect of another color as well, so first i changed the names and colors of those. Then I had this slide show that had images already in it but not these images so I had to put these mages in and I also had to change the size of them to fit the size of the slideshow and so they are all the same. Then I had to change the the clickable slideshow buttons to bigger squares so that I could put in images into them put as you can see I never got to that and I couldn't really get that to work but I was ready to do that. And finally in this screen capture I changed the name and color of the nav bar that is on the top of the page to show TV25 on the right so that people who visit my website can get back to this homepage and the ones on the left side-How to watch, FAQ, and Contact Us are websites that I didn't get done and there description are pretty much self explanatory.

These also were already pretty much part of the prebuilt template that I had but i did have to change the colors and input text. First was the thing that I had talked about before which is a continue of the channels on the right most side. Then I had to do the Shows and the Youtube videos that were on the website that they had already up on the main TV25 website. The titles under the Shows and the Youtube videos are also links that bring someone to the video are websites. Also, the Youtube videos can be watchable on my website and someone does not have to view it on Youtube even though it would be a bit bigger on Youtube.

Logo Mockups

These are my cool logo mockups

Final Logo for Al's Amps

These are the Logos that I decided to use

These are the color schemes I used

These are the color worked on logos

Al's Amps Logos

This was my second thought since I probably should make the logo a bit similar so I mad this idea, it has the same type of fonts as my first idea, its just simpler. 

This was my first idea which was a lot more complex and I had made it a more realist type of amp then what a logo is supposed to look like, the lines are not exactly the same length apart from each other which I could fix.

Wordpress.com VS Wordpress.org

Wordpress.org

The main difference is that in wordpress.org, it is a person who is making the site with their ability to change what they want, they download the software and they create their own web server. This requires a hosting account as well, unlike worpress.com. But, you have an unlimited supply of themes, plugins, and all the customization a person needs. What stinks is that it requires ongoing site maintenance. What is great thought is that people can decide how the monetize there site. This is mostly for businesses and not for bloggers and beginners. When using wordpress.org, there us unlimited storage space.

Wordpress.com

With wordpress.com, the site does it all for you such as downloading the software, paying for the host, or managing a web server. Wordpress hosts all of the websites stuff so no one has to be in control of that. Peoples options for themes are limited unlike wordpress.org though, and people are not allowed to have plugins unless you pay a lot of money, a lot. Maintenance does not have to be controlled by the person so there isn't any ongoing maintenance. There is also limited room for monetizing your own site and the revenue has to be shared with wordpress.com. This is more for bloggers and for beginners, not really for businesses. Have limited storage space by using this site

https://wordpress.com/
https://wordpress.org/
https://ithemes.com/tutorials/wordpress-com-vs-wordpress-org/

Research: Embedded maps with pins that popup info

The client wants a map with pins on it where his clients live and when someone clicks on the pin then it gives the person that is viewing the site a paragraph about the project that the client has worked on when working on his clients houses and a picture of it. The three options that I chose for accomplishing this were Zillow, Lowes, and The North Face.

Zillow.com

Lowes.com

 TheNorthFace.com

I am going to use this as long with the programs that it used to help make the website