FNB App Academy Week 3 – Build Your First Real App

Welcome to Week 3 of the FNB App Academy! After getting a feel for HTML and CSS last week, you’re now stepping into a much more exciting phase: building your first real app — the Pine City Zoo tour guide.

At this stage, it’s easy to feel overwhelmed. You’re staring at over 20 lessons, multiple files, new concepts, and some unfamiliar layout logic. But this week is designed to stretch your thinking, unlock your developer brain, and bring your skills together in one working app.

Let’s walk through it — thoughtfully, supportively, and with the guidance we wish we had when we first started coding.

🧠 Week at a Glance: What You’re Actually Doing

You’re no longer editing small web pages. You’re building an app — a full experience.

Here’s what this week includes:

• 🏗 Setting up a proper project folder (like a real dev)
• 🎨 Creating pages with HTML + CSS from scratch
• 🗺 Linking multiple pages to build an actual app experience
• 🦁 Populating real content (animal info, weather data, feedback forms)
• 🎯 Designing for actual users through UI/UX logic

📚 Dive Deeper: Week 3 Lesson Recap

This week’s first lesson focused on the design side of development. Whether you’re creating your first wireframes or refining your user interface, here’s what you need to know:

👉 Lesson 5 – UX & UI Design Principles
Understand the difference between UX and UI, how to use layout grids, typography, spacing, and color to build a polished app experience — even before you write code.

👉 Lesson 6 is still on the way. It should be available on Thursday.

🧭 Monday Motivation: Start with the Right Mindset

Don’t rush. Don’t aim to “complete” the week. Instead, aim to understand what each step is teaching you. The lessons look like a checklist, but your job is to absorb, try, repeat, and test.

The biggest mistake? Treating this like a recipe to follow once.

Instead:

• Watch each video once to understand the “what”
• Then watch again, this time coding along slowly
• Expect errors — every developer gets them (that’s the job!)
• Learn how to debug (refresh, inspect element, double-check file names)

🧰 Folder Setup – Small Step, Big Habit

The week starts with setting up a proper file and folder structure. Seems small, but this is where you start acting like a developer.

🧩 Dev Tip: Your project should mimic a real one. Have folders for images, all files lowercase, consistent naming.

📂 Your folder tree should look like this:

markdownCopyEditDocuments/
  Websites/
    Pine City Zoo/
      index.html
      animals.html
      places.html
      style.css
      images/

Miss this step, and you’ll spend the rest of the week battling broken image links and missing files.

🧱 Tuesday–Thursday: Building the Zoo App (HTML First, Then Style)

You’ll start building out core pages:

• 🏠 Home
• 🐘 Animals
• 📍 Places
• 🌤 Weather
• 💬 Feedback

Each one starts with HTML, then moves to CSS styling.

🔄 Repetition is the Key

Yes, you’ll be doing similar things again and again:

• Create a page
• Link it in the nav
• Style it
• Add content
• Test it in the browser

But every time you repeat a step, you’re locking in the skill.

🧠 By the end of this, you’ll be able to build your own multi-page app from scratch. That’s massive progress for a beginner.

😩 Common Sticking Points (And How to Push Through)

🖼️ “My image isn’t showing!”

✅ Check:

• Did you save the image in the images/ folder?
• Did you spell the file name exactly (case-sensitive)?
• Did you reference it like images/elephant.jpg (relative path)?

💬 “I styled something, but it’s not working”

✅ Check:

• Is your HTML linking to style.css correctly?
• Did you save your CSS file?
• Did you refresh your browser after changes?
• Are you using the correct selector?

🔗 “My links just reload the same page”

✅ That’s because they still use href="#". Once you create the correct file (e.g. animals.html), update the links like this:

htmlCopyEdit<a href="animals.html">ANIMALS</a>

Fixing this makes your app actually feel like an app. Don’t skip it!

🎨 Friday: Enter UX and UI Design

On Friday, you’ll get a new lens to look at your work — not just as a builder, but as a designer.

You’ll learn:

• What makes an interface feel “good” to users
• Why spacing, size, and positioning really matter
• The difference between a pretty app and a usable one

🧠 You’ve already seen bad UX in real life. Buttons that are too small. Menus that don’t scroll. Confusing layouts. Now you’ll understand why they’re bad — and how to avoid those mistakes yourself.

🧪 Real-World Skill Building

Here’s the biggest shift of Week 3:

You’re not just following lessons anymore. You’re applying them to build a user-ready experience.

🦁 Pine City Zoo isn’t just a fictional app — it’s your first real project. A working product. With real structure, design, navigation, and logic.

That’s huge.

📬 Need Help?

Don’t suffer in silence.

📩 Reach out to: AppAcademy@itvarsity.org

Even better — if you’re stuck, ask smart questions:

• “My image path is correct but it’s not showing. Here’s the HTML.”
• “I saved my CSS file but styles won’t apply — can I share my code?”

These are the questions that make you grow faster.

🔚 Week 3 Wrap-Up

✅ By the end of this week, you’ll have:

• Built your own multi-page web app
• Styled multiple pages with consistent design
• Gained an intro to real UX/UI principles
• Started thinking like a real developer

Take a moment to acknowledge how far you’ve come. You started with basic tags… and now you’ve got a functioning, structured, stylized app.

This is the work that changes careers.

🚀 Ready for Next Week?

The skills you’ve learned will power everything going forward. Next week, you’ll take things further with interactivity and polish — but for now, enjoy the magic of having built something real.