Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
W3 Server-Side Development & Authentication - Lesson 2
By completing this activity, you will:
IMPORTANT: This template provides a 65% pre-built foundation!
Already implemented for you:
<h1> with "Welcome to Svelte!" textactivity-02-svelte-components/
├── README.md # This file
├── App.svelte # Main component (65% complete)
├── About.svelte # About component (100% complete)
└── Footer.svelte # Footer component (50% complete - needs styling)
Add the missing CSS styles to make the footer match the header's orange theme.
File: Footer.svelte
Success Criteria:
background-color: OrangeRed;)color: white;)padding: 8px 24px;)Hint: Look at the Header styles in App.svelte for reference. You need to add a <style> tag with a footer selector.
Code Location: Footer.svelte - After the </footer> closing tag
Connect the Footer component to the main App.svelte.
File: App.svelte
Success Criteria:
<Footer /> component added after <About /> in markupHint: Follow the same pattern as the About component import. Add the import line in the <script> section, then use <Footer /> in the HTML.
Code Location: App.svelte - Lines 3 and 9 (see TODO comments)
By examining the working code and completing the TODOs, you'll understand:
let to declare variables in the script section{variable} syntax to insert JavaScript values in HTML{src} instead of src={src} when names matchimport ComponentName from "./ComponentName.svelte"<ComponentName /><style> tags only affects that component<h1><script>
import About from "./About.svelte";
// TODO 2: Import Footer component here
let src = '/tutorial/image.gif';
</script>
<h1>Welcome to Svelte!</h1>
<img {src} alt="dance">
<About />
<!-- TODO 2: Add Footer component here -->
<style>
h1 {
background-color: OrangeRed;
color: white;
padding: 16px 24px;
}
</style>
<p>Let's dance!</p>
<script>
let name = "Rick";
</script>
<footer>
<p>Copyright © 2022 {name}</p>
</footer>
<!-- TODO 1: Add <style> tag here with footer styling -->
<!--
<style>
footer {
// TODO: Add background-color: OrangeRed;
// TODO: Add color: white;
// TODO: Add padding: 8px 24px;
}
</style>
-->
Your activity is complete when:
Test these scenarios in Svelte REPL:
Variable Binding:
let src to a different image URLComponent Import:
Scoped Styling:
<h1> in Footer - it should NOT have orange backgroundComponent Names:
About.svelte and paste the About.svelte codeFooter.svelte and paste the Footer.svelte codeIssue: Component not showing? Solution: Make sure component name starts with a capital letter and is properly imported
Issue: Styles not applying?
Solution: Check that <style> tag is inside the .svelte file and selector matches the HTML element
Issue: Image not loading in REPL?
Solution: The /tutorial/image.gif path is specific to Svelte REPL. If running locally, use a different image URL
Issue: Curly braces showing as text?
Solution: Use single curly braces {variable} not double {{variable}}
Ready for more? Try these bonus features:
new Date().getFullYear() for dynamic year<h1> into a separate Header.svelte../../Activities/Activity 02- Svelte Components.mdxWhen you've completed all TODOs:
Remember: Components are the building blocks of modern web applications. Master the basics here - you'll use these patterns everywhere in web development!
💡 Pro Tip: Try changing the colors, text, and variables to make this page your own. The best way to learn is by experimenting!