Engineering
Frontend Development
Become a professional frontend designer with skills in bHTML, CSS layout, JavaScript, frameworks, accessibility, version control and deployment-related skills.
12 weeks Beginner to Job-ready Online, live + self-paced
Enrol now
Course overview
This practical Frontend Development course teaches students how to transform website ideas and designs into responsive, interactive and production-ready websites.
Students begin with the fundamentals of how the web works and progress through HTML5, CSS3, Flexbox, CSS Grid, responsive design, JavaScript, DOM manipulation, APIs, JSON, Bootstrap, Git/GitHub, accessibility, SEO, performance optimization, domain registration, web hosting and deployment.
Learning outcomes
- Explain how websites and web applications work.
- Build websites using HTML5.
- Write modern CSS3.
- Use Flexbox and CSS Grid.
- Build mobile-first responsive websites.
- Use Bootstrap 5.3 effectively.
- Write JavaScript programs.
- Manipulate the DOM.
- Create interactive web interfaces.
- Validate forms with JavaScript.
- Consume APIs using fetch().
- Work with JSON.
- Use Git and GitHub.
- Apply basic accessibility principles.
- Apply basic SEO practices.
- Debug frontend applications.
- Optimize website performance.
- Understand npm and modern frontend tooling.
- Understand the fundamentals of React.
- Purchase/configure a domain.
- Set up web hosting and DNS.
- Deploy a website to the internet.
- Build a professional frontend portfolio.
Career opportunities
Frontend Developer UI Engineer React Developer Web Developer Frontend Freelancer
Career pathway
- Start: Junior Frontend Developer
- Grow: Senior Frontend / UI Engineer
- Lead: Frontend Lead / Design Engineer
- Alt: Full-stack or freelance
Course modules
1 Introduction to Web & Frontend Development
Introduction to Web Development
• What is Web Development?
• Frontend vs Backend vs Full Stack
• What does a Frontend Developer do?
• How websites and web applications work
• Client, server and browser
• HTTP/HTTPS basics
• Website URLs and web addresses
• Introduction to: HTML, CSS, JavaScript.
• Static vs dynamic websites
• Introduction to frontend development tools
Development Environment & Web Fundamentals
• VS Code interface
• Extensions
• Files and folders
• Project structure
• Browser Developer Tools
• Inspect Element
• Console
• Sources
• Network tab
• Basic command line/terminal
• File paths and folder organization
• Introduction to Git and GitHub
• What is Web Development?
• Frontend vs Backend vs Full Stack
• What does a Frontend Developer do?
• How websites and web applications work
• Client, server and browser
• HTTP/HTTPS basics
• Website URLs and web addresses
• Introduction to: HTML, CSS, JavaScript.
• Static vs dynamic websites
• Introduction to frontend development tools
Development Environment & Web Fundamentals
• VS Code interface
• Extensions
• Files and folders
• Project structure
• Browser Developer Tools
• Inspect Element
• Console
• Sources
• Network tab
• Basic command line/terminal
• File paths and folder organization
• Introduction to Git and GitHub
2 HTML5 Fundamentals
HTML Structure & Elements
• HTML document structure
• DOCTYPE
• HTML elements and attributes
• Headings
• Paragraphs
• Text formatting
• Comments
• Links
• Images
• Lists
• Tables
• HTML entities
Semantic HTML & Forms
• Semantic HTML
• header
• nav
• main
• section
• article
• aside
• footer
• Forms
• Input types
• Labels
• Textarea
• Select
• Radio buttons
• Checkboxes
• Buttons
• Form validation basics
• Embedding video/audio/maps
• HTML document structure
• DOCTYPE
• HTML elements and attributes
• Headings
• Paragraphs
• Text formatting
• Comments
• Links
• Images
• Lists
• Tables
• HTML entities
Semantic HTML & Forms
• Semantic HTML
• header
• nav
• main
• section
• article
• aside
• footer
• Forms
• Input types
• Labels
• Textarea
• Select
• Radio buttons
• Checkboxes
• Buttons
• Form validation basics
• Embedding video/audio/maps
3 CSS Fundamentals
Introduction to CSS
• What is CSS?
• Inline, internal and external CSS
• CSS syntax
• Selectors
• Classes and IDs
• Colors
• Backgrounds
• Borders
• Width and height
• Units:
o px
o %
o em
o rem
o vh
o vw
• CSS comments
Typography & Box Model
• Fonts
• Font sizes
• Font weights
• Line height
• Letter spacing
• Text alignment
• Google Fonts
• CSS Box Model
• Margin
• Padding
• Border
• Content
• box-sizing
• Display properties
• overflow
• What is CSS?
• Inline, internal and external CSS
• CSS syntax
• Selectors
• Classes and IDs
• Colors
• Backgrounds
• Borders
• Width and height
• Units:
o px
o %
o em
o rem
o vh
o vw
• CSS comments
Typography & Box Model
• Fonts
• Font sizes
• Font weights
• Line height
• Letter spacing
• Text alignment
• Google Fonts
• CSS Box Model
• Margin
• Padding
• Border
• Content
• box-sizing
• Display properties
• overflow
4 Modern CSS Layout & Responsive Design
Flexbox
• Why modern CSS layouts matter
• Flex containers
• Flex items
• flex-direction
• justify-content
• align-items
• gap
• flex-wrap
• flex-grow
• flex-shrink
• Navigation bars
• Cards
• Columns
• Responsive layouts
CSS Grid & Responsive Design
• CSS Grid fundamentals
• Grid rows and columns
• grid-template-columns
• gap
• Grid areas
• Flexbox vs Grid
• Media queries
• Mobile-first development
• Breakpoints
• Responsive images
• Responsive typography
• Viewport meta tag
• Why modern CSS layouts matter
• Flex containers
• Flex items
• flex-direction
• justify-content
• align-items
• gap
• flex-wrap
• flex-grow
• flex-shrink
• Navigation bars
• Cards
• Columns
• Responsive layouts
CSS Grid & Responsive Design
• CSS Grid fundamentals
• Grid rows and columns
• grid-template-columns
• gap
• Grid areas
• Flexbox vs Grid
• Media queries
• Mobile-first development
• Breakpoints
• Responsive images
• Responsive typography
• Viewport meta tag
5 Advanced CSS & Modern UI Design
Advanced CSS
• Positioning
• relative
• absolute
• fixed
• sticky
• Z-index
• CSS variables
• Pseudo-classes
• Pseudo-elements
• CSS transitions
• Transformations
• Animations
• Hover effects
• Focus states
Modern Website UI Design
• Website layout principles
• Visual hierarchy
• Color systems
• Typography systems
• Spacing systems
• Buttons
• Cards
• Navigation
• Hero sections
• Forms
• Footers
• Design consistency
• Introduction to Figma/design handoff
• Converting designs into HTML/CSS
• Positioning
• relative
• absolute
• fixed
• sticky
• Z-index
• CSS variables
• Pseudo-classes
• Pseudo-elements
• CSS transitions
• Transformations
• Animations
• Hover effects
• Focus states
Modern Website UI Design
• Website layout principles
• Visual hierarchy
• Color systems
• Typography systems
• Spacing systems
• Buttons
• Cards
• Navigation
• Hero sections
• Forms
• Footers
• Design consistency
• Introduction to Figma/design handoff
• Converting designs into HTML/CSS
6 Bootstrap 5.3
Bootstrap Fundamentals
• What is Bootstrap?
• Why use CSS frameworks?
• Bootstrap installation/CDN
• Bootstrap containers
• Grid system
• Rows and columns
• Responsive breakpoints
• Typography
• Colors
• Spacing utilities
• Flex utilities
• Display utilities
Bootstrap Components
• Navbar
• Buttons
• Cards
• Alerts
• Badges
• Modals
• Carousel
• Accordion
• Dropdowns
• Forms
• Tables
• Pagination
• Toasts
• Bootstrap icons
• Customizing Bootstrap with CSS
• What is Bootstrap?
• Why use CSS frameworks?
• Bootstrap installation/CDN
• Bootstrap containers
• Grid system
• Rows and columns
• Responsive breakpoints
• Typography
• Colors
• Spacing utilities
• Flex utilities
• Display utilities
Bootstrap Components
• Navbar
• Buttons
• Cards
• Alerts
• Badges
• Modals
• Carousel
• Accordion
• Dropdowns
• Forms
• Tables
• Pagination
• Toasts
• Bootstrap icons
• Customizing Bootstrap with CSS
7 JavaScript Fundamentals
JavaScript Programming Basics
• What is JavaScript?
• Adding JavaScript to HTML
• Variables
• let
• const
• Data types
• Strings
• Numbers
• Booleans
• Operators
• Template literals
• Type conversion
• Arrays
Programming Logic
• Conditional statements
• if
• else
• else if
• Switch statements
• Loops
• for
• while
• Functions
• Parameters
• Return values
• Scope
• Basic debugging
• What is JavaScript?
• Adding JavaScript to HTML
• Variables
• let
• const
• Data types
• Strings
• Numbers
• Booleans
• Operators
• Template literals
• Type conversion
• Arrays
Programming Logic
• Conditional statements
• if
• else
• else if
• Switch statements
• Loops
• for
• while
• Functions
• Parameters
• Return values
• Scope
• Basic debugging
8 JavaScript DOM & Interactive Websites
DOM Manipulation
• What is the DOM?
• Selecting HTML elements
• querySelector
• querySelectorAll
• Changing content
• Changing styles
• Adding/removing classes
• Creating elements
• Removing elements
• DOM traversal
Events & Interactive UI
• Click events
• Input events
• Submit events
• Keyboard events
• Event listeners
• Form validation
• Modal interactions
• Navigation menu
• Tabs
• Accordion
• Image gallery
• Dark/light mode
• What is the DOM?
• Selecting HTML elements
• querySelector
• querySelectorAll
• Changing content
• Changing styles
• Adding/removing classes
• Creating elements
• Removing elements
• DOM traversal
Events & Interactive UI
• Click events
• Input events
• Submit events
• Keyboard events
• Event listeners
• Form validation
• Modal interactions
• Navigation menu
• Tabs
• Accordion
• Image gallery
• Dark/light mode
9 Modern JavaScript, JSON & APIs
Modern JavaScript
• Objects
• Array methods
• map()
• filter()
• find()
• reduce()
• Destructuring
• Spread/rest operators
• Arrow functions
• Template literals
• Modules
• Error handling
APIs & JSON
• What is an API?
• What is JSON?
• HTTP requests
• fetch()
• Promises
• async/await
• GET requests
• Handling API responses
• Error handling
• Loading states
• Displaying API data
• Objects
• Array methods
• map()
• filter()
• find()
• reduce()
• Destructuring
• Spread/rest operators
• Arrow functions
• Template literals
• Modules
• Error handling
APIs & JSON
• What is an API?
• What is JSON?
• HTTP requests
• fetch()
• Promises
• async/await
• GET requests
• Handling API responses
• Error handling
• Loading states
• Displaying API data
10 Git, GitHub, Accessibility, SEO & Web Quality
Git & GitHub
• What is version control?
• Git vs GitHub
• Installing Git
• Creating repositories
• git init
• git add
• git commit
• git status
• git push
• git pull
• Branches
• Merging
• GitHub repositories
• README files
• Publishing projects on GitHub
Accessibility, SEO & Web Standards
• Web accessibility
• WCAG awareness
• Semantic HTML
• Alt text
• Accessible forms
• Keyboard navigation
• Focus states
• Color contrast
• ARIA basics
• SEO fundamentals
• Meta title
• Meta description
• Heading structure
• Image optimization
• Open Graph basics
• Favicon
• Clean URLs
• What is version control?
• Git vs GitHub
• Installing Git
• Creating repositories
• git init
• git add
• git commit
• git status
• git push
• git pull
• Branches
• Merging
• GitHub repositories
• README files
• Publishing projects on GitHub
Accessibility, SEO & Web Standards
• Web accessibility
• WCAG awareness
• Semantic HTML
• Alt text
• Accessible forms
• Keyboard navigation
• Focus states
• Color contrast
• ARIA basics
• SEO fundamentals
• Meta title
• Meta description
• Heading structure
• Image optimization
• Open Graph basics
• Favicon
• Clean URLs
11 Frontend Performance, Testing & Modern Framework Introduction
Testing, Debugging & Performance
• Debugging techniques
• Browser Developer Tools
• Console errors
• JavaScript errors
• CSS debugging
• Network debugging
• Performance basics
• Image optimization
• Lazy loading
• Minification concepts
• Browser caching
• Reducing unnecessary JavaScript
• Core Web Vitals introduction
• Lighthouse
• Testing responsive layouts
Introduction to React & Modern Frontend Frameworks
• Why frontend frameworks?
• Libraries vs frameworks
• Introduction to React
• Components
• Props
• State
• Events
• Conditional rendering
• Component-based development
• React project structure
• Introduction to npm
• Package management
• When to use React vs vanilla JavaScript
• Debugging techniques
• Browser Developer Tools
• Console errors
• JavaScript errors
• CSS debugging
• Network debugging
• Performance basics
• Image optimization
• Lazy loading
• Minification concepts
• Browser caching
• Reducing unnecessary JavaScript
• Core Web Vitals introduction
• Lighthouse
• Testing responsive layouts
Introduction to React & Modern Frontend Frameworks
• Why frontend frameworks?
• Libraries vs frameworks
• Introduction to React
• Components
• Props
• State
• Events
• Conditional rendering
• Component-based development
• React project structure
• Introduction to npm
• Package management
• When to use React vs vanilla JavaScript
12 Domain, Hosting, Deployment & Final Project
Domain & Web Hosting
• What is a domain?
• Domain extensions
• .com
• .org
• .ng
• .online
• Domain registration
• DNS fundamentals
• Nameservers
• DNS records
• A record
• CNAME
• MX records
• What is web hosting?
• Shared hosting
• VPS
• Cloud hosting
• Static hosting
• SSL certificates
• HTTPS
• cPanel introduction
• File Manager
• FTP/SFTP
• Connecting domain to hosting
Deployment & Final Project Presentation
• Preparing a website for production
• Uploading website files
• Connecting domain
• Configuring DNS
• Installing SSL
• Testing live website
• Mobile testing
• Browser compatibility
• SEO verification
• Performance testing
• Final debugging
• GitHub project documentation
• Portfolio presentation
• Deploying frontend projects
Final Project
• What is a domain?
• Domain extensions
• .com
• .org
• .ng
• .online
• Domain registration
• DNS fundamentals
• Nameservers
• DNS records
• A record
• CNAME
• MX records
• What is web hosting?
• Shared hosting
• VPS
• Cloud hosting
• Static hosting
• SSL certificates
• HTTPS
• cPanel introduction
• File Manager
• FTP/SFTP
• Connecting domain to hosting
Deployment & Final Project Presentation
• Preparing a website for production
• Uploading website files
• Connecting domain
• Configuring DNS
• Installing SSL
• Testing live website
• Mobile testing
• Browser compatibility
• SEO verification
• Performance testing
• Final debugging
• GitHub project documentation
• Portfolio presentation
• Deploying frontend projects
Final Project
Salary trend
Entry level₦180k–₦350k/mo or above
Mid level₦400k–₦750k/mo or above
Senior level₦900k+/mo or above
Estimated Nigerian market ranges; varies by role, company, and experience.
Ready to start your Frontend Development journey?
Seats for the next cohort are limited. Secure yours today or talk to an advisor first.
This cohort is full
Join the waitlist and we'll contact you first when a seat opens or the next cohort is scheduled.