Loading...
View unanswered posts | View active topics It is currently Sun May 19, 2019 4:37 pm



Reply to topic  [ 7 posts ] 
 Nean's Webdesign Journey 
Author Message
Sheikah Elder
User avatar

Joined: Thu May 03, 2007 8:33 pm
Posts: 1456
Gender: Male
Post Nean's Webdesign Journey • Posted: Fri Mar 02, 2012 2:25 am
So I'm taking an advanced web design course at college, and am finally progressing at a reasonable rate (Or at least a rate at which I finally have something to show for). However, I am not really artistic in terms of aesthetically appealing design, so I would appreciate any feedback from you creative folk (Especially those of you with webdesign backgrounds... That means you Darth.) Anyways, since I'm to the point where I can write a webpage in HTML, style it with CSS, and add dynamic functionality with Javascript I'll be spending more and more times building sites to improve my skills, and will be posting all of those creations in this thread for you all to see/judge. Should also provide a pretty decent timeline to see how I progress.

Project One

So after a few months in the course, we have finally gotten to our first actual project, which is to style a pre built HTML page by attaching only your own CSS sheet. We are not allowed to change the HTML document in any shape, aside from linking to the CSS document. I've taken a pretty basic approach, but I am pretty content with the color scheme I have used. Constructive criticism, would be VERY appreciated. I have another week until it's due, and I know there's room for improvement.

Here is what we were given to modify:
http://home2.fvcc.edu/~anthonywstrong/X ... ample.html

And here is what I managed to make using only CSS:
http://home2.fvcc.edu/~anthonywstrong/X ... esign.html

Tell me what you think.

Also the CSS, for those of you who care:
Spoiler: show
Code:
@charset "UTF-8";
/* CSS Document */

#pageHeader
{
   background-color:#917A56;
   text-align:center;
   font-family: 'Ewert', cursive;
}
   
a
{
   color:#360;
}

#footer
{
   background-color:#917A56;
   text-align:center;
   margin-top:25px;
}

#linkList2
{
   border:#333  solid 1px;
}

#lselect
{
   background-color:#CC9258;
   text-align:left;
   border:#333  dashed 0.5px;
   margin-top:-17px;
}

#larchives
{
   background-color:#CC9258;
   text-align:left;
   border:#333  dashed 0.5px;
}

#lresources
{
   background-color:#CC9258;
   text-align:left;
   border:#333  dashed 0.5px;
}

#container
{
   background-color:#B4BA75;
   font-family:Arial, Helvetica, sans-serif;
   width:1024px;   
   margin:auto;
}

#preamble
{
   padding-left:10px;
   padding-right:10px;
}

#explanation
{
   padding-left:10px;
   padding-right:10px;
}

body
{
   background-image:url(MainPageBackground.jpg);
}

#quickSummary
{
   text-align:center;
   border:#000 thin 0.5px;
}

h1, h2, h3, h4, h5
{
   text-align:center;
}

h3.archives, h3.select, h3.resources
{
   text-align:left;
}

#participation
{
   float:right;
   width:400px;
   margin-right:50px;
   margin-top:-17px;
   padding-top:0;
   z-index:3;
}

#benefits
{
   clear:both;
   width:400px;
   float:right;
   margin-right:50px;
   margin-top:-25px;
   
}

#requirements
{
   width:450px;
   margin-left:50px;
   
}

