Interactive Design // Exercise 4
03/04/2023 - // Week 1 - Week 14
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
INSTRUCTIONS
TASK: Layout Exercise
Coding:
 |
| Figure 1 - Style.css |
The initial section comprises multiple <link> components that connect the HTML file to external font stylesheets from Google Fonts. These links tell where the fonts come from and let the webpage use them. The <body> is used to apply styles to the entire webpage. The CSS code determines the font family, margin, padding, text colour, background colour, background image, and other properties to give the page a unique look and ambiance. This code puts together different CSS rules to make a good-looking and adaptable grid layout for a webpage. It also picks out specific font styles, colours, and alignments.
 |
| Figure 2 - Grid |
The code is defining the style for a class named "container". The display grid informs the browser to utilize a grid layout for organizing the elements within the container. The grid-template-columns property is used to define the columns of the grid. So basically, it makes two columns that are both 1fr wide. The unit "fr" is used to indicate a fraction of the space that is available. Grid-gap creates a gap of 20 pixels between the cells (elements) of the grid inside the container. When we use place-items, it centers the elements both horizontally and vertically within each grid cell. This code generates a grid layout having two columns, centers the elements inside the cells, and includes a gap and padding to the container.
 |
| Figure 3 - Navigation |
This code shows how to create a navigation menu using HTML. The starting tag for the navigation section is `<nav class="navigation">`. It has a CSS class name "navigation" that can be used for styling. The tag `<ul>` stands for an unordered list, which is a list of items that doesn't have any particular order. There are multiple list items in the `<ul>` tag, which are shown by using `<li>` tags. Every item in the list corresponds to a choice on the menu. The menu options available are Home, About, Articles, and Contact. The `<a>` tags are used to make links to other pages or sections of the website. The website has four main sections: "Home," "About," "Articles," and "Contact." If you click on any of these options, you'll be taken to the corresponding page or section of the website.
 |
| Figure 4 - Article |
The code shows how to use HTML to create the structure and content of a webpage. The `<article>` with the class "main-article" is the first one. The code has a `<h1>` tag with bold text. After that, there are two `<img>` tags with class names "poy" and "yop". The `<img>` tags show pictures from outside web addresses. Once you view the images, it will come across a paragraph marked with the class "steve" that contains text and hyperlinks to external websites using `<a>` tags.
The second article's class is "sub-article". The code has a `<h2>` heading, then a `<img>` element with the class "pot", and finally a `<p>` paragraph with the class "puke". Just like the initial article, there's a second `<p>` paragraph tagged with "uke" class. It contains a bold text and a hyperlink to get a file.
The third article's class is "sub-article2". The code has a `<h2>` tag, a `<img>` tag with the class "top", and a `<p>` tag with the class "muah". The fourth `<article>` has a class named "sub-article3". The code has a `<h2>` tag, a `<img>` tag with the class "toy", and a `<p>` tag with the class "samm". The last two articles have paragraphs that include links with `<a>` tags.
 |
| Figure 5 - Unordered Lists |
Each list item has an <a> tag around it, which stands for a link. The href attribute of the <a> tag tells the browser where to go when the link is hit. The class property is used to give the "walk" class to the first item in the list. Each list item has a tip or topic about working with Adobe software. The first item on the list might have tips for using Photoshop and Dreamweaver, the second for Photoshop and Illustrator, the third for Photoshop and InDesign, and the fourth for using Adobe CS Review to speed up Photoshop projects.
 |
| Figure 6 - Mobile Interface |
One of the main objectives is to design websites that offer an enjoyable user experience on various devices. Creating websites that can adapt to different screen sizes and resolutions is based on responsive web design. By applying responsive design principles, I can make sure that my website's layout, images, and content adapt automatically to fit the screen of any device. Comprehensive testing is crucial to make sure that users have a seamless experience on different devices and browsers. I test my website to ensure that it works properly and looks good.
.png) |
| Figure 7 - Final Website (https://0356767-hasnolrafiq-exercise4.netlify.app/) |
My website creation journey using style.CSS was a great learning curve in the field of web design. CSS has been really helpful in making my HTML pages look visually appealing. By using typography, controlling the layout, customising colours, designing responsively, and styling interactive elements, I was able to use style.css to create a website that looks good and is easy to use. As I keep learning CSS, I'm excited to push the limits of web design and make more interesting and engaging online experiences.
.jpg)
Comments
Post a Comment