Frontend Specific

This section provides a quick but comprehensive overview of how we build frontends at Terra. You’ll learn our approach to HTML structure, SCSS organization, and JavaScript architecture — the three pillars of our frontend workflow.

Know more about your role

If you want to know more about your career growth at Terra as a Frontend Developer, check out our dedicated career progression guide. You’ll find:

• Typical growth stages from your first months through maturity
• Responsibilities and expectations at each level
• Communication impacts on growth speed and progression
• Ownership patterns that define each career stage

→ Read more at Frontend Developer – Career Growth

---

What You’ll Learn

By the end of this section, you’ll understand:

• HTML Structure - How we use the grid system, BEM naming, and semantic HTML to build solid foundations.
• SCSS & Styles - How to structure stylesheets, create components, leverage utilities, and work with variables.
• JavaScript - How handlers manage component lifecycle, async imports optimize performance, and SWUP powers page transitions.

---

Why This Matters

At Terra, we follow strict conventions to ensure:

• Consistency - All projects use the same patterns, making it easy to jump between codebases.
• Maintainability - Clean, well-organized code is easier to update and debug.
• Performance - Smart loading strategies and optimized assets keep sites fast.
• Scalability - Our architecture grows with the project without becoming messy.

These aren’t arbitrary rules — they’re battle-tested practices that make our workflow efficient and our code reliable.

---

How to Use This Section

Read through each subsection in order:

1. HTML Structure - Start here to understand markup basics
2. SCSS & Styles - Learn how to style components properly
3. JavaScript - Discover how to add interactivity and animations

Each section includes practical code examples you can reference when building features.

---

Quick Reference

Before diving into the details, here’s the essence of our frontend approach:

HTML → Use the 12-column grid, follow BEM naming, choose semantic tags
SCSS → Structure with @extend, leverage utilities, use foundation variables
JS → Manage lifecycle with handlers, load libraries asynchronously, animate with GSAP

---

Next Steps

Ready to start? Let’s begin with the foundation of every webpage: HTML structure.

→ Continue to HTML Structure