FRONTEND DEVELOPMENT COURSE GUIDE

Course Overview

The Frontend Development course is a 7 weeks comprehensive program designed to equip participants with the necessary skills and knowledge required to build engaging and interactive user interfaces for web applications. Throughout the duration of this course, participants will delve into frontend technologies, learn essential programming languages, and explore best practices in web development.

 

Learning Objectives

  •         Gain proficiency in HTML, CSS, and JavaScript.
  •         Understand the principles of responsive design.
  •         Build and deploy web interfaces using industry-standard practices.
  •         Develop a portfolio showcasing frontend projects.

.     Gain experience in working cross-functionally with design and dev teams.

.     Gain knowledge on how to start a freelancing service and achieve a successful professional career as a Frontend developer. 

 

Learning Schedule

  •         Start date: Saturday Feb. 10 2024
  •         Learning days: 7 consecutive Saturdays, 3 hours each.
  •         Learning time: 10:00 AM – 01:00 PM (WAT).

 

Course Schedule (Saturdays only, 3 hours each)

Week 1: Introduction to HTML and CSS 

  •         Basics of HTML markup and structuring web content, tags, attributes.
  •         Cascading Style Sheets (CSS) fundamentals for styling and layout.
  •         Building a static webpage
  •         3 Class tasks
  •         Group project for the week

 

Week 2: Intermediate HTML and CSS

  •         HTML forms and media elements
  •         Advanced CSS: Flexbox and Grid layouts
  •         Introduction to responsive design principles for various devices.
  •         3 Class tasks
  •         Group project for the week

 

Week 3: Introduction to Git and GitHub (Saturday Feb. 10, 2024)

  •         Introduction to Git: Basic commands, version control
  •         Collaborative development with GitHub: Branches, pull requests
  •         3 Class tasks
  •         Group project for the week

 

Week 4: JavaScript Basics

  •         Introduction to JavaScript: Variables, data types, operators
  •         Control flow: conditionals and loops
  •         Functions and scope
  •         3 Class tasks
  •         Group project for the week

 

Week 5: More JavaScript

  •         DOM manipulation: selecting, modifying, and creating elements
  •         Asynchronous JavaScript: Callbacks, Promises
  •         2 Class tasks
  •         Group project for the week

 

Week 6: Introduction to React

  •         Introduction to React.js
  •         Building a simple React application
  •         Deployment to platforms like Netlify or Vercel
  •         3 Class tasks
  •         Group project for the week

 

Week 7: Personal Branding, Freelancing & Job Application

  •         Personal Branding
  •         Freelancing
  •         Resume review
  •         LinkedIn Optimization
  •         Job Application
  •         Interview Preparation

 

Course Materials/Resources

Recommended readings:

  •         “HTML and CSS: Design and Build Websites” by Jon Duckett, “Eloquent JavaScript” by Marijn Haverbeke.
  •         Online tutorials, CodePen, and other web development tools.

Assessments and Projects

.     Weekly collaborative coding assignments assessing HTML, CSS, and JavaScript proficiency.

Final project: Building Responsive Web Interfaces

  •         Apply acquired skills to build and deploy responsive web interfaces.
  •         Collaborate with Backend Developers and UI/UX Designers for a complete project experience.

Session Structure:

  •         Each session will include a mix of lectures, hands-on coding exercises, and collaborative project work.

Support and Interaction:

  •         Weekly office hours for individual or group consultations.
  •         Dedicated online platform for discussions and collaboration among participants.

Grading or Evaluation Criteria:

  •         Assignment completion and quality.
  •         Participation in discussions and collaboration.
  •         Final project demonstration and documentation.