Frontend

Engineering

Overview

Frontend engineering is a course that offers students 90% practical and 10%
theoretical learning, giving students the ability to learn real-life skills that are
marketable in today’s world. An individual who completes the program in Frontend
Engineering would be able to :
● Develop pixel-perfect website layouts using HTML and CSS.
● Build responsive web UIs with Flexbox and Grid.
● Build interactive websites using JavaScript.
● Fully comfortable building with either React, Vue, Gatsby, ChackraUI, or any JavaScript
UI libraries.
● Write clean codes and document processes.
● Work comfortably with other team members both locally and remotely via Git.
● Able to deploy Frontend apps to several web hosting services like Netlfiy, AWS, etc.
● Comfortable working with backend engineers.
Month ONE
Objective:

Orientation Month. At the end of this month, you would have a full
understanding of the scope and structure of this training, get introduced to
programming languages, and learn about tools of the trade.

Week 1: Introduction to Programming Languages and Tools of the trade

Note to the teacher: (ref) This lesson should cover the basics of programming languages.
The topics covered here should apply to most modern programming languages today. It
should be a very basic introduction and students should be given assignment(s) to get
them prepared for month 2. This is also where the students will set up their computers and
install the necessary tools.

➔ What is programming?
➔ Types of programming languages
➔ Important Programming Concepts (definitions)
◆ Data Structures,
◆ Concurrency,
◆ Big O Notation,
◆ Recursion
◆ Loops
◆ Array
◆ Parallelism
◆ A stack
 ◆ A queue
➔ Basic elements of a program
➔ Tools of the trade
◆ Operating Systems
● macOS
● Windows
● Linux Distributions
◆ Editors
◆ Figma
◆ Browsers
● Edge
● Chrome
● Firefox
● Safari
● Others
◆ Command Line tools
● Windows:
○ Powershell
○ Command Line (CMD)
○ Windows Terminal
○ Mintty
● macOS:
○ Terminal
○ iTerm
○ Powershell
○ Zsh
● Linux:
○ Bash
○ KDE Konsole
○ Powershell
● Others:
 ○ NPM
○ Git
○ Yarn
◆ Accounts to open
● Sign up on the following platforms
○ Twitter
○ Github
○ Stackoverflow
○ figma
◆ Organizing your computer (creating folders and subfolders to
keep your projects neat)
◆ Documentations and finding help:
● Mozilla Developer Network (MDN)
● W3Schools
● StackOverflow
● Freecodecamp
➔ Further Reading:

Basic Introduction to Frontend Development. At the end of month two, you

would have a good understanding of basic HTML and CSS. You would have
built a minimum of 3 projects in your assignments and the quiz section would
be active already so you can see the leaderboard.

Week 2
Week 1 outcome:
At the end of this week, you should be comfortable with the following:

➔ What is HTML?
➔ History of HTML
➔ Why HTML is the building block of the web.
➔ The basics of HTML (Hypertext Markup Language)
➔ Limitations of HTML

Content:
Note to teacher: (ref.1 ref. 2) The list of topics here are the very important things you
have to teach, however, feel free to extend the class to other HTML concepts. Be as
basic in defining these terms as possible, the general idea is to let them know that
these things exist, we don’t expect a full grasp of the concept at this stage.
➔ Definition and Terms
◆ Tags
● Open and Closing tags
● Self-closing tags
◆ Attributes
◆ Values
◆ Validation - HTML Validation
◆ DocTypes
◆ URL
◆ HTML Page
◆ HTML Color Codes
◆ WWW
◆ HTTP
◆ Image Formats:
● Svg
● Png
● Jpeg / jpg
➔ Tags:
 ◆ <h1>...<h6>
◆ Tables
◆ Forms
◆ Lists
◆ Links - href
◆ Media - audio, video
◆ Download
◆ Marquee

Assignment A:

1. Create a single HTML page (remember what makes a page):

a. Your page should have:
i. Your name
ii. A sentence about yourself
iii. Your goal for this diploma course
b. Your page should use the following tags:
i. <b>
ii. <p>
iii. <br>
iv. <h1> … <h6>
v. <marquee>
vi. List
c. Your page should not use the following tags:
i. Table
ii. Forms

