Intro and Objectives

The main goal of these lessons is to learn about front-end web development in a hands-on manner while creating a personal, student website. Web development, especially when creating a personal site for one’s self, can be fun, so try to enjoy yourself as you learn the basics. Yes, your academic goal is to study hard and learn as much as you can about web design and development, but having fun is an integral part of this particular set of lessons.

The Main Project

  • To create a personal student web site for yourself that is 100% custom designed and coded from scratch.
    • 100% your content: all content will be yours and directly related to your coursework as a student of web design (e.g. class assignments, projects, journal entries, etc.)
    • 100% your design: you choose the colors, fonts, etc. (feel free to customize your site… have fun!)
    • 100% your code: you should write each and every line of code (HTML & CSS) by hand, from scratch. Resist the temptation to copy and paste! You’ll only be cheating yourself. All code used in these lessons is free, open-source, and yours to use forever.

Example Personal Web Site

Theme: “Blue Night Sky”

Example of a Student Site
Example of a Student Site

How are you going to do it?

One Step at a time…

Throughout these lessons, you will follow a multi-step process that includes developing and delivering a custom-coded static website. More details will follow in the lessons ahead, but for now, here’s an overview of some of the main steps:

  1. First, you’ll need to Get Setup
    • Setup your server environment, establish a local workflow, post a simple work-in-progress website
  2. Along the way, you’ll need to Gather Content
    • As you complete your course-related assignments and projects, you’ll need to prepare them so they can be posted and viewed online.
  3. At some point, you’ll want to Customize the User Interface
    • Using various design software and technologies, you will be encouraged to explore your creativity and apply your garnered knowledge by customizing user interface (UI) and user experience (UX).