30th of May '18 - 28th of June '18 (Week 10 - Week 14)
Jaslyn Tjhai (0333039)
Web Design and New Media 2018
Final Project
Week 10
(30th of May 2018)
On the tenth week of class, Mr. Shamsul wanted us to start working on our final project, where from both the product and service website that we did for project 1, we're supposed to choose one to work on for our final project. We will be required to make a 6 page website (including the landing page). On the first class of this week Mr. Shamsul wanted us to gather all the information and save the content in Microsoft Word to make it easier for us to type the content in Dreamweaver. Then we're also supposed to collect every assets needed for the website to make it easier for us to code later on. For typeface, I decided to use either of these typefaces from Google Fonts.
 |
| Fig. 1.a. Typefaces |
For the images as well, I've placed everything in one folder.
 |
| Fig. 1.b. Assets for the website |
(31st of May 2018)
On the second class for this week, Mr. Shamsul wanted us to start working on the first page of our chosen website. I tried to do the landing page first. I wanted to make it as organized as possible but while I was doing it, I was still going through some kind of uncertainty and confusion on how I want the website to look like, but here's what I did so far. I manage to create the CSS for the navigation as well as the content but the footer is still out of place.
 |
| Fig. 2.a. Workspace on Dreamweaver. |
 |
| Fig. 2.b. Look on web 1 |
 |
| Fig. 2.c. Look on web 2 |
 |
| Fig. 2.d. Look on web 3 |
So far, I've yet figure out why the lower part of the web looked weird since I'm still not done with the coding.
Week 11
(5th of June 2018)
On the eleventh week, Mr. Shamsul checked on our main page while we continue to do our work in class. The problem I had with the footer was resolved and I did 4 out of 6 pages for my website. I actually just put it all together before doing some adjustment. For Location page, I wanted to be able to pop up a dialog box showing the exact location of each branch in each city in a country, but I'm still trying to figure out how to do it. As for my Products page, I decided to do a horizontal scrolling thing for the menus. But I'm still trying to figure out how to remove the scrollbars.
 |
| Fig. 3.a. Products page |
Week 12
(13th and 14th of June 2018)
No classes was conducted this week.
Since there's no classes, I decided to work on my website and manage to finish all the web pages. The only adjustments that I needed to do was on the J.CO Run web page as some of the elements and contents are not aligned. I also still need to make little adjustments on the footer and navigation.
Week 13
(21st of June 2018)
On the thirteenth week, Mr. Shamsul checked on our website one by one where by that time I've already completed coding for my website it's just that there are a few other adjustments that I need to make on the alignments of the content. Mr. Shamsul asked me to try and check on the flexbox to align all those that are not aligned. Afterwards, I wanted to try and make the website responsive to challenge myself. We were also asked to upload our website to a free server. However, there's a problem with my website after it's uploaded in the server where as it's perfectly fine when it's opened through the file itself. Here's how my website looks like.
By week fourteen I finally figured out all the errors and fixed everything where I could finally submit my work. I also added a favicon to my website which is the small icon that can be seen when the web is opened.
 |
| Fig. 5.a. Favicon |
I also manage to make my website responsive for mobile users (480px).
 |
| Fig. 5.b. Responsive webpages |
 |
| Fig. 5.c. Responsive footer |
Comments
Post a Comment