2. Using table tags, building a Tabulated data page. A single page with
tabled data.
 a. The content should be A - Z, each alphabet should be in a single
cell
3. Using Forms, create a contact page:
a. Fields:
i. Name
ii. Email
iii. Message
iv. Priority (dropdown)
b. Your form should have a submit button
c. Your form should have basic HTML Validation

Week 3
Week 3 outcome:
At the end of this week, you should be comfortable with the following:

➔ CSS fundamentals ( Cascading Style Sheet)

➔ Integrating CSS in your HTML page
➔ CSS Syntax
➔ CSS colors, variables, and properties.

Content:
Note to teacher: (ref.1 ref. 2) The list of topics here are the very important things you
have to teach, however, feel free to extend the class to other CSS concepts. Be as
basic in defining these terms as possible, the general idea is to let them know that
these things exist, we don’t expect a full grasp of the concept at this stage.

● External, Internal and Inline CSS

● CSS selectors
○ ID
○ Class
● Combining Selectors
● CSS target
Assignment B:

1. Improve on your portfolio page from assignment A1 by adding:

a. More tags **might add more tags later
i. div
ii. Span
iii. Articles
b. Add more content to include the following headings:
i. Summary (about you)
ii. Education (list your past education and certificates)
iii. Job Experiences
iv. Hobby
v. Other skills
c. Move the contact form you created in assignment A3 to the
bottom of this page
d. Ensure you add adequate styling using CSS (use all the concepts
you have learned about colors and CSS properties, your grading
will be based on how much of these concept you apply
eloquently)
2. Improve on your assignment A2, by converting the tabulated page to a
calculator interface. Your calculator should have:
a. Numbers 1 to 9
b. A text field at the top
c. The following operators
i. Addition (+)
ii. Subtraction (-)
iii. Multiplication ( * )
iv. Division ( / )
v. Modulus ( % )
 d. Your calculator does not need to function in any way, but ensure
you use the right colors for the buttons and the general interface.
The goal is to make sure your calculator looks as real as possible
e. Apply as many of the CSS concepts you have learned as possible

Week 4
Week 4 outcome:
At the end of this week, you should be comfortable with the following:
● CSS Grid and flexbox
● CSS Media Queries and Responsiveness

Content:
Note to teacher: (ref.1 ref. 2) The list of topics here are the very important things you
have to teach, however, feel free to extend the class to other CSS concepts. Be as
basic in defining these terms as possible, the general idea is to let them know that
these things exist, we don’t expect a full grasp of the concept at this stage.

● CSS Grid and flexbox

● CSS Media Queries and Responsiveness

Assignment C:
1. Re-create your calculator interface using CSS grid and/or Flex
a. Ensure the interface is responsive
2. Improve your portfolio page by adding a menu. The menu items should
be the same as the sections of the page (we are working towards
making a single page website) and ensure it is responsive.
a. Add your photo to your portfolio page and other relevant
information outside of what has already been specified.
 b. Be creative, and don’t add information that will help the website
visitor know you and your abilities.
c. Highlight your “achievement” and things you are most proud of.
d. Add as many testable links as possible.
3. Build authentication page. Authentication page includes:
a. Register page
i. The following fields are required:
1. First Name
2. Last name
3. Other names
4. Phone
5. Email
6. Gender (drop down)
7. Country (Drop down)
8. State/province
9. Username
10. Password
11. Confirm Password
ii. Ensure you do proper validation on each of these fields
iii. Add a captcha validation (It doesn’t need to work). You can
use a library or create something yourself.
b. Login page
i. The following fields are required
1. Username/Email
2. Password
ii. Don’t forget to do validation
c. Password Reset Process
i. Should include 2 pages
1. Password Reset Request that would accept the users
email address
 2. Change password Page that will allow the user
change their password

Month 2
Week 1 outcome:
At the end of this week, you should be comfortable with the following:
● CSS3 Animations
● What is Accessibility and how to get started building accessible
websites.
● Structuring your CSS project
● Collaborating with designers
● Build a Responsive Landing Page

Content:
Note to teacher: (ref.1 ref. 2) Refer to the ref for the content list.

