FNB App Academy Notes 09 May 2025
“Way Forward: Beginner to Confident Web Developer” guide, building forward from what you’ve already learned. This will cover the next level of tools, workflows, and mindset needed to grow from confident beginner to self-sufficient developer.
16. Version Control with Git and GitHub
Why Learn Git?
As your projects grow, you’ll want to track your progress, go back to previous versions, or collaborate with others. Git helps you do all this.
Core Git Concepts:
Repository (repo): A folder that Git tracks.
Commit: A saved version of your code.
Push/Pull: Send or receive code updates from GitHub.
Branch: A separate line of development (useful for trying out features).
️ Git + GitHub Workflow:
Initialize Git in your project folder: git init
Create a GitHub repository.
Connect it: git remote add origin https://github.com/yourname/repo.git
Track changes: git add .
Save a version: git commit -m “Initial commit”
Upload to GitHub: git push -u origin main
Practice:
Add Git to your portfolio site.
Make commits after each small change.
Create a new branch to experiment with a new feature.
17. Learn the Basics of JavaScript
Why JavaScript?
JavaScript makes your websites interactive. Clicking buttons, showing/hiding content, validating forms, and more are all done with JS.
What You’ll Learn First:
Variables (let, const)
Functions (function myFunc() {})
Events (onclick, oninput)
Conditionals and loops
DOM Manipulation (document.querySelector, .innerText, .classList)
️ Small Projects to Practice:
A calculator
A to-do list
A form that shows error messages if inputs are blank
Remember:
You don’t need to master it all at once. Just start experimenting.
18. Intro to Debugging and Console Tools
Why Debugging Matters
Things will break. Learning to fix them quickly is a skill that will save you time and frustration.
Your Tools:
Browser Console: Open with F12 or right-click > Inspect > Console
console.log(): Use it to check what’s happening in your code
Sources Tab: Step through JS code and find bugs
️ Debugging Practice:
Break your JavaScript on purpose and fix it.
Use console.log() to print values and check logic.
19. Improve Your CSS Layout Mastery
Why Layout Mastery is Powerful
Clean layout separates amateur work from professional-looking web apps.
Deep Dive into Flexbox and Grid:
Flexbox: Great for 1D layouts (rows or columns)
Learn properties like justify-content, align-items, flex-wrap
CSS Grid: Ideal for 2D layouts (rows AND columns)
Learn grid-template-columns, grid-gap, and grid-area
️ Layout Challenges:
Build a responsive navigation bar using Flexbox.
Design a portfolio grid using CSS Grid.
Recreate a simple webpage layout (e.g., a blog or landing page).
20. Accessibility Matters (A11y)
Why Accessibility?
Websites should work for everyone, including people using screen readers or navigating with keyboards.
Accessibility Basics:
Use semantic HTML.
Add alt text for images.
Ensure color contrast meets WCAG guidelines.
Use proper heading levels (<h1>, <h2>, etc.).
Use labels for form elements.
️ Try This:
Run your site through WAVE.
Navigate your site using only a keyboard (Tab key).
Use voice narration or screen reader tools to test.
21. Use CSS Preprocessors (Like SASS)
What is SASS?
SASS (Syntactically Awesome Stylesheets) adds features to regular CSS like variables, nesting, and functions.
Why Use It?
Organize large stylesheets better
Reuse values (like colors or font sizes)
Modularize code into partial files
️ Setup:
You can use tools like CodePen or a VS Code extension to compile SASS into CSS.
Practice:
Replace repeated CSS values with variables.
Use nesting to simplify your stylesheet.
Split CSS into partials (_header.scss, _footer.scss, etc.)
22. Understanding Deployment and CI/CD Basics
Why CI/CD?
It stands for Continuous Integration and Continuous Deployment. It helps developers automatically test and publish code changes.
Concepts to Know:
Deployment: Publishing code to the web.
Continuous Integration: Automatically testing code.
Continuous Deployment: Automatically updating live sites.
️ Tools to Explore:
GitHub Actions: Automate tests and deployments
Netlify & Vercel: Connect with GitHub to auto-deploy
Try This:
Set up GitHub Actions to deploy your portfolio site every time you push updates.
23. Explore Developer Communities
Why Community?
You’ll learn faster by connecting with others, asking questions, and sharing your work.
Places to Join:
GitHub: Follow developers, explore open-source projects
Dev.to: Blog platform for developers
Stack Overflow: Ask and answer questions
Reddit (r/webdev): Discussions and tips
Twitter/X & LinkedIn: Share your progress and network
️ Community Challenge:
Publish one blog post or tweet about what you learned this week.
Join an open-source project or comment on someone’s code.
24. Build Real Projects
Why It’s Crucial
Nothing teaches faster than building. You’ll run into problems, learn how to solve them, and gain experience.
Project Ideas:
Recipe website with categories
Local business homepage
Weather app using a free API
Personal blog layout (with dummy content)
️ Tips for Building Projects:
Start with a sketch or mockup
Break tasks into small steps
Use Git to track progress
Deploy each project online
25. Your Developer Toolbox (VS Code & Extensions)
Get Comfortable with Your Tools
Using a great code editor can improve your workflow.
Recommended Tools:
VS Code: The most popular editor
Extensions:
Live Server (auto-refresh your site)
Prettier (formatting)
GitLens (Git insights)
Emmet (HTML shortcuts)
️ VS Code Tricks:
Use multiple cursors (Ctrl + click)
Use Emmet: Type ul>li*5 + Tab to create 5 list items
Use workspace settings for consistent formatting
26. Learn API Basics
Why APIs Matter
APIs let your app communicate with other apps or services to pull in real-time data.
Common Uses of APIs:
Show weather, news, quotes, etc.
Get product or movie data
Connect to social media
️ APIs to Try (with free keys):
OpenWeather
The Cat API
JSONPlaceholder (for fake data)
Build This:
A weather dashboard using JavaScript and OpenWeather API
A blog using JSONPlaceholder content
27. Learn Basic SEO
What is SEO?
Search Engine Optimization helps people find your site via Google.
Basic Tips:
Use semantic HTML
Write meaningful page titles and meta descriptions
Add alt tags to images
Use proper heading structure
Submit your site to Google Search Console
️ Try This:
Add <title> and <meta> tags to all your pages
Test your site with Lighthouse in Chrome DevTools
Use clean URLs (/contact, not /contact.html)
28. Building a Learning Habit
Why Habits Matter?
Web development evolves constantly. Lifelong learners stay ahead.
Tips for Daily Practice:
Code at least 30 minutes a day
Follow newsletters (e.g., Frontend Focus, CSS Tricks)
Watch tutorials (YouTube, freeCodeCamp)
Read docs from Mozilla (MDN)
️ Set a Weekly Goal:
One small project
One new concept (like media queries or async JS)
One blog or note reflecting your learning
29. Next Steps in Web Dev Path
Where Can You Go Next?
Now that you’ve built a strong foundation, explore deeper topics:
Next Milestones:
JavaScript DOM Projects
Responsive Web Design Certification
Learn React (a popular JS library)
Practice with APIs
Join Hackathons
️ Plan a 3-Month Roadmap:
Month 1: Practice JS + build 3 small apps
Month 2: Learn APIs + integrate them
Month 3: Start React basics + build one app
30. Final Word: You’re on the Right Track
Look How Far You’ve Come:
You’ve gone from beginner to confidently building and publishing web projects.
You’ve Learned:
HTML/CSS deeply
How to make sites responsive
How to add interactivity
Organize and deploy projects
Use tools like Git, APIs, and VS Code
You now understand how to:
Think like a developer
Keep learning
Build real apps
This is the foundation of a career, a freelancing journey, or just a lifelong skill.