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

Marcus H
Marcus H
4,267 Points
Posted by Marcus H
Marcus H
4,267 Points

Structural approach to building websites for beginners?

Hi

I've been learning design for a little while have made a few mockups (1 paid, 1 volunteered and the rest are personal projects) that I want build into actual websites and landing pages (https://www.behance.net/mshanda) and I think will be good practice. Before concentrating on design I had learnt a little about HTML and CSS and know most of the basics, I think the only thing I would struggle with at this point would be positioning.

I want to be able to build what I design and to add some nice interactivity. Then I'll go back to practising design and maybe also learn some javascript as I understand that it useful to know if I plan to use jQuery. Also learning a CSS preprocessor might be beneficial going forward as they seem to be great time savers.

Right now I could write some HTML & CSS but it would be a mess structurally and just wondered if you guys knew a systematic approach to writing HTML & CSS if such a thing exists? I tried building a page a few months ago and it was a complete mess, especially the CSS as I ended up repeating things many times.

Any help/advice would be greatly appreciated.

Thanks,
Marcus

4 Answers

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

Marcus,

Developing a workflow comes with practice and research. Commenting and using pseudo code really help when it comes to laying out what you want to achieve with your design (HTML, CSS, SASS) /development (vanilla Javascript, jQuery, PHP, etc.).

As far as research goes check out some of the videos on CSS-Tricks or other sites that offer screencasts to see other workflows.

Overall, keep building things and find what works for you.

I hope this helps!

Marcus H
Marcus H
4,267 Points
Marcus H
Marcus H
4,267 Points

Thank you for this, I'd heard the word 'workflow' before but for some reason forgot about it and it is exactly what I was trying to explain in my question. Learning from the best in the industry is a great idea and could only yield benefits.

Unsubscribed User
Unsubscribed User
18,288 Points
Unsubscribed User
Unsubscribed User
18,288 Points

Practice is always the best way to learn and develop your coding style. My first website was a shocker with the code but over time and after building more sites it has improved.

A slow and steady approach helps. Commenting is always useful, so in css have a section for header, nav, images etc and keep looking back on your code to check for repetition.

Over time and with practice and patience you will find yourself writing cleaner code and find ways to use code, like css, for multiple aspects of your design, but only code it the once.

Some of the css videos on here show this well and Sass is also something that you could look at to help clean your code(css) up to!

Keep practicing, keep building, keep coding and you'll soon find yourself being more confident and happy with what you have produced! Good Luck! :)

Marcus H
Marcus H
4,267 Points
Marcus H
Marcus H
4,267 Points

Thanks you for the reply, I understand a workflow can be something entirely personal and finding your own way is probably the best course of action but I'm hoping maybe I could learn a few things from the experts and industry leaders if possible. From the little I've seen of Sass it does look like a more structured approach to CSS and I'll definitely look into it further but I wonder if learning a preprocessor might a little advanced for me at this point?

Charles Smith
Charles Smith
7,575 Points
Charles Smith
Charles Smith
7,575 Points

There's about 3 tips that spring to mind.

As Mark said above, pseudo code and general planning (wireframing or even pencil + paper design) will help you come up with structure.

Second, I find looking at other people's code, or watching other people code (treehouse is awesome for this, but there are tons of youtube videos of this sort of thing) helps. As I learn, there are more than a few "wow, my code looks like crap" and learning things that improve the process.

Last, most of this stuff is simple preference and experience, so I would experiment a bit and see what you like. As a beginner, I usually shoot for "this code works" then go back and try for "this code works and isn't a mishmash of garbage that I don't want to show anyone."

Marcus H
Marcus H
4,267 Points
Marcus H
Marcus H
4,267 Points

Thanks, I agree that planning out a project would be extremely useful and it's something I should spend more time on. Commenting is also a good shout as it could add some context as to why I have written a piece of code the way I have if I do it right. It's been a while since I've watched some videos/tutorials from here so I think I should watch a few and refresh my knowledge and hopefully learn a few tips along the way.