Assignment C:

1. Improve your portfolio page by adding some animation. This is totally

up to you, but ensure you don’t overdo it. Add animation to the submit
button and display a “your form is being submitted” message after
2. Add some animation to your calculator
a. Especially to the operator buttons
 3. Create a photo Gallery using HTML / CSS. This is a very open ended task,
there are no restrictions. Use your creativity and initiative. This task will
allow you to experience what it feels like to create something from
scratch. Please note the following:
a. You gallery should be a photo gallery, no need for video
b. Your gallery should show 1 photo at a time and allow navigation
between photos
c. Your gallery should allow zoom (which means I can click on a
photo to see a larger version of the same photo)

Introduction to JavaScript. You’ll be introduced to basic JavaScript and DOM

manipulation this month. At the end of this month, you’ll be able to add basic
interactivity to html elements with javascript. You will get a basic grasp of the
core concepts of JavaScript and how it can be used for other things outside
of HTML manipulation.

Week 2
Week 2 outcome:
At the end of this week, you should be comfortable with the following:

➔ JavaScript History
➔ Why JavaScript
➔ JavaScript Concepts: Terms & Definitions
◆ Statements
◆ Comments
◆ Variables
● Let & Const
 ● Assigning
● Concatenation
◆ Constants
◆ Data Types
◆ Objects
◆ Arrays
◆ Functions
● In-built functions
○ Alert
○ Confirm
○ Prompt
● parameters
➔ System Setup for JavaScript development
➔ JavaScript Syntax and principles

Content:
Note to teacher: (ref.1) Refer to the ref for content list.

Assignment D:

1. Basic JavaScript Exercises:

a. Write a javascript code that prints out your name, height and
country on the screen. The output can be done in any way,
including but not limited to using prompt, printing on the html
body, alert and confirm functions.
b. Write JavaScript code using your terminal or browser devtool, the
code should print out the same thing printed above.
 2. Improve your calculator by adding the following interactivity:
a. Each time I click a button show the value on that button in the
console
b. Each time i click an operator, show the symbol of that operator in
the console
3. Write an article regarding your JavaScript learning so far
4.

Week 3
Week 3 outcome:
At the end of this week, you should be comfortable with the following:

➔ JavaScript functions
◆ Without parameters
◆ With parameters
◆ Using Math functions
◆ Loops
➔ JavaScript Objects
➔ JavaScript Array Operations
➔ Basic Introduction to the DOM

Content:
Note to teacher: (ref.1) Refer to the ref for content list.

Assignment E:
1. Improve your calculator by making it fully functional.
a. Display result in the answer box
b. I should be able to store basic values and use them for other
calculations
2. Duplicate your calculator and add scientific functionalities
Week 4
Week 4 outcome:
At the end of this week, you should be comfortable with the following:

➔ Working with Files

➔ Sending Email with JavaScript **using libraries
➔ Combining HTML, CSS and JavaScript to build a project

Assignment E:
1. Refer back to assignment C3 by making your authentication pages
work, the following are required:
a. Registration:
i. Each time a user registers the user data should be
submitted to a file
ii. Before adding the user data to the file, ensure you check
that that user does not already exist
iii. If the user already exists inform them to use different details

b. Login:
i. When a user enters their username and password, you
should check the file if such record exists
ii. If the record exists, show them a successful login message
iii. If the record does not exist, show them failed login message
iv. Users should be able to reset their password if they have
forgotten
 c. Password reset:
i. Users should be able to request for a different password by
entering their registered email address
ii. On such request, you should check if such email exists
iii. If the email does not exist, you should inform the user
iv. If the email exists, you should send the user a reset
password email and add a link to the create new password
page
d. Create new password:
i. Users should be able to change their password
ii. Users should not be able to get to this page without going
through the reset password request from c above
iii. If user attempts to use the old password, inform them that
they cannot use the old password
iv. If a user successfully changes their password, inform them
that the change was successful.
2. Build a web application with a professional design from Frontend
mentor.
Month Three
Objectives

More JavaScript and Collaborating with others. Version control is the

