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
Theodore Griffin
2,584 PointsNeed help creating a basic webpage structure that uses only HTML & CSS, for my first project.
I have a pretty solid foundation of the basics of HTML & CSS, I just find myself getting stumped when it comes to designing a logical, organized page structure. I would like to create a website with multiple pages that includes images, links, navigation, paragraphs, a music player and possibly videos. Can someone please give me an idea of how I could structure my html documents? (ex. divs, sections, etc.) or at least guide me in the direction as to where I can find more information on this subject?
5 Answers
Chyno Deluxe
16,936 PointsStart off by listing what aspects of your site are most important to you and which can stand behind the scences on a separate page(i.e contact page).
Than you can get a better understanding on what you feel belongs on the home page. from there you can move on to structure and layout design. try wireframing your designs on a piece of paper or on photoshop so you can get ideas on how you would like the site to look before actually diving in blindly.
- Prepare
- Plan
- Perform
- Perfect
Gary Calhoun
10,317 PointsI think you first need to decide on your site layout in order to determine how you would go about coding it, but even before that would be to write some simple html then finally writing the css.
<body>
<header>
<div id="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</header>
<---TWO COLUMN--->
<div id="main_content">
<div class="videos">
</div>
<div class="someothercontent">
</div>
</div>
<footer>
<p>Copyright blah blah</p>
</footer>
</body>
Jacob Mishkin
23,118 PointsIts okay, Its always hard at first to look at a blank text editor and begin a project. Personally I don't believe that there is one way to just start a project. I like to start out by drawing what the website will look like in something like a sketch book. This way I'm not wasting time coding, but still playing around with format and design. I would suggest start making several sketches of the website. Play around with the design and see what you like best. Once that initial step is taken you have a visual reference of what you want the site to look like. I also like using checklists, these can be very useful in the prep stage. take a look at the link below, Smashing Mag is a great resource and provides a lot of info on the industry. I have also included another article about best practices and has some useful examples. I hope this helps.
http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/
If the issue is just how to code HTML/CSS I would suggest you look at both how to make a website by Nick and also watch Guil's CSS layout course, both also very essential classes.
P.S. in the course for Object-Oriented JS they teach you the basic structure to build a music player.
Theodore Griffin
2,584 PointsI'm going to try to come up with some sketches. I like that idea. I'm also going to browse a handful of websites and take note of particular things that I like and use them in my own design. Mainly, because I'm not seasoned enough to have my own particular style yet. If you have any other links that you feel might be useful please don't hesitate to send them my way. Thank you very much for your suggestions.
Jacob Mishkin
23,118 Pointsfor inspiration I would look at
this site provides a lot of awesome ideas. Take a look around, also take a look at code pen. its also great resource to see code.
Theodore Griffin
2,584 PointsThank you very much, Jacob!
Jacob Mishkin
23,118 PointsNo worries man, Have fun!