COIT 20268
“Responsive Web Design (RWD) (Term 1 – 2020)”
Assessment 1
Portfolio 1.1 (Chapter 1)
As of my assignment 1, I have developed a website with the title “Flying Hobbies”. The main goal of this website is to provide customers with details of products rather than buying or selling products.
Planning of my site: The main feature of my website is to provide an easy layout so that every customer can easily use it. In my opinion, the website should be such that every age group can use it so, I focus mainly on all age groups. On my first page, I am planning to make a home page with a Floor map where users can click on images for more details. In addition, I will be making categories from where also use can see details of items. I am planning to make 5 pages for my site including the opening hour page. I will be making a simple page design since we are not allowed to use JavaScript or any other web development tools. It will be hard to make a site without JavaScript but it’s not impossible to make.
Portfolio 1.2 (Chapter 2)
During the time period, I have made many layouts of my site which are roughly made but helped me a lot while making a site.
Portfolio 1.3 (Chapter 3)
Flow chart:
In this flow chart, the first Home page (index.html) appears. There is a clickable link on the homepage. The clickable link is category parts, floor map clickable category, home bottom, opening hour bottom, and logo itself which work as homepage. In the first step, if the category is clicked it choose which category (toy-plane.html, Kites.html, and quadcopter.html) to select if category from the floor map is clicked then it does the same work as the category listed then opens that particular page. As per the second case when the user clicks on open hour bottom then the open hour page (open_hour.html) will open which shows all records of opening time in table format. I choose this layout so that users feel comfortable and simple to find out details of the product easily. Users can choose a category from the floor map itself or choose from category options whichever way they like.
The file names which I will be using are index.html, kites.html, opening_hour.html, quadcopter.html, toy_planes.html, style.css.
Portfolio 1.4 (Chapter 4)
I have used the different class names for using control typography, white space, borders, colors, and backgrounds with CSS3. Some of the class names I have used in my css3 style are:
- html, h1, h3, ul, li, a, p, article, aside, footer, header, main, nav, section{ padding:0; margin:0;}
- body {background-color: #06DEF6; font-family: Time Romans, New Time Romans, sans-serif; padding:0; margin:0; }
- .category-heading{ font-size: 1.5em; font-family: ‘Times New Roman’, Times, sans-serif; font-style: normal; font-weight: italic;
- .about_us{ font-size: 1em; font-family: ‘Times New Roman’, Times, serif, sans-serif; font-style: normal;
- .item3{ grid-column-start: 3; grid-column-end: 4; }
- .responsive { width: 100%; max-width: 200px; height: auto; }
- table, th, td { border: 2px solid #06DEF6; }
Above list are just some of the class I have used in order to make site look more attractive and more responsive.
Portfolio 1.5 (Chapter 5)
Questing I need to consider:
Heading fonts are primarily used as higher-impact text, for example in the header of a title or section part. While as, body fonts are like a paragraph or a secondary text and they are mainly used for longer text. Padding and margin are important in this case and font size are also important but we can add many other as per our need. So I will be using them as per my site requirements.
We cannot say exactly how many levels of headings are necessary. It depends on the site. As per my site, I am planning to use just two headings h2 and h3.
I will be using italic and bold as well as different pixel sizes on my site. As per hypertext links, I will be using a blue color bottom box so that it will be easier for users to click. To ensure the legibility and readability of my text I will be using proper gap and space between words and the size of words in a bigger sizes so that users can understand. As per my site, I will not be using longer text description but rather explain in short point which explains an important point.
Portfolio 1.6 (Chapter 6)
Before there were many problems with margin, padding, border, gaps, and colour combination was also not so good since many colour was used. In the image below we can see the problem in the site.
This is a list of padding, margin, a border that I took from inspection to show.
This is an image taken after I keep proper typefaces and sizes, which I did with the help of box property. All images and boxes are set to be responsive so that users can use them in different window sizes.
Portfolio 1 Summary
In conclusion “Flying Hobbies” site is complete with HTML and CSS code. Much research was done in order to complete this site because of which this site fulfills all the requirements. Below I will be showing all the screenshots of my site so that it will be easy to understand.
Home page:
On this homepage, we can click on Home, Opening hours, Toy Planes, Quadcopter, Kites bottom including Logo too. All bottom are linked to particular pages. The main part of this page is that users can click on the floor map from where they can select categories.
Opening hour page:
Toy planes page:
Quadcopter page:
Kites page:
Responsive view:
These are the screenshots of my site which are done only by using css3 and HTML code.
Uni Assignments For MIT students 