The index is the default name for the homepage of the website hosted on the Apache server. Other servers may have default.html, index.js, or index.php as the homepage.
It shows what file ran on the web dev/inspector tools under the Network tab. Under this, It shows names listed in column form, file status, file type, initiator, size, and time(in milliseconds). When the file is opened through the local computer, index.html, main.css, and main.js are listed. However, the main.css and main.js status is blank, and their size is 0 B. There is also no favicon.ico file. On the other hand, if the same file is opened on the web server, the a1-username file and favicon.ico file both have a status of 200 while main.css and main.js have a status of 404.
The Favicon.ico file's status indicates the request was successfully processed by the server. However, with main.css and main.js file 404 error is produced because the requested resource is not on the server.
The hypertext transfer protocol secure, HTTPS, is the scheme, which identifies the protocol used to request the resource. This type of scheme encrypts the data sent between the client and server. The subdomain is web.engr in the URL, and the host domain is “oregonstate.edu”. The host domain name is mapped to the IP address for that server. The subdomain is the subsection of that server. The resource is the /~khansomm/ which tells us the path to the resource on the server.
Frontend Design
Frontend design includes creating a visually appealing interactive experience for the user. It includes everything from page design to graphical user interface (GUI). The creator should consider color, fonts, background, navigation etc. to make the page as user-friendly as possible.
Five “E” of usability:
Effective
The website allows user to reach their intended goal.
Efficient
The website can complete a task with the least number of steps.
Easy to navigate
A newcomer can use the site with ease.
Error-free
The website can perform tasks without facing error messages.
Enjoyable/engaging
The site is enjoyable and engaging enough for the user to return to it.
The purpose of page layout tags is to separate content into different sets so that a break is visible before and after each set. This helps search engine robots understand the layout of the page. Most common layout tags include header, nav, main, section, article, and footer. The header tag is used for the name of the website, and it can be the same from page to page. The nav tag helps the user navigate between pages. The main tag is used for the main body of the page. The section tag is used to group related content within the body. The article is inside the section tag, and it can be used with ID selectors to make them unique. The footer includes the website owner's copyright statement.
Anchors create a hyperlink to an outside source. The hyperlink could direct a user to anywhere on the web. Navigation, on the other hand, allows the user to move from the current page to other pages or move between sections or articles.
Optimizing Images
There are 6 ways to optimize an image. First, the file name should be descriptive enough to allow search engines to find the image when needed. Next, Files should be small, so they can load quickly without lagging.
Next, the image dimension should be exact because larger dimensions would take longer to load. The image should be correctly formatted to load properly on the webpage. These formats include Joint photographic group (JPG), Graphic interchange format (GIF), or portable network graphic (PNG). The next way to optimize an image is through reduced resolution because monitors have varying resolutions, it is best to provide multiple resolutions to accommodate the user's needs. Lastly, the correct color mode should be used based on the image format to provide the best experience for the website.
JPG is the most appropriate format for photo format because it provides higher-quality images as compared to WebP. PNG is most appropriate for line art because it provides full transparency as compared to GIF which lacks this quality.
Cascading Stylesheets
Incorporating a stylesheet can improve the user experience with the webpage. Stylesheets help create a page layout, navigation blocks, font color and size, background color, and so on. A benefit of Stylesheets is that they can be used on multiple pages, which makes the design consistent throughout the website.
Five ways to incorporate styles include externally through the stylesheet, embedded using style tags, having it inline, using JavaScript template literals, or using Document Object Model (DOM) in JavaScript to style HTML elements.