This is an evolving portfolio of projects built as part of the FNB App Academy in collaboration with IT Varsity, where I’m currently completing a Full Stack Development course. Each project demonstrates applied learning in web development, including HTML, CSS, and JavaScript fundamentals.
A simple static webpage introducing a fictional superhero using HTML and basic styling. Ideal for learning how to structure pages and add custom content.
- Tech Used: HTML5, CSS3
- Course Module: Web Development – Module 1
- Link: [https://sibz-tech.github.io/fnb-fullstack-portfolio/superhero-app/]
A multi-section informational website about a fictional zoo, incorporating images, headings, lists, and links. Reinforces semantic HTML and static site structure.
- Tech Used: HTML5, CSS3
- Course Module: HTML Structures & Elements
- Link: [https://sibz-tech.github.io/fnb-fullstack-portfolio/pinecityzoo-app/]
A basic calculator that performs simple arithmetic operations using JavaScript. This project introduces DOM manipulation and event handling.
- Tech Used: HTML, CSS, JavaScript
- Course Module: JavaScript Essentials
- Link: [https://sibz-tech.github.io/fnb-fullstack-portfolio/calculator-app/]
A login form UI created using HTML and styled with CSS. Includes basic form structure and field validation concepts.
- Tech Used: HTML, CSS, JavaScript
- Course Module: Forms & JavaScript Input Handling
- Link: [https://sibz-tech.github.io/fnb-fullstack-portfolio/login-in-form-app/]
- Demo Credentials:
- Username:
Bond - Password:
007
- Username:
A simple contact management web app that allows users to add, edit, and manage contact information. This project demonstrates working with multiple HTML pages, form handling, and basic JavaScript configuration.
- Tech Used: HTML, CSS, JavaScript
- Course Module: JavaScript DOM & Web Apps
- Files Included:
index.html— Main contact list pageadd-contact.html— Add a new contactedit-contact.html— Edit existing contactsconfig.js— Configuration & API setupenter-api-key.html— Input API key for secure usage
- Link: [https://sibz-tech.github.io/fnb-fullstack-portfolio/contact-book-app/]
A collection of beginner-friendly Python exercises and mini-apps developed while learning the fundamentals of Python programming. These include, Python basics via VS Code and terminal. This section demonstrates exception handling, working with data structures, and creating reusable functions and modules.
- Tech Used: Python 3
- Course Module: Python Essentials
- Projects Included:
- Rectangle Calculator — Computes the area and perimeter of a rectangle using user input.
- Shopping Cart App — Lets users input a food list with prices and calculates the total cost.
- Concepts Practiced:
- Exception handling
- Data structures (lists, dictionaries)
- Functions & modular code
- Link: [https://github.com/sibz-tech/fnb-fullstack-portfolio/tree/main/python-teachings]
Projects created while practicing JavaScript fundamentals, DOM manipulation, and basic interactivity. Apps were developed using VS Code terminal exercises.
- Tech Used: HTML, CSS, JavaScript
- Course Module: JavaScript Essentials
- Link: [https://github.com/sibz-tech/fnb-fullstack-portfolio/tree/main/learning-java-script]
Work completed while learning basic web development, including CSS styling, HTML structure, and hyperlink navigation. These exercises helped reinforce beginner front-end skills.
- Tech Used: HTML, CSS
- Course Module: Beginner Web Development
- Link: [https://github.com/sibz-tech/fnb-fullstack-portfolio/tree/main/lesson-css-html-hyperlinks]
Over the course of 9–10 weeks, I completed the Full Stack Development training with FNB App Academy in association with IT Varsity. This journey took me from beginner-level app development to intermediate and advanced concepts, culminating in passing the final assessment and earning a completion certificate.
About this Level:
- Introduction to the world of App Development
- Learned to build apps using HTML and style them using CSS
- Built 2 fully functional apps from scratch
Key Skills & Lessons Learned:
- App Strategies
- GitHub and Collaboration
- Software Development Life Cycle (SDLC)
- Principles of UX Design
About this Level:
- Introduced JavaScript to enhance interactivity and functionality
- Built 2 complete, functional apps using JavaScript
Key Skills & Lessons Learned:
- Design Thinking
- APIs, Data Input, and Processing
- User-Centric App Development
- Data Management and Analysis
- Business Development
About this Level:
- Explored back-end development with Python
- Learned to connect apps to prebuilt APIs and began building custom backend functionality
Key Skills & Lessons Learned:
- Backend Development
- AI in Development
- Business Funding
- Marketing your App
- Completed all assessments and passed the final test
- Gained practical experience building apps across HTML, CSS, JavaScript, and Python
- Learned the full app development lifecycle, from concept and design to deployment
- Received the FNB App Academy Completion Certificate
- Developed a solid foundation for further exploration in Full Stack Development
Sibabalo L. Takane
Full Stack Developer in training | Systems thinker | Faith-driven digital creator
📧 Substack | 🌐 Devotional App
© 2025 Sibabalo L. Takane. This portfolio is an academic showcase of coursework submitted as part of the FNB App Academy in partnership with IT Varsity. Not for commercial use without permission.