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 · August 5, 2014
Sorry for being so slack people. I will be updating this in the coming days with some new basic concepts that I've learnt. I will also try the ideas listed below :) Cheers people
0 Joseph Mancuso · July 19, 2014
if you really want to test yours skills, play around with shadow boxes like so:

box-shadow: 10px 10px 5px #888888;

or gradients for buttons

-webkit-linear-gradient(red, blue); 
/* For Safari 5.1 to 6.0 */

-o-linear-gradient(red, blue); 
/* For Opera 11.1 to 12.0 */

-moz-linear-gradient(red, blue); 
/* For Firefox 3.6 to 15 */

linear-gradient(red, blue); 
/* Standard syntax */
0 Stuart Abbott · July 12, 2014
Hi people,

I have now added a footer to the page. Hopefully this displays correctly for you! Any more suggestions that can be added at all?

0 Stuart Abbott · July 12, 2014
Hi Ethan,

Thanks for the tip. For some reason, I couldn't make it act like I wanted so I've not included the code. However, I did find a way to make it work using different coding suggested here

Cheers anyway, I appreciate the time spend offering the solution!
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 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 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
+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 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 Stuart Abbott · July 4, 2014
The initial site is coming along nicely. I should have something ready to upload in a bit (fingers crossed!)
  • 1
  • 2

HTML / CSS / Web Design


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