Where can I get existing designs to practice on?

I’m looking for website designs so I can practice building with html/css. Nothing too complex!

Any ideas or links?

Thanks

There’s around a billion sites on the web you could start with. :lol:

Seriously, though, it’s probably better to find layouts that interest you and have a go at copying those / finding out how they work. You will develop your own style from that.

I’d just go to some peoples homepage on these forums (who actually know how to do HTML/CSS) and check their website out. Actually, on that note, perhaps @deathshadow can step in and link to his “for others” folder that he has. It has probably 100 folders, all containing markup he’s made for people on here. Check out the examples. It’s most likely good code :).

I’m not sure if this answers your question, but you might want to look at http://blog.html.it/layoutgala/. It shows a range of layouts that you can choose from, and lets you download the CSS in each case. Of course, you would still have to create your own markup, but at least this will be a start.

Mike

Just surf the web and pick something that interests you. For example; i wanted to design a little profile site, i came across Ryan’s site and i loved how simple i looks, i just played around with some codes and came up with something befitting.

Mikl~ thanks for that link, you just gave me something to play around with and develop myself :stuck_out_tongue:

I’d spice it up a bit. Even I find my site to be a bit bland. But then again, I have yet to add the cool little effects to my page.

Be creative with your own design :). I don’t have a knack for designing. I never have. I’ll be the first to admit it.

i just borrowed the layout concept and came up with something good.

Make sure you post it in the Websites review section of the website so we can all critique it when you’re done. Give you good feedback :).

I loved the feedback I got on my website, although I still need to get around to implementing some of their ideas…

sure, i’ll do that.

I’d rather use the word emulate rather than copy. Copy implies taking the code and copy/pasting it. Don’t do that. See the design and try to make it the same.

~TehYoyo

I’d built a few sites from scratch, to my own design, before I tried to copy (or emulate :p) a layout. It basically involved converting a site from a table layout to a pure CSS site, but keeping the layout. I found that much harder to do as a newbie than working on my own design. Just an observation. (:

Practice on your own design. There is no better practice that doing something from scratch! :slight_smile:

If you’re still convinced that you need to find a website, you’re better of finding some really old website to copy. I do not know of any decent website publishing old easy to code websites. For more attractive website look into 99designs. There is thousands of designs there to practice on. Good luck.

The very first site I programmed was a fluid html 4.0.1 compatible PHP and MySQL driven site. I didn’t know anything about HTML, CSS, PHP or MySQL. In retrospect it was too much to try to learn all at once; although I was successful, just took me a looooooooooong time.

I would not copy a site. Copying doesn’t teach you anything. Look at the content you have for your site and prioritize this into most to least important. Once you done that think semantically what you have. What is your page title, put this into an <h1> what sub sections do you have? Name these with <h2>, you may have other sub headings so use <h3><h4>… What paragraphs of info do you have put these in <p>. What lists do you have use <ul> or <ol>. Once you finish this you will have a very basic website with all your info.

Then decide how you want this info organized on the page. Find other examples of layout that could accommodate your content. Then use C.S.S. and as little of extra html markup as possible to try to lay-out your content in the same way as an example you liked.

Ask questions along this path as you run into things that are frustrating you. Don’t try too much in one fellow swoop. Try a change, if it works, proceed, otherwise, revert and try something else.

Hope this helps,
Steve

Hey thanks to you all for some really helpful tips and links there. Lots of food for thought.
:slight_smile:

Or maybe “be inspired by”.

Mike

Possibly. Although it’s always much easier to learn something when you know/can see what you want to make.

~TehYoyo

You can pick up some great designs and templates all across the web. I suggest that you start with the code and change it to see how it changes the design. You can get some really good ideas about what works and what doesn’t in the overall scheme that way. It also helps you to rapidly improve your coding skills.

Something I did to learn web design that I found really helpful was to open up sites that I liked the look of in Firefox, then go to View>Page Style>No Style. Then you can see how just the HTML works and is structured. Then reapply the styles and see all the amazing ways that CSS is applied on real-life sites, versus just doing a fake tutorial or something. I’ve learned a ton just from looking at the source code of successful websites.

Yes, an excellent way to learn. When I teach basic site construction to the middle schoolers, I like to show them CSS Zen Garden – first with NO CSS applied, then with several different styles applied. Wows 'em every time :slight_smile: and gets some of them curious to “deconstruct” the style sheets. (And by the way, welcome to SitePoint, Walden!)