Index refers to the homepage of a website. When no path is specified, indicating that a specific page on the website is intended, the server returns the index.html page as a response to the HTTP request. If a path is specified, the server returns the page requested.
The information that can be seen in the inspection network tab, on the local computer, is much less detailed than that on the web server. The status code is displayed and is 200, indicating a successful status. The content type is also specified as "text". When it comes to the timing sub-tab, it becomes apparent that the local computer is accessed much quicker, only taking 7.56 ms to gain access. Since the web server is not locally hosted, it takes much longer to send the request and then wait for the server's response. Of the 157.50 ms that the process took, 152.04 ms were taken by the server to respond to the HTTP request. Inspecting the page on the server also showed more detail regarding the page itself. For example, it recorded the content length of the text file. Additionally, it showed the page's request URL as well as the remote address.
The favicon.ico file, giving the OSU.COE image in the browser tab, gives a status 200, indicating a successful process, because it is present in the server files whereas other files, such as main.css and main.js are not. Therefore, they would register with a status code 404, indicating that the requested resource is not available and not retrievable.
The URL to the web file is: https://web.engr.oregonstate.edu/~ibrahimo/a1-ibrahimo/. Therefore, the scheme is "HTTP". The subdomains in this case are web.engr. The host domain is oregonstate.edu. The resources specified are "~ibrahimo/a1-ibrahimo".
Frontend Design
Frontend design is the engineering of the approachability and ease of use of software for consumers. It is governed by visual design concepts and constraints aimed at improving user experience. Frontend design should allow users to accomplish the intended goal of use with ease, repeatability, and with minimum time wasted.
Effective
The capacity to aid the user in achieving his/her in such a way that he/she can achieve the desired outcome.
Efficient
The capacity to reduce the steps and time needed for the user to accomplish tasks.
Ease of navigation
The capacity to provide an intuitive layout so that desired features are easily located, even by first time users.
Error-free
The capacity to provide a seamless experience without obstacles and glitches that may hinder users from accessing or using features.
Enjoyability
The capacity to provide an experience that is engaging for the intended audience in a way that makes them return.
Page layout tags function as a way of segmenting content on a website so that machines can process how some content relates to other content on the page. For example, the header is an element used as a banner that remains present on different pages of the same website. It provides overarching, general information regarding the website, such as the name of the website and the name of the author. Nav elements allow for the user to quickly navigate to other locations within the website by providing a list or table of links that link to specific features or areas. The main element holds the primary content of the website. Subsequently, section elements group contextually relevant content together. The distinction made by a section is that all the contents in a section are related and are usually grouped under a headline that indicates the topic. Articles are often nested within sections and indicate even more specific subtopics. In contrast, aside elements are portions of a website's content that are not necessarily relevant to the main topics addressed in the main portion of the page. Similarly, figure elements operate in the same way, but are usually media elements with accompanying captions. Blockquotes are elements that are used when citing large portions of text exceding a paragraph. Footer elements are usually at the bottom of the page and contain valuable information regarding the copyright policy, the owner of the page, important publication information, and sometimes other legal information. Lastly, the div element is a purely organizational element that acts as a fill-in for dynamic content.
External anchors link to text outside the page by using the URL of the external site. The URL is navigated to when the hypertext, usually a description of the external site, is clicked on.
Internal anchors link to text within the page by using a reference linked to an ID tag.
Page-to-Page anchors are usually present in navigation menus and are held in global navigation blocks.
Optimizing Images
The first of the six major specifications for images for the web is the file name. The file name allows search engines and users to locate the image by identifying the image with a representative and descriptive summary. Secondly, the file size is an incredibly important image specification. File sizes impact load time. This has a profound effect on a user's experience with a website. Accordingly, it is best to reduce the file size as much as practically possible. Thirdly, the image dimensions similarly play a role in the loading speed of an image. If an image is too large for its allotted space, it will take longer to load. It is important to size images according to the space given. The file format is an important specification for an image because it restricts the behavior of the image according to the file type. Resolution, as a specification, determines the pixel density of an image. Lastly, color mode allows for consistent reproduction of colors and designs from one device to the next.
The best file types for line art are GIF, PNG, and SVG. Files that are type GIF can be 8-bit transparent or animated and, accordingly, are often used for line art. Conversely, PNG files are truly transparent. When high-contrast text, with sharp borders and lettering, is needed, SVG files can be used. For photos, the JPG file type is best for dealing with complex imagery with a lot of colors. WEBP files behave similarly to JPG files, except that they compress more easily.
Favicons
Browsers and devices use favicons as a shortcut to launch a website or application, as well as an easier means of visual identification for users to interact with. This allows for easy browsing and a more seamless navigation experience.
