INTERACTIVE DESIGN// PROJECT 3:WEBSITE
02.11.2021 -23.11.2021 (Week 11-Week 14)
Chaw Zhi Ting (0347344)Bachelor of Design (Hons) Creative Media
Interactive Design // Project 3 Website
LECTURES :
Week 10// What is a Media Query?
Media query is a CSS technique introduced in
CSS3.
It uses the @media rule to include a block of
CSS properties only if a certain condition is
true.
Figure 1.0 media queries, 02 Nov 2021
Figure 1.1 Responsive website, 02 Nov 2021
Figure 1.2 Project 3 brief, 02 Nov 2021
Week 11// Coding website from design
In this lecture, Mr.Tarmizi showed us how to copy merge and measure the size of the website design we have created. Through this live demo, it is much more clearer on how to turn a design into a workable site.
Figure 1.3 Coding the content from Design, 02 Nov 2021
INSTRUCTIONS:
Project 3: Website
Figure 2.1 Website design, 9th Nov 2021
Coding in Dreamweaver
Before starting to code in Dreamweaver, I created different pages and labeled them accordingly in a web folder.
Figure 2.2 Saving HTML pages in a folder, 9th Nov 2021
Starting with the navigation bar on top, I inserted div to create the menu items.
Figure 2.3 Navigation bar, 9th Nov 2021
By referencing the design I have done in Project 2, I tried my best to code the design as close to wanting I visualize. The process of structuring the page and creating buttons for the page is fun and interesting. It took me the longest time to code the home page as it is the based design for all the other pages. Mr.Tarmizi shared us a useful tip to copy merged all the buttons, icons, and images from Photoshop to Dreamweaver. It saves me lots of time as we don't have to resize them one by one.
After completing the structure, I then added CSS for the fonts and backgrounds for my website. As some of the font, I used it's not Google fonts. I then reselect my choice of font to make it visible for my website.
HOMEPAGE
Font used:
Heading - font-family: 'Permanent Marker', cursive;
font-family: 'Outfit', sans-serif;
Figure 2.4 Adding CSS font, 11th Nov 2021
Figure 2.5 Real-time preview for the homepage, 20th Nov 2021
ABOUT PAGE
Figure 2.6 About page coding progress, 11th Nov 2021
Figure 2.7 About page Real-time preview, 20th Nov 2021
WORK PAGE
Figure 2.8 Work page progress, 20th Nov 2021
Figure 2.9 Work page real-time preview, 20th Nov 2021
SHOP PAGE
Figure 2.10 Saving image from PSD. file, 11th Nov 2021
Figure 2.11 Create image folder. file, 11th Nov 2021
Figure 2.12 Shop page real-time preview, 20th Nov 2021
CONTACT PAGE
Figure 2.13 Before and after adding css, 20th Nov 2021
FINAL SUBMISSION:
Figure 2.15 Final JaniceWebsite, 19th Oct 2021
Figure 2.16 Final website.zip, 19th Oct 2021
Figure 2.17 Website CSS, 19th Oct 2021
REFLECTIONS :
Creating a website is more challenging than I expected especially implementing the design into codes. It took me some time to figure out the function of div class, div ID, and other tools in Dreamweaver before I got to code. After trying several attempts and consulting with Mr. Tarmizi, I finally understood more precisely and started to do my index.html. It was interesting to learn how to use HTML, CSS, and JavaScript in this module. Unfortunately, due to the time constraint and the skills I have, I did not manage to come out with a responsive website yet at this stage. I believe practice makes perfect, and I will further explore coding by learning from online videos and sites such as W3School to widen my knowledge in coding. Hopefully, I can make my website functional in the future.
Comments
Post a Comment