a:visited {color:#90C;}
a:hover   {color:red;}
a:active  {color:yellow;}

_________________
Deku Lord wrote:
I only do stupid *Navi* out of necessity, and necessity only


Profile
Sheikah Elder
User avatar

Joined: Fri Apr 20, 2007 9:30 am
Posts: 1005
Location: In the middle of Knowhere
Gender: Female
Post Re: Nean's Webdesign Journey • Posted: Fri Mar 02, 2012 11:58 am
Looks pretty decent. As far as your code goes, it's pretty clean. I like to save lines by doing the following:

Code:
.variable {
cause: effect;
cause: effect;
cause: effect; }


As far as the design element goes, aesthetically pleasing colors are defined as such: http://en.wikipedia.org/wiki/Web_colors#X11_color_names. I tend to visit this page from time to time when I'm looking for a color palette in some of my shop work. Overall, you're lookin' pretty good. :D

_________________
Image
Image
[12:08:29 PM] AkaAnonymous: I buy expensive things and talk to pretty girls all day. When I'm not doing that, I usually act like I'm 10. Because 10 is awesome.


Profile
Sheikah Elder
User avatar

Joined: Thu May 03, 2007 8:33 pm
Posts: 1456
Gender: Male
Post Re: Nean's Webdesign Journey • Posted: Sat Mar 03, 2012 2:23 am
AkaAnonymous wrote:
Looks pretty decent. As far as your code goes, it's pretty clean. I like to save lines by doing the following:

Code:
.variable {
cause: effect;
cause: effect;
cause: effect; }


As far as the design element goes, aesthetically pleasing colors are defined as such: http://en.wikipedia.org/wiki/Web_colors#X11_color_names. I tend to visit this page from time to time when I'm looking for a color palette in some of my shop work. Overall, you're lookin' pretty good. :D


Thank you, that should be a pretty helpful resource. I've been using Kuler for my projects lately:

http://kuler.adobe.com/

I used to worry about eliminating lines of code, but after going through some programming course I have learned to embrace a simple, and clean style of formatting. No matter what I'm working with, if it requires curly braces, I use them so:
Code:
function (parameter)
{

}

_________________
Deku Lord wrote:
I only do stupid *Navi* out of necessity, and necessity only


Profile
Sheikah Elder
User avatar

Joined: Fri Apr 20, 2007 9:30 am
Posts: 1005
Location: In the middle of Knowhere
Gender: Female
Post Re: Nean's Webdesign Journey • Posted: Sat Mar 03, 2012 6:29 am
Oh wow, I never knew about Kuler. I just added that to my bookmarks. :D

_________________
Image
Image
[12:08:29 PM] AkaAnonymous: I buy expensive things and talk to pretty girls all day. When I'm not doing that, I usually act like I'm 10. Because 10 is awesome.


Profile
Sheikah Elder
User avatar

Joined: Thu May 03, 2007 8:33 pm
Posts: 1456
Gender: Male
Post Re: Nean's Webdesign Journey • Posted: Sat Mar 03, 2012 8:35 pm
Which looks better?

The first one:
http://home2.fvcc.edu/~anthonywstrong/X ... esign.html

Or the Second one:
http://home2.fvcc.edu/~anthonywstrong/X ... esign.html

_________________
Deku Lord wrote:
I only do stupid *Navi* out of necessity, and necessity only


Profile
Online
Administrator
User avatar

Joined: Tue Oct 24, 2006 3:40 pm
Posts: 2342
Location: Earth
Gender: Male
Post Re: Nean's Webdesign Journey • Posted: Sat Mar 03, 2012 9:44 pm
I prefer the second, myself. Makes the outlined bit stand out more.

I do notice, however, that the "xhtml css cc 508 aaa" line at the bottom is off centre in the second. Is that meant to happen?

_________________
Image
Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.

~Samuel Clemens


Profile
Sheikah Elder
User avatar

Joined: Thu May 03, 2007 8:33 pm
Posts: 1456
Gender: Male
Post Re: Nean's Webdesign Journey • Posted: Sat Mar 03, 2012 9:45 pm
Deku Lord wrote:
I prefer the second, myself. Makes the outlined bit stand out more.

I do notice, however, that the "xhtml css cc 508 aaa" line at the bottom is off centre in the second. Is that meant to happen?


Yeah, it looks goddamn retarded when it's left or right aligned. I could just make it sit at the VERY bottom of the page but meh.

_________________
Deku Lord wrote:
I only do stupid *Navi* out of necessity, and necessity only


Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.