Summer Camp: How to build a website like an engineer


2 What a 13-year-old can do in one hour and what you can do in one day?

Creating a fancy web page is actually very much fun but could also be very time consuming. If you have some free time during the summer break, maybe you want to give a try and see how easily you can create a web page and publish it to your friends in your way and totally under your control.

I created this example to show you how to get hands-on programming experience using HTML5/CSS3 and make a productive web page quickly even if you are new to this skill.

Click here to see a draft page Dylan has created in an hour. He read through some simple tutorial of HTML/CSS and implemented what was in his mind real quick by writing about 20 lines of code in two files: 1.html and 2.css, which are linked together. You can read the code by right clicking the browser window or push F12 to view the source code of the web page.

Just like the web page from the Chapman University, the core concept involved in this latest design fashion is "layers", which is reported on the Hacker News.

Basically what he has accomplished is following:

  • Find a fancy image as background
  • Find a cool font Bebas Neue and install it
  • Layout the title bar, the title and "BETA" sign
  • Make the background, title and subtitle scalable for various browser window size

He failed on the last step and then he lost the patience to continue. But we find that there are a few more steps to take before it can be a complete web page:

  • The title bar should have zero margin
  • The background image must be scaled to 100%
  • Add more content, image, video and fancy structure/layout on top of the background
  • Make some mysterious background fixed and embedded to show later when user scrolls down

With some additional work, the Dragon web page looks a lot better. Try it and see how much you can improve. Let me know if you have any questions.