SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast murphaloid's Avatar
    Join Date
    Oct 2011
    Posts
    54
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There's around a billion sites on the web you could start with.

    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.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by murphaloid View Post
    I'm looking for website designs so I can practice building with html/css. Nothing too complex!

    Any ideas or links?

    Thanks
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,571
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mikl~ thanks for that link, you just gave me something to play around with and develop myself :P

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Lil_Kins0 View Post
    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.
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Lil_Kins0 View Post
    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...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  11. #11
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's around a billion sites on the web you could start with.

    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 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

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    I'd built a few sites from scratch, to my own design, before I tried to copy (or emulate ) 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.

  13. #13
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Practice on your own design. There is no better practice that doing something from scratch! ^__^

    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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  14. #14
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    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
    ictus==""

  15. #15
    SitePoint Enthusiast murphaloid's Avatar
    Join Date
    Oct 2011
    Posts
    54
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks to you all for some really helpful tips and links there. Lots of food for thought.

  16. #16
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,571
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I'd rather use the word emulate rather than copy.
    Or maybe "be inspired by".

    Mike

  17. #17
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Mikl View Post
    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

  18. #18
    SitePoint Zealot coloradojaguar's Avatar
    Join Date
    Sep 2011
    Location
    Southwestern Mountains
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Hosted solutions provider since 1998 - UK, Atlanta, L.A.,
    JaguarPC.com - Managed Hybrid Servers |
    Managed VPS Hosting | Dedicated Servers

  19. #19
    SitePoint Member Walden's Avatar
    Join Date
    Apr 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Walden View Post
    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 and gets some of them curious to "deconstruct" the style sheets. (And by the way, welcome to SitePoint, Walden!)

  21. #21
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Germany
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to analyze existing HTML/CSS Layouts you can download a Theme from themeforest.net or similar sites.

    You can see then how the PSD files are made, how the HTML structure is build up and how the CSS keeps it all together

  22. #22
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    All true, Technoir, but it's worth pointing out that many of the best sites have no PSDs associated with them. The designers build them in the browser. Also, most of ThemeForest's work is commercial, which means you would have to pay for the themes to download and deconstruct them. When there are millions of very good sites out there to examine for free, I see no reason to buy a theme merely to take it apart and see how it functions.

  23. #23
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Black Max View Post
    All true, Technoir, but it's worth pointing out that many of the best sites have no PSDs associated with them. The designers build them in the browser. Also, most of ThemeForest's work is commercial, which means you would have to pay for the themes to download and deconstruct them. When there are millions of very good sites out there to examine for free, I see no reason to buy a theme merely to take it apart and see how it functions.
    Yeah. Especially when.......well, you can do that to any website on the web. (View Source)

    ~TehYoyo

  24. #24
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    hmmm best option is to select the sites you like more and then use tools like firebug to get help for CSS and HTML, or if you want PSDs there are lot of sites which allow you free PSDs just google it but I suggest

    www.dotemplate.com (also gives you HTML/CSS version of designs)
    www.freetemplatesonline.com

    hope it helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •