Introduction to Frontend Development

This course provides an overview of the key concepts and technologies involved in frontend development. The course starts with an introduction to web development, followed by an overview of HTML, CSS, and JavaScript, the three fundamental languages used in frontend development.

2 Credits

2 weeks

SDE 803

Content

The course covers the basic syntax and structure of each language, and how they work together to create dynamic and responsive web pages. It also explores the Document Object Model (DOM), a programming interface for web documents, and how it can be manipulated using JavaScript to create interactive web applications.

It concludes with an overview of popular frontend frameworks and libraries such as Bootstrap, React, and Angular, and their role in building modern web applications. Over the duration of this course, students will work their way through the following topics:

  • Introduction to HTML: syntax, elements, attributes, and tags
  • Introduction to CSS: Syntax, Selectors, and properties; responsive web Design: designing for different devices and screens
  • Bootstrap framework: introduction, grid system, and components
  • JavaScript: introduction, syntax, and basic concepts; document object model (DOM): introduction, nodes, and properties
  • jQuery: introduction, selectors, and events; basic web animation: introduction to CSS animations and transitions; web accessibility: introduction, best practices, and techniques; web performance: introduction, optimizations, and techniques.

Outcomes

By the end of the course, students should be able to:

  • Understand the fundamentals of HTML, CSS, and JavaScript, including syntax, structure, and common programming paradigms.
  • Build responsive and accessible user interfaces using modern frontend frameworks and libraries such as React, Angular, or Vue.js.
  • Apply web design principles and best practices to create visually appealing and functional websites and web applications.
  • Implement basic web development tools and workflows, such as version control with Git and GitHub, task automation with Grunt or Gulp, and package management with npm or yarn.
  • Debug and troubleshoot common frontend issues, such as browser compatibility, network latency, or security vulnerabilities, using debugging tools and techniques like Chrome DevTools or Lighthouse.