Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Toby Hines
Toby Hines
5,038 Points

Need some example grid based templates

Hi. I have completed the first adventure on creating a basic website. Sure I understand the title was "Basic" website and it is a great place to start but I was going along, copying and pasting and writing as Nick was talking and now want to see how much of the information i retained for actual use.

So I want to make some similar basic one page websites for a while and looking for templates online, some PSD files but I am struggling to find gridded ones. We are learning via the grid system, but talking to friends, a lot do not use them and for spacing around the page use other methods. Will I learn them here or just be limited to grids?

Will I have to go elsewhere to expand my knowledge? Right now, looking at random site codes, i cannot see grids in any of them.

But in the meantime, any resources of places I can download some gridded website templates to practise coding them myself please.

Thanks

6 Answers

Damian Dadswell
Damian Dadswell
7,277 Points

Hi Toby, I use responsive grid development for all my current websites. I find it an advantage having the control to specifically layout elements on the page and being responsive I can make it quite easily work on mobile devices too.

I would recommend the following as a great resource to get you started: http://www.columnal.com/

Obviously keep up the good work and training on here!

Good luck.

James Barnett
James Barnett
39,199 Points

Grids are an intermediate topic. You will learn more about how they work later. First you need to learn about how CSS works. I'd suggest you follow along with learn HTML & CSS learning adventure.

Your friends are bootlegging it. Use a grid. That being said, James is right on, using grids in CSS is not a very simple thing. Wait until you make it further into the HTML/CSS Adventure.

If, however, you want to understand more about how grids work in design, a great book to check out is Making and Breaking the Grid which gives you dozens of examples of grids both very regular and very abstract. It will give you a clearer picture on how designers use grids in layout.

Toby Hines
Toby Hines
5,038 Points

Thank you for the replies, I may have been mistaken to say I have finished the first adventure as I meant the whole programme of making a simple website. Have gone through HTML, CSS, putting the project onto the web and the deep dives for HTML and CSS and now wanted to practise making some myself.

All very easy typing out stuff as Nick tells you and when it is laid out and shown to you. I want to try and use the knowledge to make some website dummies of my own which I have to think about and try to apply the stuff that has been in all of those tutorials.

So was looking for some PSD files of websites that has used grids so I could try and code them and see if I can get them right. Seems to me a sensible way to learn is to actually do some.

I can of course just design some simple websites on a grid and then code them but for this moment in time, I have just done this part of the course and thought it would be easier to just grab some pre done grid PSD's. There are thousands of PSD files of sites to design and code, without grids, but with grids, harder to find.

Hey Toby,

You can visit WM.com and try to reproduce the home page. It is laid out using the 960 grid system which is static and easy to get up and running with.

p.s. they use the 16 column grid :)

James Barnett
James Barnett
39,199 Points

You can also reproduce sites featured on built with bootstrap as Twitter bootstrap is a grid system.

Agreed James, great place to go when you are ready to mess with responsive grids.

I figured it might be better for him to start with static grids to get get the hang of it, then move on to things like Bootstrap and Gumby...they have a bit of a learning curve :)

Toby Hines
Toby Hines
5,038 Points

Thank you. I appreciate the replies and I will go over there and get playing. New to treehouse and really impressed and the replies on this are a big reason what.

Thank you again