An index is a pathway to a resource on a server.
The majority of web servers are mapped to a file on a path.
Index.html is a designated homepage that many
Web applications utilize in their root directory.
The web application is designed to return the index.html file when
a GET request is received.
When viewing the file on the local computer,
it displays three file names with their status codes.
The file index.html has a successful status code, while the files main.css and main.js have a successful status code.
Index.html used GET as the requested method. Also, the response header is displayed, showing the last content type and last modification.
While viewing the file on the web server, there is more information in the Network tab output.
For instance, the response headers for the file have
the connection, content-encoding, content-length, server, etc. The files main.css and main.js have a status code 404, which
means they were not found.
The file favicon.ico has a status code of 200 because it exists on the OSU pathway. The files main.js and main.css have a 404 status code because the
files do not exist on the URL pathway.
The scheme for the web server's viewing is HTTPS, which identifies the encrypted protocol used
to send the request. For the scheme on the local computer, it is a file. The subdomain on the server is web.engr, followed by host/domain
extensionsoregonstate.edu. The domain name oregonstate.edu is mapped to the IP address of that specific server.
The subdomain name for the local computer is Users. Lastly, the path to the resource
on the server is /~baxc/a1 -baxc.
Frontend Design
Frontend design is about producing positive, intentioned encounters for customers. The frontend design includes the graphical user interface (GUI), the visual design and lastly, the interactive experience. Some aspects of the visual design are the
font, consistent color scheme, typography scheme, photography, illustration scheme, icon and navigation systems. Frontend design trends tend to change frequently, and it is important to be aware of the newest trends. Usability is the assessment of the quality of a user's experience when using a system or product. Below, are the Five "Es" of usability for a system, service or product.
Five "Es":
Effective
At helping users reach their objective
Efficient
Users can perform their tasks with minimum steps
Easy to Navigate
Is it easy for new users to understand how to complete their objective? Will the user be able to
remember how to use it next time?
Error-Free
Will the users run into errors? It is important to identify common errors a user may encounter. Reducing errors creates better accessibility.
Enjoyable
Is the service appealing to use? Is the design and content attractive for the intended user? Will the user want to come back because of their overall experience?
There are a number of different page layout tags that can be utilized when creating a system or product.
A header element is used to create the banner or masthead for a site or app. This usually entails the publisher's name and marketing slogan.
The nav element is implemented for users to go from one page to another. This element can be used numerous times, and it often includes the main menu, stories, location, etc.
The main element holds the primary block of content, such as galleries. Another page layout tag is section,
this tag is used to group relatable content together. An article element is usually used inside a section element. The article element has a
second-level headline and normally designates a single, specific topic. The aside element is usually located on the left or right side of content
in an article and is often related to the article content.
The figure element is frequently located on the left or right side but includes media with a figcaption tag.
The blockquote element is designated for extended quotations.
Footer elements are located below the tag and usually entail legal information, links to
critical pages, and contact information. Lastly, the div element is used as a placeholder for dynamic content.
External and Internal Anchors:
External Anchors use the anchor element and content between the opening and closing of the a tag to
describe the link. A href attribute is used to specify the path or URL. When the user clicks on the URL link, they are taken to a URL outside
the current website.
Internal anchors use an anchor element and content between the opening and closing of the a tag to
describe the link. A href attribute is used to specify the path or URL. When the user clicks on the URL link, they are taken to a URL within
the current website. Also, ID= is utilized to create a link for a text item within the same page.
Optimizing Images
There are six major specifications for images on the web. Firstly, a descriptive file name
is important to have because it improves search engine optimization. A
descriptive file name should include who, what, when and where. Secondly, a small file size
is important because reducing the size results in the fastest load time for the image. There are two different types
of compression: lossy and lossless. Lossy compression discards the data from the image and this can
lead to pixelation. Lossless compression does not reduce the visual quality. Thirdly, exact dimensions are crucial because if the image is too big for
the space on the webpage, it will load slowly. Cropping the image will result in a faster loading process. Another specification
is the correct file format. The correct file format is essential because it affects the quality of the image. For example,
the incorrect format can cause blurry or pixelation. Some of these formats are .JPG, .PNG and .GIF. Reduced resolution is another specification,
and today, monitors deliver between 72 and 300+ pixels per inch. There are much higher resolutions today, and implementing multiple image sizes
is becoming the new standard. Lastly, color mode is used to store images more efficiently and allows the display of colors to be
consistent across devices.
JPG and WebP formats are the best for photos. JPG and WebP files compress to a small file size while remaining rectangular. This allows the photo
to load quickly. JPG uses lossy compression, and WebP supports lossless and lossy compression. The file formats GIF and PNG are best for line art. These two formats
are ideal for line art because of their color transparency.
Favicons
Browsers use favicons to be quickly identifiable in the browser tab. Favicons
can be saved in multiple different formats, such as .ICO, .SVG, .PNG and .GIF. A symbol or logo is
created and then modified to work on different devices. The number of file formats
is then saved. The browser takes the files, and when there is a request for the icon to be used, it
will save the icon and anchor it to a bookmark, favorites list, etc.
Cascading Stylesheets
There are many reasons to incorporate stylesheets in websites and apps. For instance, CSS creates a faster page speed. CSS permits you to use less code by allowing you to use one CSS rule, and it is then applied to all occurrences of that specific tag. Also, CSS creates a better experience for users.
CSS creates an attractive web page for the user and fosters user-friendly formatting. For example, having text and buttons in a logical and organized manner. When using CSS, it allows developers
to create web pages efficiently. The ability to replicate a style sheet across several website pages, saves the developer time. With CSS, it is easy to make formatting changes.
A developer can easily fix an issue by making one change that reflects on all the pages.
Lastly, CSS has compatibility across all devices. A user needs compatibility when viewing a web pages/app on a phone, computer or tablet.
There are five ways to incorporate styles. External CSS rules for reinventing an element's selector are usually done in one or more external files.
These external files have a .css file extension. The stylesheet file is linked in the global head area of the website. The external file
enables styles to all pages within a website. Externally linked CSS files are a very efficient method for website development. Inline CSS is
used to apply a certain style to a single HTML element. While embedded style is used to apply a style to an element, but the style element is located in the head.
JavaScript template literals allow for functionality beyond what a normal string can provide. Specifically, you can use single or double quotations within a string and
have a multiline string. You can also translate variables into a string as a string value with a template literal. Lastly, in regular JavaScript, styling can be created by manipulation of the Document Object Model.
This creates a search for a specific tag, and it then updates the style.
