Web Design Basics

Summary

In this project, I created a “splash page” website that gives people a glimpse at me, and provides them with links about me.

Paper Mockup

Screen shot 2014-03-21 at 9.59.17 AM

This was what I came up with when we drew an idea of what we wanted our splash page to look like. I know, I take after Davinci. At first I was thinking maybe I wanted to put my name in opaque lettering across the whole image, really big, but changed my mind once I got to Illustrator and didn’t like it. I knew I wanted the icon links and the quote separate, and that I wanted the icons to look uniform.

Illustrator Mockup

 

Screen shot 2014-03-21 at 9.58.45 AMhttp://www.flickr.com/photos/117575614@N04/13311742073/in/photostream/

This is what I put together in Illustrator, but I didn’t love it. I thought the icons drew too much attention, but didn’t want to spend the time here to make them black and white, since it was only the Illustrator step. I thought the opacity of my name was cool, and liked the way it turned out overall. It felt simple yet artistic, and smooth.

Sample HTML and CSS Code

CODE FINAL

 

This is my code for the project, I am pretty proud of it. You may have to zoom in on your browser to read the code, but it can be done. Don’t click on the image, it will take you to a very tiny version. I had a war with Edublogs on this and lost. Anyways, back to the code itself. I had never used HTML or coded a website before, and considering this I think it is impressive. I encountered problems at times, and one thing I know is that cleaning up the code visually can help bugs be exposed, so I did that with this project. I tried to always keep the code really neat, and added comments later that explained what I was doing.

 

Screenshot of Finished Splash Page

Screen shot 2014-03-21 at 10.07.29 AM

 

One effect that does not show up with the screenshot above is that when the mouse hovers over the links, they become darker. I used a cool feature with the opacity of the icons, and had to modify them individually so that they would do this, but also look uniform when they were sitting there as normal links. I had to use the “link class” command, and defined four links at the top of my code; “a.facebook”, “a.gmail”, “a.insta”, and “a.edub”, and then was able to modify each of these. I used the command a.(whichever link i would modify) followed by “opacity: (a value from 0 – 1);” for how dark the icon would appear when not being hovered over. For when the mouse was hovering over an icon, I used “a.(whichever link):hover” followed by “opacity:(a higher value from 0-1);”  This creates a really cool effect when the web page is live, and is very aesthetically pleasing.

What I Learned

The basic principles of html immediately made sense to me, and I was eager to learn how to code. I found that I really enjoyed html, it’s kind of like a puzzle to me, and this is one of the ways my mind works. Sometimes it was frustrating, but it’s a rewarding feeling to wrestle with code and make something come out the way it was designed in my head. My code for this page was very simple, I had only several main divs (divisions / boxes), one for the background photo, one for my name, one for the quote, and 3 boxes for the link icons. The link icons were one of the trickiest parts for me, I wanted them to line up and look neat. I used one box for the top two; Facebook and Mail, and had to use two separate boxes for the bottom two icons; Instagram and Edublogs. With the first “linkbox,” as I called it, I was able to just put in both of the icons and they lined up fairly neatly, but problems arose when I tried to put a similar box below it. I then realized that I needed to use individual boxes for Instagram and Edublogs, and use the “position: fixed” command in order that they would sit next to one another horizontally. This also made it possible to space them correctly.

 

Credits

Here’s a link by W3 Schools that I followed :  http://www.w3schools.com/css/css_positioning.asp

I would also like to give credit to TypeSETit for the font “Alex Brush” that I used in my splash page, it was really cool looking. I found it here: http://www.fontsquirrel.com/fonts/alex-brush

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *