CSE 434 Web Programming LAB

Course Title:

Modern Web Development Frameworks and Technologies

Course Overview:

This 2-credit course aims to provide students with practical, hands-on experience in modern web development frameworks and technologies. The course will focus on building a solid foundation in front-end and back-end development, emphasizing current industry practices and tools. By the end of the course, students will have developed a fully functional web application using modern technologies.

Course Objectives:

• Gain proficiency in HTML5, CSS3, and JavaScript for front-end development.
• Understand the principles of responsive design and mobile-first development.
• Learn and implement back-end development using PHP and Node.js.
• Develop skills in modern PHP frameworks like Laravel.
• Explore mobile app development with React Native.
• Integrate front-end and back-end technologies to build full-stack web applications.
• Master Git for version control and collaborative development.

Weekly Breakdown:

Week 1: Introduction to Web Development

• Course Introduction and Overview
• Introduction to Web Technologies: Overview of HTML, CSS, JavaScript
• Setting Up the Development Environment (VS Code, Git, Node.js)

Week 2: HTML5 and CSS3 Fundamentals

• HTML5: Semantic Elements, Forms, Multimedia
• CSS3: Flexbox, Grid Layout, Transitions, Animations
• Lab: Building a Responsive Web Page

Week 3: Advanced CSS and Responsive Design

• Media Queries and Responsive Design Principles
• CSS Frameworks: Introduction to Bootstrap/Tailwind CSS
• Lab: Developing a Responsive, Mobile-First Website

Week 4: JavaScript Essentials

• Introduction to JavaScript: Syntax, Variables, Functions, and DOM Manipulation
• ES6+ Features: Arrow Functions, Promises, Async/Await
• Lab: Building Interactive Web Pages with JavaScript

Week 5: Introduction to PHP and MySQL

• Introduction to Server-Side Programming with PHP
• Basics of MySQL and Database Management
• Lab: Creating a Simple Dynamic Website with PHP and MySQL

Week 6: Node.js and Express.js

• Introduction to Node.js: Event-Driven Programming, NPM, Modules
• Building RESTful APIs with Express.js
• Lab: Setting Up a Back-End Server with Node.js and Express

Week 7: Front-End Frameworks - React

• Introduction to React: Components, Props, State, Lifecycle Methods
• Building Interactive UIs with React
• Lab: Creating a Single Page Application (SPA) with React

Week 8: Back-End Frameworks - Laravel

• Introduction to Laravel: MVC Architecture, Routing, Blade Templates
• Database Migrations and Eloquent ORM
• Lab: Building a Full-Stack Application with Laravel

Week 9: Mobile Development with React Native

• Introduction to Mobile App Development with React Native
• Setting Up the React Native Environment
• Lab: Building a Simple Mobile App

Week 10: Integrating Front-End and Back-End

• API Integration: Connecting React with Node.js/Laravel Back-End
• Authentication and Security Best Practices
• Lab: Final Project Kickoff – Full-Stack Web Application

Week 11: Introduction to Git and Version Control

• Understanding Git: Repositories, Commits, Branches, and Merging
• Collaborative Development with GitHub
• Lab: Implementing Git in the Final Project

Week 12: Final Project Presentations and Course Wrap-Up

• Final Project Presentations
• Course Recap and Q&A
• Feedback and Next Steps for Further Learning

Assessments:

• Weekly Labs and Assignments (50%)
• Final Project (50%)

Resources:

• Recommended Textbooks and Online Resources
• GitHub for version control and collaboration
• Access to development tools and environments

---

This course outline ensures a comprehensive introduction to modern web development practices, with a strong emphasis on both practical application and essential tools like Git for version control.

Mohiuddin Ahmed
Senior System Architect
Tiered Communication Services, Inc
Texas, USA