Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Website work in progress

This is very much still a work in progress but I have started to make a simple website for my girlfriend after doing the 'how to make a website' track. It is very much a work in progress and still needs some more styling and content. I let her choose the colours which I regret a bit but hey ho, I am just a beginner. Any constructive criticism would be welcomed.

Also one of the links with an img on the lower page doesn't like loading either. Works fine when tested but not when live

www.hayleyphelpschildminder.com

4 Answers

yeah, the colours might need to be tweaked. If you desaturate the pink a little it would make it easier on the eyes. One thing that could bring your site together is if you put all your content from each section (header, main content, footer) into a wrapper div.

the css for that wrapper could be something like:

.wrapper { width: 80%; margin: 0 auto; }

This will centre your content, give it some negative space on each side and give it space to breathe. Putting all of your content into wrappers will make the site look consistent. So for example:

            <header>
              <div class="wrapper">
                <p>content</p>
              </div>
            </header>

            <section>
              <div class="wrapper">
                <p>content</p>
              </div>
            </section>

            <footer>
              <div class="wrapper">
                <p>content</p>
              </div>
            </footer>

I just have a spelling correction, it's "testimonials" not "testamonials" ^_^

oops, updated now

I have a wrapper and on a desktop pc it does become visible

Also I wanted the footer to stay the full width as I had seen this on many other sites and liked it

Yes, you can have both the header(and its background img) and the footer be the full width, but have the content itself like the logo and links wrapped so its not right at the edge. You'll notice most sites, including treehouse's intro splash page do this even with full width sections.

Anyways, just my suggestion, at the end of the day you have to go what with whatever aesthetics you think is best for your project.

Yes I know what you mean its a good look. My wrapper is 70% wide and has all of the main content in it but the media queries mean that it only becomes visible on a full screen desktop pc. Maybe I can tweak it to apply to tablets too but make it maybe 90% for the phone screens