Front End & Back End Web Development PDF

Photo by Christina Morillo: https://www.pexels.com/photo/woman-sitting-near-table-using-macbook-1181449/ Web...

Photo by Christina Morillo: https://www.pexels.com/photo/woman-sitting-near-table-using-macbook-1181449/ Web Development UX204 Front End Versus Back End  Website development refers to the work that goes into building a website. This can include everything from markup and coding to design and database management. Photo by picjumbo.com: https://www.pexels.com/photo/white-printer-paper-196645/  development. All websites require front end and back end Photo by picjumbo.com: https://www.pexels.com/photo/person-using-laptop-computer-during-daytime-196655/  Front-end development [aka “client-side development”] involves the website interface. i.e. everything users see and interact with. Design: photos/colours/text/shapes Graphics Photo by Lisa Fotios: https://www.pexels.com/photo/open-laptop-web-design-development-on-bed-16129877/ Back-end development is everything behind-the-scenes of a website: aka the infrastructure of a site. Server Application Database  [Visual designers are best-suited for a role in front-end development.] Photo by Davide Baraldi: https://www.pexels.com/photo/close-up-shot-of-an-ipad-11813187/ Front-end is built using a combination of technologies such as Hypertext Markup Language [HTML], Java Script, and Cascading Style Sheets [CSS].  https://www.brytdesigns.com/html-css-javascript-whats-the-di erence ff  HTML: [hypertext markup language] Creates the structure of Photo by Miguel Á. Padriñán: https://www.pexels.com/photo/four-letter-tiles-1591061/ a website, providing the overall layout and functionality. CSS: cascading style sheets - styles the website - De nes the layout/ colour/font - Describes the visual appearance of HTML elements - Gives developers a way to create attractive and interactive website designs fi https://stuyhsdesign.wordpress.com/wp-content/uploads/2015/09/external-style.png  JavaScript: an event-based language useful for adding interactive elements to static HTML web pages. - Such as buttons, pull-down menus, and contact forms Photo by cottonbro studio: https://www.pexels.com/photo/man-using-a-laptop-5474282/  A component library: a collection of UI elements [typography, ready-made buttons and drop-downs], kept in a single place so they can be reused for varying projects. Photo by Mikael Blomkvist: https://www.pexels.com/photo/graphic- ashed-on-a-computer-screenclose-up-6476567/ fl  A big challenge: rapidly changing technology for applications and websites, as well as the variety of devices with varying screen sizes and resolutions. Photo by Pixabay: https://www.pexels.com/photo/macbook-pro-beside-white-ipad-4158/ Static vs. Dynamic websites: Photo by Tranmautritam: https://www.pexels.com/photo/apple-imac-on-brown-wooden-desk-948050/ A static website displays content that doesn’t change and has no interactions. Examples: one-o landing pages, resume websites - i..e websites that are websites are small (three to four-ish pages), little content, and don’t need personalized content or frequent updates. ff Dynamic website: presents di erent information to di erent visitors and can be determined by several factors, such as their location, local time, settings and preferences, and/or actions they’re taken on the website (e.g., shopping habits), making for a more tailored and interactive experience. https://blog.hubspot.com/website/static-vs-dynamic-website#:~:text=Common examples of static websites,personalized content or frequent updates. ff ff Back-end web development [aka server-side development]: Controls background tasks we can’t see and ensures the front-end runs smoothly. Back-end development tasks include writing APIs [Application Programming Interface] Creating libraries Writing code to communicate with the database Photo by ThisIsEngineering: https://www.pexels.com/photo/woman-writing-on-whiteboard-3861943/ Photo by Anna Shvets: https://www.pexels.com/photo/people-woman-laptop-girl-12662854/ PHP Java Ruby Python languages include Back-end programming Back-end developers primarily work on Servers Applications Databases Photo by Kevin Ku: https://www.pexels.com/photo/data-codes-through-eyeglasses-577585/ Back-end developers are responsible for maintaining a database of registered users. fi The back-end addresses and things like shipping payment information. functionality manages Photo by Liza Summer: https://www.pexels.com/photo/crop-unrecognizable-woman-carrying-parcels-in-post-of ce-6348097/ A back-end database manages website content so it’s easy to organize, retrieve, edit and save data. Java [not to be confused with JavaScript] was designed to run on the server side from the ground up.