practice of tracking and managing changes to the software codes. In the first
week of this month, you’ll be introduced to Git where you’ll get to learn how to
use them effectively and also to contribute and collaborate with other
developers on projects. Also, you will be introduced to JavaScript UI
frameworks and libraries, where our main focus will be on React and its
ecosystem. At the end of this month, you’ll be able to use Git effectively, write
efficient JavaScript codes, and build fast and dynamic websites using React.

Week 1
Week 1 outcome:
At the end of this week, you should be comfortable with the following:

➔ Version Control with Git

◆ History
◆ Definition of terms
◆ Git
◆ Tools & Platforms
● GitHub
● GitLab
● BitBucket
Assignment F:
1. Push all your code (from all past assignments) to GitHub
2. Update your profile with your github link
3. Setup your [username].md file on GitHub

Week 2
Week 2 outcome:
At the end of this week, you should be comfortable with the following:

➔ Deeper dive into JavaScript Built-in Features and Methods

➔ Object Oriented Programming
◆ JavaScript Objects
◆ JavaScript Class
◆ Function call, apply & closure
◆ JavaScript Async
➔ Live coding platforms:
◆ Codesandbox
◆ https://jsfiddle.net/

Assignment G:
1. Build out the following projects:
a. Terrarium
b. Typing Game
c. Space Game
 d. Bank Project
e. Browser Extension

Week 3
Week 3 outcome:
At the end of this week, you should be comfortable with the following:

➔ ReactJS: Introduction and Definitions

◆ History
◆ Why ReactJS
◆ When not to use ReactJS
➔ Environment setup (Mac, Linux and Windows)
◆ Node Package Manager: NPM
◆ Yet Another Resource Negotiator: YARN
◆ Node Package Execute: NPX
◆ Why NPM?
◆ Why YARN?
◆ Why NPX?
◆ Create React App**
➔ Installation and Getting started
◆ Install ReactJS
◆ Run sample reactjs code
◆ Configuration using Package.json

➔ Core React
◆ Component Architecture
◆ Declarative & Imperative
◆ One way Data flow
◆ ReactDOM
Assignment H:
1. Convert your portfolio page to a reactjs single page application
a. Each menu item should scroll down to the appropriate section
b. Push your code to github using the same repo but a different
branch

2. Write a Technical article, explain the concept of React and ReactDOM to

a tech novice (use examples non technical people can relate with)

Week 4
Week 4 outcome:
At the end of this week, you should be comfortable with the following:

➔ Dynamic content
◆ React Component
◆ State
◆ Props
◆ State vs Probs
➔ The React LifeCycle
➔ Hooks & Classes
➔ Functional Component v Class Component
➔ Local State Vs Global State
➔ Thinking JSX

Assignment I:
1. Convert your image gallery to a reactjs application
a. You can improve on its functionality based on the new reactjs
concepts you have learned
 b. Push the new reactjs version to the same repo but in a different
branch
2. Write a Technical article about React State and Props.

Month Four
Objectives
In the first week of this month, you’ll learn how to add React Router, and lazy
loading to your React application. For the rest of the month, You’ll learn how to
manage user Data, work with Form in React and styling. You’ll be introduced
to several CSS frameworks, CSS Preprocessors such as SASS and also
CSS-in-JS libraries. At the end of this month, you’ll have mastered Styling and
routing in React.

Week 1
What you’re learning:
➔ Architecture patterns**
➔ Introduction to React-router-dom
➔ Static page content
➔ Dynamic page content
➔ React Events
➔ Lazy loading page / Component
➔ Pagination
◆ Ordered pagination
◆ Continuous scroll
◆ “View more” type
 ➔ Error Boundary
➔ Router hooks

Assignment J:

1. Convert your authentication flow assignment to a ReactJS application,

the functionalities must remain (and improved). Use ReactJS local
storage as you have learned.
a. Push your code to github
2. Create a single page website that shows the following:
a. A video streaming service name (Please select a name for
yourself)
b. A list of available shows
c. Pagination (you can use numbers, letters or continuous scrolling)
d. Each available show/video should carry:
i. Image
ii. Title
iii. Length
iv. Description
v. Type
vi. Main Actors
e. The interface can look however you want it to look as long as the
above stated parameters are met.
f. The interface does not have to work, but it must be a ReactJs

