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

Development Tools

Amber Hoddinott
Amber Hoddinott
6,494 Points
Posted by Amber Hoddinott
Amber Hoddinott
6,494 Points

Developing websites step checklist ive made to help me through the process, any extra steps, changes or recommendations?

I have been learning on tree house intensively and i believe i have learnt all i need to start creating some great sites (of course i know there is always more to learn.) . I personally have to think at things in a organised way. Although i have gained alot of knowledge, have my notes and ability to research if i dont know something, i realized that when i came to start developing my site i had alot of information but no real order of how i should do each step. For me i know i will find it so much easier if have some steps to help me. So i can get from a black page to a website that is on the web and active which a proud of :)

I have made a list of what i think i need to do and in which order i think this would work best. Please take a look and give me any advise or extra steps, a different order (any input would be gratefully appreciated !)

Thank you so much in advance. :D

My web developing checklist

Tuesday, December 22, 2015 12:13 PM

  1. Make main <head> and <body> text documents
  2. Make sure i have all the tags needed in the head of my html. Meta tags etc (screen size, view port, seo, )
  3. Make main CSS style sheet and add link to html documents
  4. Make JS file and add link to html document
  5. Put all html/ CSS/ and JS Images into a project folder
  6. Add Normalise CSS
  7. Add bootstrap or any other CSS framework i need. Add necessary links
  8. Add Query and Js to the bottom of the html document
  9. Make a page wrapper in the <body>
  10. Add main nav bar
  11. Add sticky footer
  12. Add main content area (primary content, secondary content etc)
  13. Centring main content... May full width main header/footer.

  14. Make media queries. CSS File and link it to html documents

  15. GIT HUB Make main repository... To start using Git with my project and making push and pull requests

  16. Save my images for the web to make the responsive

  17. Photoshop all images how want them in my website. Making them the correct size etc.

  18. Make images such as png files into SVG (using inkscape)

  19. Make sprit maps for each html page individually

  20. CODE SITE.... Flexbox :)

  21. JQUERY Add any plugins needed

  22. Organise my CSS using SASS

  23. Make Typography into Ems to make responsive

  24. Check website optimization

  25. Check the website on different devices (landscape/portrait view)

  26. Check the Validation html CSS and JS code.

  27. Minify all my html, css and Js code

  28. Choose a Domain name

    1. Choose web hosting

3 Answers

Aaron Coursolle
Aaron Coursolle
18,014 Points
Aaron Coursolle
Aaron Coursolle
18,014 Points

It's a good idea to come up with a checklist to help you stay on track. Here are a couple other impressions:

Steps 20 and 22 are kind of backwards. Sass was created so that you would have to type less CSS, not more. If Sass is your workflow choice then create all of your CSS work in an scss file and compile it. Even if you don't know every Sass trick right now, incorporate what you've learned already. Sass compiles vanilla CSS as vanilla CSS.

For additions, you probably want to add some sort of a wireframe/mockup step to your workflow. I strongly suggest this treehouse course to show you a fairly quick and easy way to do it: https://teamtreehouse.com/library/adobe-illustrator-for-web-design

Aaron Coursolle
Aaron Coursolle
18,014 Points
Aaron Coursolle
Aaron Coursolle
18,014 Points

You have "choose domain name" as your last step, but already having a domain name picked early in the process would help you come up with themes that would suggest the design, artwork and even written content of your site. Your order is similar to picking a word from a "Lorum Ipsum" paragraph, making all the design choices first and then choosing what industry your logo could represent and the company's name as the final two steps.

Aaron HARPT
Aaron HARPT
19,845 Points
Aaron HARPT
Aaron HARPT
19,845 Points

You could try adding check site on all different browsers to step 25.