Web design basics

Summary:

This project was meant to explore the basics and uses of HTML coding, and also how to craft well designed splash pages that attract peoples attention and use certain elements of CSS coding and HTML to make good splash pages for websites. I used a picture of a Rainbow cat for the backround image because not only does it attract the attention of the people who look at it but it also make you think about how it was created, and it kind of expresses my life in a swift and subtle way. I used a template of HTML and CSS  coding and started changing the variables in the coed to make the blog be individualized and all the links to go to my homepages of each website. I also changed the sizes of some of the graphics so they would blend together better. The last step was to start it up in Adobe Dreamweaver and preview it in webpage form.

Paper Mock up

Illustrator Mock Up

Splash page

Sample HTML and CSS code

What I learned

My  adventures into this project has shown me a couple things about the web design workflow. I would describe Web design workflow with how I worked through the HTML and CSS coding, and how I felt about it each day with solving problems, for me I used my basic mock up on the paper as the image, then transfered it over to AI, after that I began to change out variables in Dreamweaver. For the most part I enjoyed working through the struggles of a new coder. With the templates that our instructor, Mr. Leduc let us change, we could fully customize the appearance of the splash page. I ran into a couple problems, one of the first was when I was beginning to change the codes, the background image that I was trying to use was not correctly formatted for the backround, making it to big. I then had to look up a YouTube video to look for the process that changes the sizes of the image to the background. It didn’t take more than 30 seconds to fix once I had done this.

Here is a link to a tutorial that I followed: http://www.w3schools.com/css/css_display_visibility.asp

Leave a Reply

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