Week 2
What you’re learning:
 ➔ Basic Third-Party Authentication using:
◆ PassportJS
◆ AuthO
◆ Firebase

➔ Deploying your application

◆ GitHub Pages
◆ Netflity
◆ Vercel

Assignment K :
1. Improve your authentication flow in Assignment J(1) by using any of the
authentication libraries you have been introduced to. Deploy to Netflify.
2. Deploy your portfolio page on GitHub pages

Week 3
What you’re learning:
➔ SASS (Syntactically Awesome Stylesheet)
➔ SASS 7-1 Architecture
➔ CSS Modules
➔ CSS in JS (Styles-component)

Assignment : Create three branches on the repository you created for the
week 1 project, name them sass-styling, css-modules and
styled-component respectively. As the branch name implies, update the
project structure with appropriate styling methods. For instance, for
sass-styling, checkout to the branch and add SASS 7-1 Architectural pattern
to the project, then do the same for css-modules and styled-components.
Note: Commit your codes to Github.

Week 4
What you’re learning:
➔ React App project week with full design (Your Portfolio website)
➔ LIVE Class

Assignment : Complete and host your portfolio website to Netlify, or Vercel.

Month Five
Objectives
In the first week of this month, you’ll be introduced to a Software intermediary called
API (Application Programming Interface), HTTP Request and Methods, and Error
handling. You’ll also learn how to make API calls to the server and manipulate the
data returned from the server on the client-side.

Week 1
What you’re learning:
➔ Introduction to API
◆ Application Programming Interface (APIs)
◆ Testing Tools
 ◆ Consuming API
◆ Understanding API response codes
◆ HTTP Methods (GET, POST, PUT, PATCH, and DELETE)

➔ Fetch API & React Query

➔ Axios
➔ Understanding CORS
➔ Manipulating Data with Map and Filters
➔ Error handling

Assignment :
1. Make your Assignment J(2) functional by using a publicly available
media API library, some examples you can use:
a. https://www.traileraddict.com/trailerapi
b. http://www.omdbapi.com/
c. Push your code to GitHub
d. Deploy your solution to Vercel

2. Build a Weather App using openweatherapi for network requests.

a. Push your code to GitHub
b. Deploy your solution to Netflify

Week 2
What you’re learning:
➔ Introduction to NextJs
➔ Why NextJs?
➔ NextJs Features
➔ Installation
◆ Project structure with NextJs
Assignment :

1. Read NextJs Documentation and write an article on Server Side rendering with
NextJS.

Week 3
What you’re learning:

➔ Introduction to TypeScript
➔ TypeScript with React

Assignment : Using NextJs with TypeScript Build an Unsplash clone with

unsplash API . Commit your codes to Github and deploy your application to any of
the free hosting platforms you have been introduced to. Also, ensure you update
your portfolio website with your new project.

Week 4

What you’re learning:

➔ Introduction to Testing
➔ Testing your React Applications
➔ Introduction to Open Source
➔ How to contribute to Open Source
➔ Introduction to Pair Programming
➔ List of Open Source Projects
Assignment:
1. Project (Unsplash Clone continue)
2. From the list of the open source projects shared with you by your instructor,
pick one and contribute to it. Also, document the process by writing a
technical article

Month Six
Objectives
State Management is another aspect of Frontend web development that is very
pivotal. In this month, you’ll learn everything you need to know about state
management in web applications and how to use state management libraries such
as Redux, Context API and GraphQL/Apollo Client in your applications.

Week 1
What you’re learning:
● React Context API
● When to use Context API
● Context API vs Local State
Assignment : Add Context API to your Weather forecast application. Commit
your codes to Github.

Week 2
What you’re learning:
➔ Redux
➔ Redux Thunk
➔ Introduction to generator function
➔ Redux Saga
➔ HOC Patterns
➔ Redux with TypeScript
➔ Common Redux patterns and avoiding props drilling
➔ Redux Toolkit

Assignment : Add Redux to your Unsplash clone application. Commit your codes
to Github.

Week 3
Capstone Project