Week 11 - Week 13 : 17 May 2022 - 26 Jun 2022
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Project 2 / Working Landing Page
INSTRUCTION
PROJECT 2 : Working Landing Page
In this task, we are required to code the landing page as designed in Project 1 by using Adobe Dreamweaver or Visual Studio Code.We are asked to use Bootstrap to design our landing page.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
 |
| Figure 1.1, Bootstrap 4.4, Week 11 (7/6/2022) |
Bootstrap is a popular CSS Framework for developing responsive and mobile-first websites.
We have a class demonstration of creating navigation bar, carousel, and cards by using Bootstrap.
Landing page
I started off by creating new HTML and CSS files in Adobe Dreamweaver. I copied the codes of the Navbars from Bootstrap and pasted it in my Dreamweaver. In default, the navigation bar is in light colour and there is a search bar on the top right corner. I made some customizations by inserting my logo and removing the background colour.
 | |
|
 | |
|
 |
| Figure 1.4, HTML for image and text, Week 12 (13/6/2022) |
Figure 1.5 is the image I used for my profile. I have tried to look for a way to wrap the text around the image but I could not find any possible solution that could work. In the end, I wrapped the text in Adobe Illustrator and exported the image as shown in Figure 1.5.
 |
| Figure 1.5, HTML for image and text, Week 12 (13/6/2022) |
I tried to add sticky top to my navigation bar, but I found the texts in the navigation and the texts in my content would overlap each other when I scroll down (due to the transparent background of my navigation bar). So, I decided to remove that function.
The tricky part is to align the image and text, image at the left and the text at the right.
 | |
|
 |
| Figure 1.7, HTML for footer, Week 12 (13/6/2022) |
Initially I used an image to change my background colour. However, there is some issue with the alignment and it doesn't seem to fit the entire screen. Hence, I changed the background to linear gradient in CSS.
Next, I customized the button hover color.
 | |
|
 |
| Figure 1.9, Button when hovering, Week 12 (13/6/2022) |
Media
The media attribute specifies what media or device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media. This attribute can accept several values.
 |
| Figure 2.1, Media attribute, Week 12 (13/6/2022) |
Finally, I uploaded the website in the Netlify.
 |
| Figure 2.2, Final landing page, Week 12 (13/6/2022) |
Netlify link: https://yyun-landingpagedesign.netlify.app/
FEEDBACK
Week 12 :
General Feedback
Take note of the alignment of the content. Refer to the class recording.
Specific Feedback
Use gradient color to replace with the background to avoid the white borders.
REFLECTION
This exercise had given me a chance to explore more about HTML and CSS. I have learned the basic coding that enables me to create a responsive website. Although UI/UX is not my choice of specialization, I am grateful to have this module to get expose to the basic understanding of coding. The process of getting the right code was tough and frustrating, and it required patience and determination to look for solution either from my friends or YouTube tutorials.