Grow your CSS skills. Land your dream job.

First Website Version 1

  • # August 5, 2014 at 11:43 am

    Hey everyone, I just finished up the first version of my first site. What do you guys think? Any tips, tricks, or tweaks to make it better? The next thing on my to-do list is to make a contact form for users to fill out, but I havent learned how to do that yet.

    Also, why is there a white gap at the bottom of the site? Im not sure what causes that…

    Thanks for your input!

    # August 5, 2014 at 12:13 pm

    I can give you a few basic problems that will help improve the overall appearance:

    • Typography needs work
    • unnecessary images
    • poor quality of images
    • readability issues (logo mainly)

    It might help if you uploaded this to your own server rather than displaying it on CodePen.

    # August 6, 2014 at 9:26 am

    Hey Chris, I am working on redoing the logo.. for now I just have it as a place holder… It was perfect, but when I uploaded it, it didnt look right. Im thinking I just didnt save it before I uploaded it! oops! Rookie mistake.

    What images are unnecessary?

    What is wrong with the font?

    Thanks!

    # August 6, 2014 at 9:29 am

    If you don’t have a server you can use Dropbox to test webpages

    SIte44.com is pretty good.

    http://www.maketecheasier.com/turn-dropbox-account-into-web-host

    also

    http://www.maketecheasier.com/4-ways-to-host-your-website-on-dropbox/

    # August 6, 2014 at 10:58 am

    I think it is a pretty good start. The main graphic behind the Tatum Art logo definitely needs fixed up though. It is really grainy. You’re headed in the right direction though.

    # August 6, 2014 at 12:41 pm

    I like the over-all design, but you’ve just coded it in a very overly complex and inflexible way.

    I think you should at least change all those 1400px width divs to 100%, on any window larger than that you’ll get a white bar all the way down the right side, and any window smaller will create a horizontal scroll bar.
    plus to center any element within those divs you can just use margin-left:auto; margin-right: auto;

    there’s alot of other places where the code should probably be re-worked a bit…

    I think the only place the typography doesn’t work is in the nav bar. I like raleway as well, but in this instance, I don’t think it works so well bold, in all caps.

    I feel like the logo is readable as long as it’s over the dark grey area of the background photo.

    umm, minor point but maybe “news” should be renamed “recent work”?

    I think what chrisburton meant by unnecessary images are those instance where you’re using an image when css or html would suffice. For example, in your contact paragraph, instead of using an image to create the border, you could just give the paragraph a border in your css.

    # August 6, 2014 at 1:19 pm

    What images are unnecessary?

    I think what chrisburton meant by unnecessary images are those instance where you’re using an image when css or html would suffice. For example, in your contact paragraph, instead of using an image to create the border, you could just give the paragraph a border in your css.

    Correct.

    http://i.imgur.com/oJVA91T.png. That image can easily be accomplished with CSS and would save on page load (slightly) and an additional http request. And as stated above, some of the images are really pixelated.

    What is wrong with the font?

    Lobster looks severely out of place. I have only seen it used once beautifully on a sign and horribly across the web a thousand times. Lobster has a bad rep because it is used in the worst of ways imaginable. You’re also using Raleway for your body text but that’s not what it was designed for. Raleway is a display typeface. Display and text typefaces are completely different.

    # August 6, 2014 at 2:14 pm

    maybe “news” should be renamed “recent work”?

    Or just ‘Work’.

    # August 8, 2014 at 10:38 am

    @Bearhead. Ok I will redo that part.. This is my first time coding ANYTHING so Im not surprised I have made it harder than it needs to be. Thank you!

    For the box around the contact area, how do I do that in CSS?

    As far as the top image goes, that is the only copy I have of that image.. I am still waiting on a new image.

    Ok so once I fix that stuff, how do I go about making it a live site? Do I pay for a server and just upload the files? Sorry if thats a really stupid question, I just don’t really know.

    # August 8, 2014 at 12:59 pm

    Its super easy to add borders to elements. In your case just addborder: 3px solid #000; to .Contact p, you might also want to give it some padding so that the border isn’t so tight against the text. searching “border” on this site will return lots more detailed discussions and articles about it.

    Yes, to get your site live you will need to buy a domain name and webhosting from a service like godaddy or the like. Then you can just upload your files to the webhost.

    # August 8, 2014 at 7:29 pm

    @NReed253

    Ok so once I fix that stuff, how do I go about making it a live site? Do I pay for a server and just upload the files? Sorry if thats a really stupid question, I just don’t really know.

    Well, you have several options here. Do you want to learn how to code or do you just want your website to be maintainable so you can add things to it with ease?

    If you wish to learn to code then we can lead you in that direction. If you do not, I would recommend Squarespace.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".