FNB App Academy Notes 08 May 2025
Way Forward: Beginner to Confident Web Developer (4000-word guide)
6. Dive Deeper into HTML and CSS
What You’ve Learned So Far:
HTML for structure
CSS for styling
Now let’s go a bit deeper and expand your skills.
Deeper HTML Concepts:
Forms: Let users interact with your app.
Inputs for name, email, passwords.
Buttons for submitting information.
Forms are used in login pages, contact forms, feedback boxes, etc.
Semantic Tags: Help search engines and screen readers understand your content.
<article>, <section>, <aside>, <nav>, <main> are some examples.
Tables: Useful for displaying organized data (e.g., price lists or schedules).
Audio/Video Tags: Add multimedia to your app.
Deeper CSS Techniques:
Pseudo-classes: Like :hover, :focus, and :nth-child() for interactive behavior.
Custom Fonts & Google Fonts: Make your site feel unique and modern.
Box Model Mastery: Understand margin, padding, border, and content clearly.
Z-index and Positioning: Let you stack or move elements (like popups or sticky headers).
CSS Variables: Store and reuse common colors, sizes, etc.
️ Practice Project Ideas:
Build a feedback form that saves data (even just on the front end).
Create a table to show prices for services.
Add a background video to a homepage.
7. Make Your Web App Mobile-Friendly (Responsive Design)
What is Responsive Design?
It means your app looks good on all devices—phones, tablets, and desktops.
Why It’s Important:
Most users browse the web on mobile.
A mobile-unfriendly app frustrates users.
Google ranks mobile-friendly sites higher.
How You Do It:
Use media queries in CSS. These are rules that change styles based on screen size.
Avoid fixed widths (like width: 500px). Instead, use percentages or flexible units (em, rem, vw, vh).
Use Flexbox or CSS Grid instead of float or tables for layout.
Images should scale. Use max-width: 100% to make images responsive.
️ Practice Activity:
Take a basic web page and test it on different screen sizes (or use browser dev tools).
Use media queries to adjust layout and font size.
Create a mobile-first layout.
8. Add Interactivity with HTML and CSS Only (No JavaScript Yet)
You can do a surprising amount of interactivity without needing JavaScript.
Examples:
Tabs using radio buttons and labels
Dropdown menus using hover and nested lists
Image sliders using checkboxes
Why This Matters:
You learn how far HTML and CSS can take you.
You improve your design and logic thinking.
You stay within beginner-safe territory.
️ Try This:
Create an FAQ section were clicking on questions reveals answers.
Build a CSS-only navigation bar with a dropdown.
9. Learn How to Organize Your Project Like a Pro
What Beginners Often Miss:
Your files can get messy fast.
Good File Structure Makes Work Easier:
Easier to find and fix code
Looks professional
Prepares you for working on teams
Folder Tips:
/myapp
|– index.html
|– /css
| |– style.css
|– /images
| |– photo1.jpg
|– /js (for later)
️ Practice:
Refactor (reorganize) your old projects into folders.
Keep HTML, CSS, and media in separate folders.
10. Introduction to Developer Tools and Inspecting Code
What Are Developer Tools?
Built into browsers like Chrome and Firefox—help you test and debug your code.
What You Can Do:
View HTML/CSS of any website.
Try changes in real time (without editing files).
See how elements are styled and positioned.
Test responsive layout.
️ Practice:
Right-click on a website and select “Inspect.”
Find a button and change its color.
Switch to mobile view and see how sites respond.
11. Design Basics for Developers
You don’t need to be a designer, but you should understand design principles.
Key Concepts:
Color Theory: Use tools like coolors.co to build palettes.
Typography: Pair fonts wisely (1–2 fonts max).
Spacing: Use white space generously to avoid clutter.
Consistency: Use the same style across your app.
Design Tools:
Figma (free, web-based)
Canva (for creating simple graphics)
Google Fonts (for web-safe fonts)
️ Design Exercise:
Rebuild your homepage with a new color palette and font.
Add consistent padding and spacing.
12. Publish Your First Web App (Go Live!)
Why Publish?
Shows your work to others
You get feedback
It feels great!
Hosting Options:
GitHub Pages (free, perfect for static websites)
Netlify (drag-and-drop deployment)
Vercel (great for more advanced apps)
Steps to Publish with GitHub Pages:
Create a free GitHub account.
Upload your files in a repository.
Enable GitHub Pages from the repository settings.
Share your link (usually https://yourname.github.io/project-name)
️ Do It Now:
Upload one of your practice projects.
Test it in a browser.
Share it with a friend.
13. Think Like a Developer
It’s not just about knowing code—it’s about solving problems.
What Developers Do:
Break big tasks into smaller ones.
Search online (yes, all developers Google!)
Test and tweak until it works.
Mindset Tips:
Be patient. Errors are normal.
Start small. Focus on one feature at a time.
Learn by building.
️ Practice:
Pick one small feature (e.g., an image slider).
Build just that one thing.
Test, improve, and repeat.
14. What’s Next After HTML and CSS?
Once you’re comfortable, it’s time to explore new skills.
Popular Next Steps:
JavaScript: Makes your apps truly interactive (e.g., alerts, calculators, game logic).
Frameworks: Bootstrap (CSS), Tailwind (CSS), React (JavaScript)
APIs: Pull in live data (weather, news, maps)
Databases: Store user data and app content
But remember: You don’t need all this at once. Take one step at a time.
15. Final Project Idea (Beginner Portfolio Site)
️ What You’ll Build:
A homepage introducing yourself
Links to your sample projects
A contact form
Responsive layout
Nice fonts and colors
This is a great way to practice everything you’ve learned—and show it off.