Interactive Web Design – The First Week

In this first class, we were told what we were going to do and what we were going to need in class. We then learned some websites that could help us with our studies for this class and were briefed on what coding is. We were also taught the 5 steps to coding, which are:

  1. PLAN: In this phase, clients are met and the desired outcome is discussed. Time and budget will be calculated and the softwares and applications needed will be thought off in this stage. After all that is decided, the next step is to define the basic structure of the website. When that’s done then you can move on to creating a wireframe for the concepts (rough sketches and thumbnail sketches).
  2. CREATE: Here, you can start creating visual mock ups in Photoshop or Adobe Illustrator. The visual mock up will be static and will be used as a blueprint for the final output. After this part is done, you can continue to create a functioning prototype. There are many tools for this both online and offline (Muse & Dreamweaver Marvelapp & Invision ).
  3. ASSEMBLE: Once the prototype is approved, the design elements from the static mock up will be individually exported and assembled for the final website.
  4. PROOF: Here the functionality of the website will be tested and any bugs encountered will be fixed. Most of the website’s problems will be fixed here and if possible, no bugs will be left.
  5. PUBLISH: This last step is pretty self explanatory, this is the step where you copy the codes from your computer to a server. This is the part where everyone can find your website online.

The next thing we  learned was the basics in coding from a website called Here we learn “how to make a website”, the basic html and css codes that make a website look and work the way it should. Here are some screenshots from the website:

Introduction to HTML codes:

At the end of the lesson we got a quiz, which helps us memorise what we used and what certain terms are for. Here’s what I got:


That was the first part of what we did in class. After the quiz we moved on to the second part of the “Make your own Website” study plan:

Learning CSS

Here is my progress for the class this week:


I finished the “Make Your Own Website” section for our homework and here is the screenshots and updated achievement status:


The course is not technically complete since I did not purchase the PRO version to study all the codes in depth, but I did finish the unit.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s