Web Development Project

+6 Stuart Abbott · July 2, 2014
Hi all,

I was wondering if anybody could help me out.

I am looking at improving my web development and thought that a good way to do this would be to do the following:

  • Use HTML and CSS to create a basic web site. No other languages at the moment

  • Get people to suggest new features or things to add to the website in a new language, such as JavaScript

  • Gradually add more features to the site to encourage learning and improvement

Once the basic site has been created and people here have given tasks to complete, such as 'add a form to collect X amount of data', people could suggest extra bits to add to the site.

Not sure if this would work but I'd love to give it a go.

For example, I need somebody to first suggest a colour scheme for the site. I will then make the basic layout using ONLY html and css for now and will upload using a free host. Seeing as I don't intent for the final site to be a commercial site or one for major use. Just a project to learn new aspects of web development.

Many thanks people (and keep up the fantastic work Bucky and team!!!)

EDIT: The site can be seen here

Post a Reply


- page 1
Oldest  Newest  Rating
0 Stuart Abbott · July 3, 2014
Thanks for the suggestion. I am currently making the initial site now and will use the colours that you have suggested. Do you have a specific text colour in mind, or should I just use black for the moment?
+3 James Grimshaw · July 3, 2014
If you are going to use black for the text, I recommend using something slightly lighter than black, such as #333333. It improves readability on a white background, as it reduces the contrast.
+1 Stuart Abbott · July 3, 2014
Ideal. I'll implement that now. Cheers
0 DesgarrĂ³n Pantera · July 4, 2014
header try to use grey
body try to use white
footer try to use grey
the text for the body black

and looking forward for your website...
+2 Stuart Abbott · July 4, 2014
The initial site is coming along nicely. I should have something ready to upload in a bit (fingers crossed!)
0 Stuart Abbott · July 5, 2014
Hi all,

The initial site is up now. Obviously a lot of work still needs to happen but, for starters, I think it's ok.


Cheers people. Of course, all feedback is welcome!
+2 James Grimshaw · July 6, 2014
Website looks awesome! I think that the green is perhaps a bit too bright though, something like #9AD17C would look better.

Keep up the great work :)
0 Stuart Abbott · July 6, 2014
Hi James, thanks for the tip. I'll make the amendment later tonight. I'm trying to get a footer that sits at the bottom of the page but nothing seems to be working for me. Something I'll have to keep looking into I think
+1 Stuart Abbott · July 10, 2014
Hi everyone. I've made the update as suggested by James and feel that the main content now looks less childlike and more professional. I'd love to hear your thoughts too! If you can check the site out at http://testdevelopment.zymichost.com and let me know what you think. Also, make any suggestions that you feel you'd like to see (additions or amendments). I am keen to learn new and exciting things!
0 Ethan Fraser · July 11, 2014
With the footer that you mentioned you can go for one of two ways to be efficient (in my opinion, I understand that others may have a better process for it). If you want the footer to appear no matter what (so on top of everything but still remaining at the bottom of the page) then you can fix the position like so.

#footer {
position: fixed;
bottom: 0; left: 0; right: 0;

To explain that, it sets the distance between the bottom of the footer (whether it's a div or a heading or an image) and the bottom of the page to 0. Then it sets the distance between the left side of the footer and the left side of the screen to 0 and vice versa for the right side. When both sides are 0 then it should centre itself. This will make the footer appear over EVERYTHING. I use it for scroll to top buttons but it can also be used for this. The other option is similar but the parent element has to have it's position set to relative. Let's say you have the footer inside the body so that the only parent is the body it would look like this:

body {
position: relative;

#footer {
position: absolute;
bottom: 0; left: 0; right: 0;

Again it's the same principle but it would appear at the bottom of the parent element. Take note that the bottom, left and right properties don't have to be on the same line, I do it merely for simplicity. 

Hope it helped
  • 1
  • 2

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.