Written By: CodeKristi
The whole purpose of education is to turn mirrors into windows. ~ Sydney J. Harris
My first real website design and development formed part of a course (or set of smaller lessons) on Team Treehouse’s Front-end Web Development track. I didn’t do anything really – I just copied what the teacher did, while he explained it. But now I have a completely functioning website consisting of basic HTML and CSS code as an example. Also, I (mostly) understand every part of the code – how to write it, and how it works!
Using this basic website as example, I can start playing around by editing it and trying to add things. As part of the course, the teacher also listed a few websites which will be useful to figure out bugs and to learn new tricks.
In learning you will teach, and in teaching you will learn. ~ Phil Collins
I learned quite a lot in this course and made some notes. The teacher’s name is Nick Pettit and he took me through the whole process of designing, developing and publishing a website.
I would like to use this blog post to share an overview of my notes and some of the insights I had. This is only a summary of what I had learned. If you find this blog useful, you should definitely consider working through Team Treehouse’s course How To Make A Website!
I am summarising the basic ideas of creating a website in the following steps. There are many useful tips and links included in the above-mentioned course, as well as examples of different ways to do similar things.
Order and simplification are the first steps toward the mastery of a subject. ~ Thomas Mann
Step 1: Designing the website
The first step is to mentally imagine your website. You can use pen and paper, or electronic drawing equipment like Photoshop. Make a drawing of the basic layout / structure of your site, which is called a wire frame. On the wire frame, you can show where you want your header & footer, as well as the general layout of the body of your site. Make a drawing for each page of the website (Home, About, Contact, etc.), as each page will probably look slightly different. Don’t go into too much detail: you can just draw blocks and the main headings / words.
Step 2: Write your HTML code
As HTML is used for the structure of websites, this is the logical next step. First start with your Home page (mostly called the index.html page). You first need to put in the main sections of the page: meta tags, header, body and footer. Next, you can start creating all the sub-sections and content. Finish as much as possible of the coding and content of your Home page before moving on to the next step.
Step 3: Write your CSS code
Before you continue coding, you need to write the basic CSS code. The reason for this is that it is best to focus on thinking and working through the design of only one page (Home page). Trying to design two or three pages with different content and layouts simultaneously is far more difficult. So in step 2 you have finished the structure and content of your Home page, and now you can play around with its colours and fonts.
Very important, before you start coding your own CSS, you need to reset the browser’s default stylings. One of the possible ways, is to link normalize.css to your index.html page. This is CSS code you can download which ensures your website will look more consistent across different browsers, even if you haven’t added your own CSS styling yet. If you Google ‘normalize.css’, there are various websites where it can be downloaded from (e.g. Github).
Also make sure that you always write your CSS code in a separate file, as this will make it much quicker and easier to change the styling of your website. When you are done with the design of your Home page, you can link the CSS page to your index.html page.
Step 4: Code the rest of your HTML pages
You are now finished with one page of your website, in terms of structure and design. Copy the code from your HTML home page into a new file (e.g. about.html) and edit as needed. It is easier to copy and edit, as you want your header, footer and navigation to look the same on all pages. You have also already linked the CSS pages to the home page. So you can just delete / edit the content of your Home page’s body to turn it into a new web page.
There are other ways in which you can ensure consistency of the header and footer of your website over all the pages. We haven’t learned about this in the How To Make A Website course, but I found out about it in an attempt to use this course’s knowledge to make a new website. You can research HTML imports if you want to learn more about it.
Step 5: Adapt the CSS code for each subsequent page
When you have finished coding all your HTML pages, you can add in minor design changes to each page. This is done by adding CSS code for each section on the various pages. You can link to the different sections by using classes and ID’s in both your HTML and CSS code.
Step 6: Test your website
The last step before you are finished is to test your website. Test the aesthetics of the web pages by looking at colours, layout and visibility. You should test your code to ensure there are no bugs. Your website should also be able to work on a variety of devices with different screen sizes and web browsers (responsive web design). You need to ensure your website will provide most users with a good experience.
Step 7: Publish your website
You have now finished coding and testing your website, and are ready to publish it on the Internet. You will need a domain name registrar, web hosting service and an FTP client in order to publish your website. All of these aspects are explained extensively in the last few videos of the course.
We cannot teach people anything; we can only help them discover it. ~ Galileo Galilei
I hope this post gives you a broad outline of what you need to do in order to develop a website. Many of these steps are a bit overwhelming if you have to figure it out on your own. Having someone take you through it like Nick Pettit does in the Team Treehouse videos, really helps a lot! I was often speeding up the videos when I had a basic understanding of the content, but it still gave me some more clarity to have someone explain it to me.
Feel free to follow Nick Pettit on twitter (twitter handle @nickrp), as he has created a Twitter list of web designers. They share many blog posts and articles that are useful for beginner (and developing) web developers.