In the world of websites and servers, the term "index" is something we should pay attention to. When it comes to websites, think of it as the main page, which usually named 'index.html' or 'default.html.' It's like the front door to a website. It's the first thing we see when we visit a site, and it serves as the starting point. This page provides crucial information and links to other parts of the website, making it easy for us to navigate. Now, on the server side, 'index.html' and 'default.html' act as the entry points to web content, just like the first page of a book or the introduction of a library catalog. Understanding these files is essential because they help us grasp how web servers and websites organize and present information, ensuring a smooth online experience.
When we explore the browser's Web Dev/Inspector Network tab output screen, we can see several important details about the resources being loaded as part of a web page. These details include concepts such as the URL of each resource, the HTTP request method (such as GET method) we use to retrieve them, the request and response headers, response status codes (e.g., 200 OK, 404 Not Found), the size of each resource, and the time it takes for them to load. These elements provide insights into our browser's interaction with the web server. When we view the situation from the web server's perspective, URLs often start with "https://" or "http://," indicating their location on the World Wide Web. Conversely, when we look at it from our local computer, the URLs typically begin with "file://," showing that the resources are stored locally on our device. This difference in loading times and resource details underlines the distinctions between resources accessed from a web server and those retrieved from our local computer.
Favicon.ico gets a "200" because web browsers always look for it. It's like an expected guest. Main.css and main.js might not get "200" if they're not there or set up the right way on the server. In that case, the numbers like "404" might appear, which means "not found."
My web file's URL has four important parts. The Scheme is like the web's language; it's "https://" to ensure a secure connection. The Subdomain, such as "web" and "engr" in "web.engr.oregonstate.edu", is an extra part before the main address. The Host Domain is the main web address, like "oregonstate.edu", where my content resides. Finally, the Resources part, which appears as "/~nguyeng4/a4-nguyeng4" in my URL, pinpoints the exact location of my file on the server.
Frontend Design
Frontend design is a process to create websites and apps easy for people to use. It's like creating a welcoming and straightforward online store. Designers pick colors, fonts, images, and buttons that are clear and user-friendly. They make sure that when shoppers click on something, it responds quickly and does what shoppers expect. Staying up-to-date with the latest design trends is also important for frontend designers to meet users' expectations and provide enjoyable experiences. In a nutshell, frontend design is all about making digital places look nice, work well, and be easy to access for everyone who visits the websites.
The "Five E's of Usability" is a framework used to evaluate and ensure the usability of a product, website, or system. Each "E" represents a key aspect of usability.
Effective
Effective usability means the website is made to help users achieve what they want accurately. It makes sure users get the results they want when they use the website.
Efficient
Efficient usability is about how quickly users can finish tasks or do what they want with the website. It tries to make things simple, so users don't need to do lots of steps in order to get the results fast.
Easy to navigate
Usability that's easy to navigate means it is user-friendly, especially for new users. It makes sure users can easily figure out how to find what they want by using simple and easy-to-understand ways to move around.
Error-free
Error-free usability tries to get rid of problems that make it hard for users to use the website. It wants to make sure users don't run into issues or errors that make their experience frustrating.
Enjoyable
Enjoyable usability means the website is interesting and fits the needs of the people who are supposed to use it. It doesn't just focus on how it works. It wants users to like using it and want to come back because it is fun and satisfying.
In HTML, the page layout tags serve distinct purposes. The <header> tag is used for the top section of a webpage, commonly displaying the site's name and other crucial information. The <nav> tag helps people find different parts of the site. The <main> tag acts as a container for the central content that we aim to present prominently. If the contents are related but not quite stand alone, the <section> tag is utilized to group them together. Inside a section, individual topics are often structured using the <article> tag. If there are some extra contents that are related to an article, we can use the <aside> tag to include them. When we intend to add images or other media with descriptive captions, the <figure> and <figcaption> tags come into play. For long quotes that need to stand out, the <blockquote> tag is designed just for that purpose. Lastly, the <footer> tag is usually placed at the bottom of the page to contain legal information, contact details, and other essential links. When none of these tags precisely align with requirements, we can use the <div> tag to organize things. Thus, all these tags work together to make webpages look good and easy to use.
Anchors, represented by the <a> element, can link to different types of content.
Linking to External Content: We use the href attribute of the anchor to link to something outside the current webpage. For example, we can write <a href="https://example.com">See Example</a> if we want to link to a website like "example.com". When people click on the link, they're taken to the specified external website.
Linking to Internal Content: We use anchors with IDs when we want to direct users to a specific part of the same webpage. Let's say there's a section on the page with an ID like <div id="part1">. We can make a link to it with <a href="#part1">Go to Part 1</a>. When people click on the link, they're taken to that particular section of the page.
Linking from Page-to-Page: We use the href attribute that points to the URL of the target page to lead users to another webpage. For example, <a href="myinfo.html">Visit My Information</a> would link to a different webpage named "myinfo.html." When people click on the link, they're taken to that new page.
Optimized Images
Optimizing web images involves six important specifications to make them have better enhanced online performance and visibility. Descriptive file names would describe details like subjects and context or what is in the images to improve search engine optimization (SEO). Besides, it is important to keep the images in a small file size, so the website can load quickly, especially on devices with high-resolution screens. Resizing the image to the exact dimensions to fit the specific spaces on the website would prevent unnecessary data usage and save loading time. Also, selecting the correct file format, such as JPG for photos, GIF for logos and icons, and PNG for true transparency graphics. Creating reduced resolution versions of images to accommodate different screen sizes. Lastly, using appropriate color mode, such as RGB for .PNG, .JPG, .SVG, .WebP, and Indexed for .GIF, to ensure the best image quality. Thus, these six specifications would guarantee the web images look nice and load efficiently.
JPEG/ or WebP is the preferred file format for photos on the web due to its efficient lossy compression, which significantly reduces file size while maintaining good image quality. This makes photos load quickly on websites while still looking visually appealing. On the other hand, PNG/ or SVG/ or GIF is the preferred file format for line-art images with sharp edges or transparency. It uses lossless compression, preserving all image details, making it suitable for graphics where visual clarity is paramount. The choice between JPEG/ or WebP and PNG/ or SVG/ or GIF depends on the type of image and the balance between file size and image quality required for the specific use case.
Favicons
Browsers and devices use favicons to identify and display websites and apps. These logos or icons, often saved in .GIF, .PNG, .ICO, and .SVG file formats. Favicons appear on browser tabs, cellphone screens, and in search engine results. They work by modifying a symbol or logo to be more readable on different devices, and then saving it in multiple file formats. Browsers detect these files and may save them as bookmarks or favorites, making it easier for users to recognize and access their preferred websites. However, different browsers and devices might handle favicons differently, so their automatic display can vary.
Cascading Style Sheets (CSS)
Stylesheets CSS are crucial for websites and apps. Some main reasons to incorporate stylesheets in websites and apps can be consistency, separation, responsiveness, brand identity, accessibility, and load times. They make everything look the same (consistency), separate how things look from how they work (separation), and make designs adapt to different screens (responsiveness). Stylesheets also help maintain brand identity, make websites easier for everyone to use (accessibility), and load faster (load time). They're like the fashion designer for the website, making sure it looks good and works well.
There are five ways to incorporate styles to a website. First, we can use external CSS files with a ".css" extension and link them in the website's
section. This ensures a consistent look across all pages. Second, for specific components, we can either link separate CSS files or include them in the main stylesheet. Third, we can embed styles directly in HTML using <style> tags or apply them to individual elements using inline styling. Fourth, JavaScript template literals in functions allow dynamic styling. Finally, regular JavaScript can be used to change styles via the Document Object Model (DOM). The choice depends on the project's needs, with external CSS files being efficient for larger sites, while other methods offer flexibility for various styling requirements.