1.0 Introduction Frontend

This document provides an outline for a lecture on frontend development. It begins with definitions of frontend and its main components - HTML, CSS, and JavaScript. It then discusses how the web works and popular CSS frameworks and libraries like Bootstrap and Tailwind CSS. Common JavaScript frameworks like React, Angular, and Vue.js are also introduced. The document defines DOM (Document Object Model) and how JavaScript can be used to manipulate and render user interfaces dynamically. It provides examples of using JavaScript and DOM methods to modify HTML. Finally, references for further reading are included.

Uploaded by

abdullah.da.engineer

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views

1.0 Introduction Frontend

Uploaded by

abdullah.da.engineer

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 12

Introduction to Frontend

Course Code: CSC 4182 Course Title: Advanced Programming In Web Technologies

Dept. of Computer Science

Faculty of Science and Technology

Lecture No: 1 Week No: 08 Semester:

Lecturer: Sazzad Hossain; [email protected]
Lecture Outline

• What is frontend
• How Web Works
• CSS Frameworks, Libraries, and Preprocessors
• JavaScript libraries and frameworks
• What is DOM?
• Rendering User Interfaces
WHAT IS FRONTEND
•Frontend: client-facing part of a web app or in browser
•Built using HTML, CSS, and JavaScript
•Responsible for rendering UI and enabling user interaction
•Runs in user's web browser
•Communicates with backend running on a server
•Sends requests to backend, which processes and sends back responses
•Can be divided into three main components:
• HTML: structure the content of the web page
• CSS: style the page and make it visually appealing
• JavaScript: add interactivity and functionality to the page
How Web Works
CSS Frameworks, Libraries, and
Preprocessors

• Bootstrap
• Tailwind CSS
• Bulma
• Materialize
• Semantic UI
JavaScript libraries and frameworks

React: React is a popular JavaScript library for building user interfaces, developed by
Facebook.
Angular: Angular is a popular JavaScript framework for building complex, large-scale
web applications, developed by Google.
Vue.js: Vue.js is a progressive JavaScript framework for building user interfaces,
designed to be flexible and easy to learn.
jQuery: jQuery is a popular JavaScript library that simplifies HTML document
traversal, event handling, and animation.
Backbone.js: Backbone.js is a lightweight JavaScript framework that provides a simple
and flexible structure for building web applications.
D3.js: D3.js is a JavaScript library for data visualization, which allows developers to
create interactive and dynamic data visualizations.
What is DOM?

1.DOM stands for Document Object Model

2.It is a programming interface for web documents
3.The DOM represents the page so that programs can change the
document structure, style, and content
4.The DOM provides a way to access and manipulate HTML
elements on a web page
5.Developers can use JavaScript to change the content, style, and
structure of the page
6.With the DOM, developers can create dynamic web
applications that respond to user input
Rendering User Interfaces
JavaScript and DOM Methods

Plain HTML Add JavaScript to HTML

Example given here:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_method
HTML vs the DOM
References

1. W3Schools Online Web Tutorials, URL: http://www.w3schools.com

2. Next.js, URL: https://nextjs.org/
3. Mozilla Developer Networks, URL: https://developer.mozilla.org/
Thank You!