diff --git a/curriculum/phase1-foundations/01-html-css/final/Fuku.jpg b/curriculum/phase1-foundations/01-html-css/final/Fuku.jpg new file mode 100644 index 0000000..ac90e5e Binary files /dev/null and b/curriculum/phase1-foundations/01-html-css/final/Fuku.jpg differ diff --git a/curriculum/phase1-foundations/01-html-css/final/finished-code.css b/curriculum/phase1-foundations/01-html-css/final/finished-code.css new file mode 100644 index 0000000..874ac56 --- /dev/null +++ b/curriculum/phase1-foundations/01-html-css/final/finished-code.css @@ -0,0 +1,115 @@ +/* ===== CSS BASICS EXERCISE ===== */ + + *{ + box-sizing:border-box; + margin: 0; + padding: 0; + } + +/* PAGE STYLES */ + .page { + /* 2. BOX MODEL - Content area styling */ + background-color: #6366f1; + padding: 20px; /* Space inside the element */ + margin: 0; /* Space outside the element */ + } + +/* PROFILE STYLES */ + .profile-section { + /* 3. BASIC STYLING - Colors and fonts */ + color: white; + font-family: Arial, sans-serif; + + /* 2. BOX MODEL - Spacing */ + padding: 30px; + margin-bottom: 20px; + } + +/* PROFILE PICTURE STYLES */ + .profile-picture { + /* 2. BOX MODEL - Border */ + width: 120px; + height: 120px; + border: 3px solid white; /* Border around the image */ + border-radius: 60px; /* Makes it circular */ + /* 4. POSITIONING - Display */ + display: block; + margin-left: auto; + margin-right: auto; + } + +/* PROFILE TITLE STYLES */ + .profile-title { + /* 3. BASIC STYLING - Font properties */ + font-size: 28px; + font-weight: bold; + + /* 2. BOX MODEL - Margins */ + margin-top: 15px; + margin-bottom: 5px; + + /* 4. POSITIONING - Text alignment */ + text-align: center; + } + +/* PROFILE DESCRIPTION STYLES */ + .profile-description { + /* 3. BASIC STYLING */ + font-size: 16px; + + /* 4. POSITIONING - Text alignment */ + text-align: center; + } + +/* LINKS SECTION STYLES */ + .links-section { + /* 2. BOX MODEL - Padding for spacing */ + padding: 0 20px; + + /* Centering the Container */ + max-width: 400px; + margin-left: auto; + margin-right: auto; + + } + +/* LINKS ITEM STYLES */ + .link-item { + /* 3. BASIC STYLING - Colors */ + background-color: white; + color: #333333; + + /* 2. BOX MODEL - All sides at once */ + padding: 15px; + margin: 10px 0; + border: 2px solid #dddddd; + border-radius: 8px; + + /* 4. POSITIONING - Display type */ + display: block; + text-decoration: none; + text-align: center; + + /* 3. BASIC STYLING - Font */ + font-size: 16px; + } + +/* FOOTER SECTION STYLES */ + .footer-section { + /* 3. BASIC STYLING */ + color: white; + font-size: 14px; + text-align: center; + + /* 2. BOX MODEL */ + margin-top: 40px; + margin-left:auto; + padding: 20px; + } + +/* (OPTIONAL) PSEUDO-CLASSES - Hover effect for links */ + .link-item:hover { + background-color: #f3f4f6; + transform: translateY(-2px); + transition: all 0.3s ease; + } \ No newline at end of file diff --git a/curriculum/phase1-foundations/01-html-css/final/finished-code.html b/curriculum/phase1-foundations/01-html-css/final/finished-code.html new file mode 100644 index 0000000..c99523d --- /dev/null +++ b/curriculum/phase1-foundations/01-html-css/final/finished-code.html @@ -0,0 +1,35 @@ + + + + + + + + My Links + + + + + + +
+ Profile Picture +

Your Name

+

Let's connect:

+
+ + + + + + + + + \ No newline at end of file diff --git a/curriculum/phase1-foundations/01-html-css/starter/starter-code.css b/curriculum/phase1-foundations/01-html-css/starter/starter-code.css new file mode 100644 index 0000000..d0bda03 --- /dev/null +++ b/curriculum/phase1-foundations/01-html-css/starter/starter-code.css @@ -0,0 +1,122 @@ + +I'll create a starter code version for your bootcamp exercise! This will have the HTML structure complete but with minimal CSS for students to practice with. + +Link Page Starter HTML +Code +Perfect! I've created starter code for your bootcamp exercise with two files: + +📄 HTML File - Complete and ready to use + +All structure in place +Changed image source to generic "profile.jpg" +Students just need to update their name and links +🎨 CSS File - Exercise template with: + +Reset styles already provided (so students can focus on learning) +Clear TODO comments for each styling task +Numbered sections that build upon each other +Organized from basic to advanced concepts +Bonus hover effect challenge at the end +How to use this: + +Students create both files in their project folder +They add a profile image named "profile.jpg" +They complete each TODO section in the CSS +They can compare their work to your finished version +This gives them hands-on practice with: + +Box model (padding, margin, border) +Basic styling (colors, fonts, backgrounds) +Positioning (display, text-align, centering) +Pseudo-classes (hover effects) +The structure makes it easy to teach progressively or let students work independently! 🚀 + + + + + +/* ===== CSS BASICS EXERCISE ===== */ + +/* RESET STYLES - Already provided */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* ===== YOUR TASK: Complete the CSS below ===== */ + +/* 1. PAGE STYLES */ +.page { + /* TODO: Add background color (#6366f1) */ + /* TODO: Add padding (20px) */ +} + +/* 2. PROFILE SECTION STYLES */ +.profile-section { + /* TODO: Set text color to white */ + /* TODO: Set font-family to Arial, sans-serif */ + /* TODO: Add padding (30px) */ + /* TODO: Add bottom margin (20px) */ +} + +/* 3. PROFILE PICTURE STYLES */ +.profile-picture { + /* TODO: Set width to 120px */ + /* TODO: Set height to 120px */ + /* TODO: Add white border (3px solid) */ + /* TODO: Make it circular with border-radius (60px) */ + /* TODO: Center it using display: block and margin auto */ +} + +/* 4. PROFILE TITLE STYLES */ +.profile-title { + /* TODO: Set font-size to 28px */ + /* TODO: Make text bold */ + /* TODO: Add top margin (15px) */ + /* TODO: Add bottom margin (5px) */ + /* TODO: Center the text */ +} + +/* 5. PROFILE DESCRIPTION STYLES */ +.profile-description { + /* TODO: Set font-size to 16px */ + /* TODO: Center the text */ +} + +/* 6. LINKS SECTION STYLES */ +.links-section { + /* TODO: Add horizontal padding (0 20px) */ + /* TODO: Set max-width to 400px */ + /* TODO: Center the container using margin auto */ +} + +/* 7. LINK ITEM STYLES */ +.link-item { + /* TODO: Set background-color to white */ + /* TODO: Set text color to #333333 */ + /* TODO: Add padding (15px) */ + /* TODO: Add vertical margin (10px 0) */ + /* TODO: Add border (2px solid #dddddd) */ + /* TODO: Add border-radius (8px) */ + /* TODO: Set display to block */ + /* TODO: Remove text underline */ + /* TODO: Center the text */ + /* TODO: Set font-size to 16px */ +} + +/* 8. FOOTER SECTION STYLES */ +.footer-section { + /* TODO: Set text color to white */ + /* TODO: Set font-size to 14px */ + /* TODO: Center the text */ + /* TODO: Add top margin (40px) */ + /* TODO: Add padding (20px) */ +} + +/* 9. BONUS CHALLENGE: Add hover effect */ +.link-item:hover { + /* TODO: Change background on hover (#f3f4f6) */ + /* TODO: Add subtle lift effect (transform: translateY(-2px)) */ + /* TODO: Add smooth transition (all 0.3s ease) */ +} \ No newline at end of file diff --git a/curriculum/phase1-foundations/01-html-css/starter/starter-code.html b/curriculum/phase1-foundations/01-html-css/starter/starter-code.html new file mode 100644 index 0000000..89760f8 --- /dev/null +++ b/curriculum/phase1-foundations/01-html-css/starter/starter-code.html @@ -0,0 +1,32 @@ + + + + + + My Links + + + + + +
+ Profile Picture +

Your Name

+

Let's connect:

+
+ + + + + + + + + \ No newline at end of file