U-Tech Forge (UTF)
Frontend
(HTML, CSS, JavaScript)
Web Development
UNIFIED TECH FORGE (UTF) BOOTCAMPS
“No coding experience needed”
Bootcamp Curriculum
Email: [email protected]
Curriculum Version 1.0
Phone number: 08145388936
Bootcamp Overview Frontend Development Curriculum
Target Audience
This bootcamp is designed for beginners/career switchers/designers
wanting to upskill in frontend development
Prerequisites
No prior experience require
No coding experience required
Duration
3 months (12 weeks)
Monday - Friday (5pm-7pm WAT)/ (4pm-6pm UTC)
Format
Live classes and educative webinars including recorded session
Hands-on assignments and real world projects
One-on-one mentorship/career coachin
Portfolio development (5 live portfolio projects)
Outcome:
By the end of the bootcamp, participants will master key frontend
development skills through real-world projects and build a job-ready portfolio.
They will confidently present their work in interviews and be equipped to
pursue software developer roles, with the tools and knowledge to advance in
their careers.
Certification:
Upon successful completion of the bootcamp, participants will present their
portfolios for review by instructors and receive a certification from U-Tech
Forge (UTF)
Learning Modules Frontend Development Curriculum
The following modules have been designed to take you through the essential
concepts and practices of frontend development and engineering. Each
module focuses on a key area of frontend development, progressively building
your skills from fundamental principles to advanced techniques. Throughout
the bootcamp, you’ll engage in hands-on projects and use industry-standard
tools to create a strong foundation for your career in web development.
Module 1: Getting Started With The Web
Introduction to Web Development: B rief overview of what web development is
and its importance the digital worl
The Story of Your First Website: E ncouragement to start small and create a
simple website as a starting point
Settin g U p Development Tool
Inst llin a g Ba sic Soft wa re: G uide on selecting and installing essential web
development tools like a code editor (e.g., VS Code), version control ( it), G
and browser dev tool
Introduction to ode ditors nd ro ser Tools: Familiari z ing students with the
C E a B w
tools they’ll use to write, edit, and debug code
P a l nnin Your Websit g
Desi n nd g a La yout l nnin : U nderstanding the structure and purpose of your
P a g
website before starting code. Discuss fonts, colors, and layou
De lin ith Files: How to structure files in a web pro j ect (H T ML, C
a g w SS , JS ,
media) for effective organi ation z
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
H o the Web Wor
w k
U nderst ndin the Web: W hat happens when you visit a website? Discuss
a g
servers, clients, and how the browser communicates with a serve
Web St nd rds nd est r ctices: O verview of web standards (e . g ., W3 C ) and
a a a B P a
why adhering to them is important
P ublishin Your Websit g
H ostin g a nd Dom in Setup: B asic guide on how to publish a website (G it H ub
a
Pages or similar free hosting
Deployin S mple ode: tep - by- step instructions on getting the code online
g a C S
for others to access
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 2: INTRODUCTION TO HTML
Definition of TM H
Hypertext Mark-up Language as the foundation of web development
Differences between HTML, C , and ava cript in terms of web page SS J S
structure, presentation, and behavior.
" Hy pertext " and its role in connecting web pages ( links and h y perlinks ).
H TM Synt L ax a nd lements (Introduction to TM elements nd structure
E H L a
Explanation of HTML tags, attributes, and how to annotate text, images,
and other content for web browsers.
Case insensitivity of HTML tags and the convention of using lowercase.
Common HTML elements: `<head>`, `<title>`, `<body>`, `<header>`,
`< footer >` , `< p >` , `< div >` , `< span >` , etc .
Basic HTML Structur
How to set up a basic HTML document with `<!DOCTYPE html>`, `<html>`,
`< head >` , and `< bod y >` tag
Using meta tags, titles, and basic content
HTML for Text and Formattin
Applying HTML to text (headings, paragraphs, bold, italic, etc.).
Creating lists: `<ul>`, `<ol>`, `<li>`.
Inline vs blocklevel elements.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 3: HTML Applications
L in s nd N vi tio
k a a ga
Creating hyperlinks (`<a>` element) and connecting web pages
Internal vs external linkin
Using anchor links for navigation within the same page
M ultimedi a a nd mbeddin
E
Inserting images with `<img>` and configuring attributes (e.g., alt text).
Embedding audio and video content using `<audio>` and `<video>`
element
Embedding other content (e.g., iframes)
HTML Form
Introduction to forms and how they collect data.
Building forms with elements like `<form>`, `<input>`, `<textarea>`,
`< button >` , `< select >`.
Basic form validation and action attributes.
Advanced HTML Technique
Using COR (Cross Origin Resource haring) with images and media.
S S
Preloading content with `rel="preload"` to optimi e page performance. z
Best Practices and Problem Solvin
Using HTML to solve common problems (titles, images, forms).
Working with global attributes.
Structuring HTML for accessibility and readability.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Quirks Mode vs Standards Mod
Historical differences between browser rendering modes and why modern
browsers use standards mode.
HTML References and Resources
HTML element reference and attribute reference.
Inline vs. block level elements explained.
G lobal attributes and their usage.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 4: Introduction to CSS
C SS ( AS ADING STY S C TS) ASI C LE HEE B C
x pl in th t
E SS is style sheet l n u e used for presentin
a a C a a g ag g H TM elements:
L
Example: Change paragraph text colour to red using C . Hands-on: Create SS
a new C file, link it to an HTML document, and style text.
SS
An tomy of SS Rule set (Selectors, roperties, nd V lues): Explain each
a a C P a a
component of a C rule set: selectors, declarations, properties, and SS
values. Hands-on: Write basic rule sets to style HTML elements
(paragraphs, headings, etc.
Applyin SS (Intern l, xtern l, nd Inline SS): Discuss the three ways of
g C a E a a C
applying C . Hands-on: Add inline, internal, and external C styles to an
SS SS
HTML page to see how they behave differently.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 5: CSS Applications (I)
Selectors in Dept
Types of Selectors: E lement , I D, Class , Attribute , and P seudoclass selectors .
Hands-on: Practice using different selectors to target HTML elements.
Example: tyle elements by class, ID, or hover states (e.g., `p:hover`)
S
Fonts nd Text Stylin a
Fonts: How to use G oogle Fonts , font families , and set font si zes . H ands- on :
Add oogle Fonts to a website and style text elements like `h1`, `p`, and `li
G
Text roperties: Font si e , text alignment , line height , and letter spacing .
P z
Hands-on: tyle headings and paragraphs with different text properties for
S
readability
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 6: CSS Applications (II)
The ox Mode B
Introduction to the Box Model: Padding, margin, border, and content.
Hands-on: isuali e and experiment with the box model on different HTML
V z
elements.
Properties in Action: Learn how to control element dimensions and
positioning with `width`, `height`, `padding`, `Margin`, and `border`.
Ba c rounds nd olor
kg a C
Adding Backgrounds: Background color and image properties.
Hands-on: et a background color and image for the webpage.
S
Coloring Text and Boxes: Use `color` for text and `background color` for
elements.
Hands-on: tyle different sections of a webpage with contrasting colors
S
for clarity and aesthetics.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 7: CSS Applications (III)
P ositionin g E lement
Centering Content: Use margins and `display` properties (block vs. inline
elements).
Hands-on: Center an image and body content using `margin: 0 auto;` and
` displa y : block ; ` .
Box Positioning: Learn about positioning properties (`static`, `relative`,
` absolute ` , ` fixed ` ).
Hands-on: Use different positioning techniques to place elements in
desired locations
Adv nced SS ropertie
a C P
Text Shadows and Other Effects: Use CSS for aesthetic effects like text
shadow.
Hands-on: Apply textshadow and boxshadow to elements for a polished
look.
Display and Visibility: Understand `display` (block, inline, inlineblock, none)
and how it affects layout.
Hands-on: Play with `display` property to modify element behavior
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
Learning Modules Frontend Development Curriculum
Module 8: Introduction to JavaScript
Key Concept
What is JavaScript?: Learn what JavaScript is and why it's important in web
developmen
How JavaScript Works: Understand how JavaScript interacts with HTML and
CSS to create dynamic website
Including JavaScript in HTML: Learn the `<script>` tag and where to place
JavaScript code in an HTML document
JavaScript Syntax and Fundamental
V ri bles nd D t Types: Learn about ` var` , ` let` , and ` const` . Understand
a a a a a
J ava S cript ' s data t y pes : strings , numbers , B ooleans , arra y s , and ob j ects .
Oper tors: E xplore mathematical operators ( ` + ` , `` , `` , ` / ` ), comparison
a
operators (`==`, `===`, `!=`), and logical operators (`&&`, `||`, `!`).
C ondition ls: Learn ` if ` , ` else ` , ` else if ` , and switch statements .
a
L oops: M aster loops like ` for ` , ` while ` , and ` do ...while ` .
Functions: Learn how to write functions , use parameters and return values .
Scope nd oistin : U nderstand how variable and function scope works in
a H g
J ava S cript and the concept of hoisting .
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
10
Learning Modules Frontend Development Curriculum
Module 9: JAVASCRIPT: OBJECTS, ARRAYS, AND DOM MANIPULATION
Key Concept
Arrays: Learn how to create , manipulate , and loop through arrays with
methods li ke `push () ` , `pop () ` , `shi f t () ` , `map () ` , and ` f ilter ()
Objects: Understand how to de f ine ob j ects , access their properties , and
method
Prototypes: Learn about JavaScript ’s prototype based inheritanc
DOM (Document Object Model): Understand how JavaScript interacts with
HTML using DO M to select , modi f y, and add elements to a webpag
Events: Learn event handling (e . g ., `clic k ` , `input` , `submit` ) and how to create
interactive web page
Error Handling: Use `try` , `catch` , and ` f inally` to manage errors in your code
Project
Create a To D o list app .
Build an image carousel
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
11
Learning Modules Frontend Development Curriculum
Module 10: ADVANCED JAVASCRIPT: ES6 AND BEYOND
ES6 (ECMAScript 2015) Feature
Arrow Functions: Learn the shorthand synta x for f unction
Classes: Understand how to create and use classes and inheritanc
Destructuring: Ex tract data f rom arrays and ob j ects into variable
Template Literals: Simpli f y string interpolation and multiline string
Promises: Learn about promises for handling asynchronous cod
Modules: Understand the `import` and `ex port` synta x for modular cod
Closures: Learn about closures , how they wor k, and when to use the
This Keyword: G ain a deep understanding o f how `this` wor k s in di fferent
contex t
Higher Order Functions: Functions li ke `map () ` , ` f ilter () ` , `reduce () ` , and how
they enhance f unctional programming
Project
Create a weather app using a public API and P romises or `async /await`
Develop a quiz application
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
12
Learning Modules Frontend Development Curriculum
Module 11: ASYNCHRONOUS JAVASCRIPT AND APIS
Key Concept
Callbacks: Understand how to use callbac k f unction
Promises: Learn how to handle asynchronous tas k s using P romise
Async/Await: Write cleaner asynchronous code using `async` and `await
APIs: Learn how to fetch data f rom ex ternal API s using the ` fetch () ` f unction
or ` X MLHttpRe q uest
AJAX: Understand the f undamentals o f ma k ing asynchronous HTT P re q uests
in JavaScript
Project
Build a simple web app that fetches data from a REST API (e.g., fetching
G itHub users ).
Use P romises or `async /await` to handle API data
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
13
Learning Modules Frontend Development Curriculum
Module 12: JAVASCRIPT DEBUGGING AND TESTING
Key Concept
Developer Tools: D eveloper Tool
Debugging: Use `console . log () ` , `debugger` , and other debugging tools to f i x
issues in your cod
Testing: Learn about JavaScript testing f ramewor k s li ke Mocha , Jasmine , or
Jes
Unit Testing: Write unit tests to validate your f unctions and code components
Practic
Debugging exercises using browser developer tools
W rite tests f or basic JavaScript f unctions
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
14
Learning Modules Frontend Development Curriculum
Module 13: JavaScript Frameworks and Libraries
Introduction to Librarie
jQuery: Learn basic jQuery syntax for DOM manipulation (though it’s less
used in modern development).
Lodash/Underscore: Practice using utility libraries.
React.js: Learn React fundamentals, including JSX, components, state
management, props, and the component lifecycle.
Vue.js: Explore Vue.js, a simple and easytolearn framework.
Other Libraries: Get familiar with Djs for data visualization and Three.js for 3D
web graphics.
Mon-Friday (5pm-7pm WAT)/(4pm-6pm UTC)
15
Bootcamp Deliverables and Reference Guide Frontend Curriculum
Bootcamp Deliverables
B ootc mp Deliver bles a a
Fully developed job-ready portfolio with frontend development case
studies and personal project
Final collaborative capstone project showcasing end-to-end skill
UTF course certification
Resume and L inked I n optimi ed for software developer role z
Job interview preparation and guidance as well as networking tips
(Active Tech Community)
Reference Guide
B oo s:
k
Exclusive access to carefully curated books for bootcamp members.
Online Resources:
Premium online resources are available exclusively to bootcamp members.
16
