Webpage Design Portfolio: Responsive Web Apps, HTML, and CSS Styling

This webpage design portfolio showcases a student's work on creating and styling web pages using HTML and CSS. The assignment covers linking CSS files to HTML documents, formatting content with head and body tags, and declaring CSS within HTML. The student demonstrates an understanding of styling headings and paragraphs, including adding borders, setting fonts, and controlling text elements. Key concepts include creating responsive websites using media queries to adapt styles based on screen width, and styling tables and footers. The portfolio includes screenshots of the exercises, detailing the implementation of different CSS rules. The student also reflects on the learning outcomes, emphasizing the application of CSS for styling text elements and creating responsive designs. Bibliography includes references to relevant web development resources. The assignment is a practical demonstration of web development skills, focusing on the fundamentals of HTML and CSS for creating visually appealing and responsive web pages.

Running head: WEBPAGE DESIGN
Webpage Design
Name of the Student
Name of the University
Author’s note:

1WEBPAGE DESIGN
Table of Contents
1. Screen Shots:...............................................................................................................................2
1.1 Week 2a:................................................................................................................................2
1.2 Week 2b:................................................................................................................................3
1.3 Week 3a:................................................................................................................................5
Learning Outcome:..........................................................................................................................5
Bibliography:...................................................................................................................................7

2WEBPAGE DESIGN
1. Screen Shots:
1.1 Week 2a:

3WEBPAGE DESIGN
1.2 Week 2b:

4WEBPAGE DESIGN

5WEBPAGE DESIGN
1.3 Week 3a:
Learning Outcome:
In this portfolio I have learned about linking a CSS file with the HTML document. I
created a HTML document with proper formatting such as basic things like head and body tag. I
also learned to declare the CSS within the HTML document. At the first task I created a heading
and a paragraph. As I started expanding my knowledge by completing the exercises, I learned
that styling of these elements can be controlled using the CSS file. I declared styles of heading
and paragraph and continuously modified it until the desired result is achieved. I learned about
adding border-top with specific color. I also learned about using a specific font for all the text
elements. I have learned to create responsive website using media query. The media query
allowed declaring specific style for particular width of the page. I learned if the page width is
shrined then style also changes. Then I learned about controlling the styles of different elements
within the media query. I learned about basic rules of media query. As the whole portfolio is
about declaring styles of different text element, I did not learn about image styling. Another

6WEBPAGE DESIGN
thing that I have learned is table creation and styling. I also learned about assigning a footer to
the bottom of the page. I already learned about creating a border top but in the last assessment I
learned to set the width of the border. As the paragraph element already had border, I had to
learn about disabling current paragraph styling to make the footer paragraph different.

7WEBPAGE DESIGN
Bibliography:
Duckett, J., 2015. HTML and CSS: Erfolgreich Websites gestalten und programmieren. John
Wiley & Sons.
Mazinanian, D. and Tsantalis, N., 2016, March. An empirical study on the use of CSS
preprocessors. In 2016 IEEE 23rd International Conference on Software Analysis, Evolution,
and Reengineering (SANER) (Vol. 1, pp. 168-178). IEEE.