Frontend for Dummies

A beginner guide to Frontend Web Development. To join the course, simply fork the repository and follow the guideline within each week course material. Complementary video discussions are posted periodically and respective links will be published here. With each week, one or more task(s) will be given that must be completed self-paced and sent to me via Pull Request.

Author

Progyan Bhattacharya

• Full Stack Developer (Specializing in React/Frontend)
• Portfolio: Progyan's Playground

Note: If you want to be an instructor, drop an issue and mention @Progyan1997

Course Objective

To create more developers to deliver Production-ready Web application focused on Software Development principles including Requirement Analysis, Design and Code Generation, Test and Quality Assurance.

Discussion on General Platform-based Development, Test-driven Development, SOLID and OOP Principles, Component-based Design for both General Web Component and React Component, Top-down and Bottom-up approach on Behavioural Design etc.

Table of Content

Week 1

• Introduction to Distributive Computing on Web
• Server/Client Architecture
• 3-Layer Architecture of Application
  • Data Layer
  • Business Layer
  • Presentation Layer
• Layout: Hypertext Markup Language
• Asthetic: Cascading Stylesheet and Pre-processors
• Functionality: JavaScript, Plugins/Libraries and Frameworks
• A Basic Overview on MVC (Model-View-Controller)

Week 2

• Introduction to HTML5
• HTML First Methodology
• Block Markups: article, aside, main, section, header and footer
• Input Types and Validation Techniques
• The missing information of div and why not to use it
• Inheritance: Class and Id

Week 3

• Introduction to CSS3
• Mobile-first Design Principles
• Block Elements and Basic CSS Usage (color, background, font etc.)
• CSS Grid and Responsive Design
• CSS Flex and Simplifying UI
• CSS Column for Auto-scaling Elements
• HTML5 Element Hirearchy for Fluid Design
• Use of CSS over JS

Week 4

• Introduction to JavaScript (EcmaScript 2018)
• Basic Data Types and Flow-control
• Asynchronous Event Handling (Callback and Promise)
• Scope and Arrow-function
• Functional Programming with JS
• Document Object Model and related APIs

Week 5

• Introduction to jQuery (v3.3)
• Advantages over Vanilla JS (historic and current)
• Rewriting JS codebase into jQuery
• Introduction to Bootstrap (v4.0)
• Class-based Styling and Responsive UI
• Bottleneck of using Bootstrap

Week 6

• Progressive Web Application
• Offline-first Capabilities
• Service worker and Caching of static content
• Using Local Storage and IndexDB
• fetch API for RESTful data transfer
• Mock native application on Mobile Platform
• Trending frameworks for PWA and Example Applications

Note: Course curriculum and content may subject to change. Please follow the latest at Official-Repository.

References

1. W3 Specification - https://www.w3.org/standards/webdesign/htmlcss
2. ECMA Specification - https://www.ecma-international.org/ecma-262/9.0/index.html
3. Mozilla Developer Network - https://developer.mozilla.org/bm/docs/Web
4. Google Chrome Developer - https://youtu.be/17kGWJOuL-A
5. Microsoft Virtual Academy - https://youtu.be/X228ppg8CEI