FNB APP ACCADEMY NOTES 07 MAY 2025
Beginner-Level App Development Notes (2000-word overview)
1. Begin Your Development Journey
What it means:
This is your first step into the world of creating software or websites.
You’re learning the basics of how apps and websites are made.
Think of it like learning how to build with Lego bricks, but with code.
Why it’s important:
Every great developer starts as a beginner.
Understanding the foundations will make future learning much easier.
️ What you will do:
Set up your computer to write and view code.
Get familiar with coding environments (like using a text editor such as VS Code or a browser for testing).
Start with small, simple projects (like a personal profile page).
2. Learn to Build Apps Using HTML and CSS
What is HTML?
HTML (HyperText Markup Language) is the skeleton of a web page.
It tells the browser what each part of the page is: headings, text, images, buttons, links, etc.
What is CSS?
CSS (Cascading Style Sheets) is used to style your HTML.
It’s like decorating your house after it’s built: changing colors, sizes, fonts, spacing, etc.
Why they matter:
HTML and CSS are the core building blocks of the web.
Every website you visit uses HTML and CSS.
️ What you will do:
Create a basic web page using HTML.
Add color, style, and layout using CSS.
Build small features like buttons, forms, and image galleries.
3. Explore Basic App Layouts
What is a layout?
A layout is how things are arranged on a screen—like putting furniture in a room.
Common layout parts include:
A header at the top (logo, title, menu)
A main content area (text, images, articles)
A footer at the bottom (contact info, links)
Why layouts are useful:
A good layout helps users easily find what they need.
Helps you keep things organized and professional.
️ What you will do:
Use CSS to place sections of your page.
Learn about Flexbox and Grid, which are tools in CSS to control layout.
Build a homepage or a landing page with sections.
4. Advanced Styling Techniques
What does “advanced” mean here?
It doesn’t mean hard – it means a bit more than the basics.
You’ll learn cool techniques to make your apps look modern and professional.
Examples:
Adding hover effects to buttons (they change when you move your mouse).
Making your app responsive (it works on phones, tablets, and desktops).
Using animations and transitions (e.g., fading in text or sliding images).
Why styling matters:
Users are more likely to enjoy and trust apps that look nice.
Good design can even help your app succeed.
️ What you will do:
Style buttons, headers, and menus.
Create a mobile-friendly layout.
Add a little animation for interactivity.
5. Build 2 Complete Apps From the Ground Up
What does “from the ground up” mean?
You will create two full working apps by yourself.
You’ll start with a blank screen and build everything step-by-step using what you learned.
Why this is powerful:
You get to practice everything you’ve learned.
You’ll understand how all the pieces of an app come together.
It gives you something to show others or use in your portfolio.
️ What kinds of apps could you build?
A personal profile app with your bio, picture, and contact info.
A to-do list app where you can add and remove tasks.
A simple recipe book, travel guide, or photo gallery.