Front-End Development

• Front-end web development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.
• The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant.
• The challenge associated with front-end development is users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.
• The tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

Technologies used for Front-End Development

Hyper Text Markup Language (HTML): The standard markup language used to create web pages. A markup language is your way of making notes in a digital document that can be distinguished from regular text. It’s the most basic building block you’ll need for developing websites.

Cascading Style Sheets (CSS): The language used to present the document you create with HTML. Where HTML comes first and creates the foundation for your page, CSS comes along next and is used to create the page’s layout, color, fonts, and…well, the style!

JavaScript (JS): is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input.

Using a technique called AJAX, JavaScript code can also actively retrieve content from the web (independent of the original HTML page retrieval), and also react to server-side events as well, adding a truly dynamic nature to the web page experience.

Goals for Front-End Development

Accessibility: To ensure that site comes up correctly in browsers on all devices. Creating a responsive web design using stylesheets in CSS.

Performance: Performance goals are chiefly concerned with render time, manipulating the HTML, CSS, and JavaScript to ensure that the site opens up quickly.

Developer Tools

• Computer : Desktop running Windows, Mac, or Linux.
• Code Editor : Visual Studio Code
• Web Browser : Chrome
• Graphic Editor : Adobe XD and Photoshop
• Version Control System : Git
• Automation system : Webpack
• Frameworks : Bootstrap, Angular
• Web Server : Python or NodeJS

Reason for using the webserver for the local testing environment

1. They feature asynchronous requests. Browsers will not run async requests if you just run the example from a local file. This is because of security restrictions.

   • The trouble with this model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again. This is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex
   • This led to the creation of technologies that allow web pages to request small chunks of data (such as HTML, XML, JSON, or plain text) and display them only when needed, helping to solve the problem described above.
   • This is achieved by using APIs like XMLHttpRequest or — more recently — the Fetch API. These technologies allow web pages to directly handle making HTTP requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.

2. They feature a server-side language. Server-side languages (such as PHP, Python, NodeJS) require a special server to interpret the code and deliver the results.