Frontend Web Development for Kids 12-17 Years (Basic to Advanced)
- Duration: 6 months
- Level Beginner
- Age: 12 - 17yrs +
Course Features
- Registration Starts Oct. 20, 2024
- Language - English
- Personal Student/Learner's Portal
- Pre-recorded Video released weekly. Live sessions hold twice a week
- Lesson can be accessed on all devices but practiced on desktop and tablet
- Expert Tutor Support for Math Problems and School/Homework
- Leadership and other essential Soft Skills Development Sessions
- Direct Tutor and Community Support
- 6 months access to course materials. 12 months access to community support
- Certificate of Completion
- 8 Modules, 24 Lessons, 56 Topics, 72 Mini Tasks, 24+ Quizzes, 1 In-Course Project and 10 Post-Course projects
About This Course
Welcome to the “Young Coders: Frontend Web Development” course! This engaging and interactive program is designed specifically for kids to explore the exciting world of web development. Through a blend of live sessions, pre-recorded videos, and hands-on projects, students will learn how to build stunning and functional websites from scratch. The course fosters creativity, logical thinking, and problem-solving skills, preparing young learners for the digital age while keeping the learning process fun and inspiring.
Target Audience
- Age Group: 12 to 17 years Old (or older)
- Prerequisites: No prior coding experience required. A basic understanding of computer operations and internet usage is beneficial.
Support and Community
- Live Sessions: Interactive classes twice a week where students can ask questions and engage directly with instructors.
- Pre-recorded Videos: Comprehensive weekly lessons that students can watch at their own pace.
- Community Forum: An online platform where students can interact, share ideas, collaborate on projects, and help each other solve problems.
- Tutor Support:
- Office Hours: Dedicated time slots where tutors are available for one-on-one assistance.
- Email Support: Students can reach out to instructors for help and clarification.
- Feedback: Regular constructive feedback on assignments and projects to aid improvement.
- Parental Updates: Periodic reports on student progress to keep parents informed and engaged.
Evaluation Method
- Assignments: Weekly tasks that reinforce the lessons learned and encourage practice.
- Quizzes: Short quizzes at the end of each module to assess understanding of key concepts.
- Projects: One major in-course projects, culminating in a final comprehensive project that showcases the student’s skills. 10 after-course projects available for further mastery and demonstration of acquired skills.
Course Objectives
This course is designed to fulfill the following objectives:
- Introduce Students to the Fundamentals of Frontend Web Development: Provide an overview of key concepts and tools used in creating websites.
- Develop Proficiency in HTML, CSS, and JavaScript: Equip students with the skills to build and style websites using essential web development languages.
- Encourage Creative Thinking Through Designing and Building Interactive Web Pages: Inspire students to express their creativity by designing and developing engaging and interactive websites.
- Teach Best Practices in Web Design, Usability, and Accessibility: Instil the importance of creating websites that are user-friendly, visually appealing, and accessible to all users.
- Build a Foundational Understanding That Can Be Expanded Upon in Future Advanced Courses: Lay the groundwork for further learning in web development and related fields.
- Foster Collaborative Skills Through Group Projects and Community Engagement: Promote teamwork and communication by encouraging collaboration on projects and active participation in the learning community.
- Develop Analytical Skills: Through our Math Clinic sessions, students will enhance their logical thinking and problem-solving abilities, which are crucial in programming and web development.
- Cultivate Leadership Qualities: Our Leadership Training sessions aim to build confidence, teamwork, and communication skills, preparing students to lead group projects and collaborate effectively in tech environments.
- Integrate Cross-Disciplinary Learning: Encourage students to apply mathematical concepts in coding challenges and leverage leadership skills in project management and presentations.
- Holistic Development: Foster a well-rounded educational experience by combining technical skills with essential life skills, preparing students for future academic and personal success.
Curriculum
Lesson 1:
- Introduction to the Internet and the World Wide Web
- Understanding how websites work
- Overview of frontend vs. backend development
- Setting up the development environment
Lesson 2:
- Introduction to HTML
- Basic HTML tags and structure
- Creating your first simple webpage
Lesson 3:
- Structuring content with headings, paragraphs, and lists
- Adding images and links
Lesson 4:
- Tables and forms in HTML
- Semantic HTML and its importance
Lesson 5:
- Multimedia elements: audio and video
- Project: Creating a personal profile page using HTML
Lesson 6:
- Introduction to CSS
- CSS syntax and selectors
- Applying styles to HTML elements
Lesson 7:
- Colours, backgrounds, and fonts
- Box model concept
Lesson 8:
- Layouts with CSS: display, position, float
- Flexbox basics
Lesson 9:
- Responsive design principles
- Media queries
- Project: Styling the personal profile page with CSS
Lesson 10:
- CSS Grid layout
- Advanced selectors and combinators
Lesson 11:
- CSS animations and transitions
- Using icon libraries and fonts
Lesson 12:
- Introduction to UI/UX design principles
- Designing for accessibility
- Project: Creating a responsive and interactive webpage
Lesson 13:
- Understanding programming concepts
- Introduction to JavaScript syntax
Lesson 14:
- Functions and control structures (if statements, loops)
- Events and event handling
Lesson 15:
- Working with the DOM (Document Object Model)
- Manipulating HTML and CSS with JavaScript
Lesson 16:
- Form validation using JavaScript
- Project: Adding interactivity to previous projects with JavaScript
Lesson 17:
- Arrays and objects
- Introduction to JSON
Lesson 18:
- Fetching data from APIs
- Asynchronous programming basics
Lesson 19:
- Introduction to JavaScript libraries (e.g., jQuery)
- Project: Building a simple web application that consumes an API
Lesson 20:
- Planning and designing a complete website
- Wireframing and mockups
Lesson 21:
- Developing the frontend of the planned website
- Implementing advanced features and interactivity
Lesson 22:
- Testing and debugging the website
- Ensuring cross-browser compatibility and responsiveness
Lesson 23:
- Deploying the website to the internet
- Introduction to hosting services and version control (basic Git concepts)
Lesson 24:
- Final project presentations
- Peer reviews and feedback sessions
- Discussing next steps and further learning resources
- Awarding certificates of completion
Personal Portfolio Website
- Description: Students create their personal portfolio website to showcase their projects and skills.
- Key Features:
- Home page with an introduction and a short bio.
- Project showcase section with descriptions, images, and links to live projects.
- Contact form that uses JavaScript for validation.
- Responsive design for viewing on different devices.
- Skills Applied: HTML, CSS, JavaScript, responsive design, form validation.
Interactive Quiz Game
- Description: Build an interactive quiz game where users answer multiple-choice questions on a topic of their choice.
- Key Features:
- Dynamic question loading and randomization.
- Score tracking and feedback after each question.
- Timer for added challenge.
- Use of JavaScript to handle user interactions and logic.
- Skills Applied: HTML, CSS, JavaScript, event handling, DOM manipulation.
Blog Website
- Description: Create a simple blog where students can post articles on topics they are passionate about.
- Key Features:
- Home page with a list of blog posts.
- Individual pages for each blog post with comments section.
- Admin section (basic) to add new blog posts (simulated with local storage or static content).
- Responsive design and use of CSS Grid or Flexbox for layout.
- Skills Applied: HTML, CSS, JavaScript, local storage, responsive design.
Online Storefront
- Description: Develop a basic online store interface where users can browse products, add items to a cart, and simulate a checkout process.
- Key Features:
- Product listing page with images, descriptions, and prices.
- Shopping cart functionality with item addition/removal.
- Simple checkout form with JavaScript validation.
- Responsive design for mobile and desktop users.
- Skills Applied: HTML, CSS, JavaScript, event handling, DOM manipulation, responsive design.
Weather App
- Description: Create a weather application that allows users to input a city and receive real-time weather updates.
- Key Features:
- Input field for users to enter the city name.
- Integration with a weather API to fetch current weather data.
- Display of temperature, weather conditions, and an icon representing the weather.
- Option to display the weather for the user’s current location.
- Skills Applied: HTML, CSS, JavaScript, APIs, asynchronous programming.
Digital Art Gallery
- Description: Build an online gallery to display digital artwork created by the student or sourced from free online resources.
- Key Features:
- Grid layout to display artwork thumbnails.
- Lightbox effect to view artwork in full size.
- Filter options (e.g., by category or artist).
- Responsive design and use of advanced CSS for layout and effects.
- Skills Applied: HTML, CSS, JavaScript, responsive design, advanced CSS techniques.
Simple Web-Based Calculator
- Description: Design and develop a simple, functional calculator that can handle basic arithmetic operations.
- Key Features:
- User-friendly interface with buttons for numbers and operations.
- Real-time calculation display.
- Clear function to reset calculations.
- Use of JavaScript for handling arithmetic logic.
- Skills Applied: HTML, CSS, JavaScript, event handling, DOM manipulation.
Recipe Website
- Description: Create a website where users can browse, search, and view recipes.
- Key Features:
- Home page with featured recipes.
- Individual recipe pages with ingredients, instructions, and images.
- Search functionality to filter recipes by name or ingredient.
- Responsive design for a seamless experience across devices.
- Skills Applied: HTML, CSS, JavaScript, responsive design, form handling.
Customizable Greeting Card
- Description: Develop a web application where users can create and customize their digital greeting cards.
- Key Features:
- Selection of card templates and designs.
- Input fields for personalized messages.
- Option to change colors, fonts, and backgrounds.
- Downloadable or shareable final card.
- Skills Applied: HTML, CSS, JavaScript, DOM manipulation, responsive design.
Simple To-Do List Application
- Description: Create a web-based to-do list app where users can add, edit, and delete tasks.
- Key Features:
- Task creation with an input field.
- Option to mark tasks as completed.
- Dynamic updating of task list using JavaScript.
- Save tasks to local storage so they persist after page reloads.
- Skills Applied: HTML, CSS, JavaScript, local storage, DOM manipulation.
Please note the following:
- As deemed necessary, the curriculum outlined above may undergo further modifications, including additions or deletions. Regardless of the situation, these changes are intended to better fulfil the objectives of the program.
- The extra-curricular activities/sessions (e.g. leadership, soft skills, mathematics clinic sessions, etc.) are embedded across the learning path. Every session will be announced ahead.
- These projects not only help students apply what they’ve learned but also allow them to express their creativity and build a portfolio of work that they can be proud of. We shall also provide the necessary project guidelines to each student and as well monitor their progress and help them with their challenges in appropriate and essential ways.
Certification
Participants who successfully complete the Frontend Web Development course will be awarded a certificate of achievement. This certificate formally recognizes the skills and knowledge acquired. To earn this certificate, participants must complete all course modules and tasks, achieve the passing mark on quizzes, and submit an end-of-course project that passes assessment and approval.
Requirements
Computer/Laptop:
- Operating System: Windows 10 or higher, macOS 10.13 (High Sierra) or higher, or any recent Linux distribution.
- Processor: Intel Core i3 or equivalent.
- Memory (RAM): 4 GB minimum (8 GB recommended).
- Storage: At least 10 GB of free disk space.
- Display: 13-inch screen with a resolution of 1366 x 768 pixels or higher.
- Internet Connectivity: Reliable broadband connection for downloading resources and attending live sessions.
Tablet (Optional):
- Operating System: iOS 12 or higher, Android 8.0 or higher.
- Screen Size: 10 inches or higher for better readability.
- Storage: 32 GB minimum, with free space for software installation
- Code Editor: VS Code (free download) or any other preferred text editor.
- Web Browsers: Latest versions of Google Chrome, Mozilla Firefox, or Microsoft Edge.
- External Mouse: Recommended for easier navigation and coding, especially for younger students.
- Webcam and Headset with Microphone: Useful for participating in live sessions and discussions.
Learning Management System (LMS):
- The course will be hosted on the Emostel Academy’s LMS platform. Students will need a registered account to access course content, assignments, and live sessions.
Video Conferencing Software:
- Zoom/Google Meet: For live classes, discussions, and Q&A sessions. Students should have the software installed and be familiar with joining meetings.
Collaboration Tool:
- Slack, Discord, or Google Workspace: Enable group work, brainstorming, and project collaboration.
Design Tools:
- Canva or Figma for creating design mockups (free versions suffice).
Version Control:
- GitHub account for project hosting and version control (tutorials will be provided).
Miscellaneous:
- Notebook and pen for taking notes during sessions.
- An eagerness to learn and explore!
FAQs
- Click on "Join Course" or use the "Enroll in this course" button below.
- Fill out the application form and submit it. An email will be sent to you to confirm the application and provide you with your login details, payment options, and other essential information.
- Make payment for the course via the available channels provided.
- Once your payment is received, you will be granted an access to the chosen course and an email will be sent to you containing the course access details and any other relevant information.
If you cannot access the course within 24hrs, please contact us via sales@emostelacademy.org or (via SMS, WhatsApp, or Phone Call) at +2349077471007, +2348141897754
You have the option to make a single payment of ₦100,000 for the course or opt for a monthly payment of ₦20,000 for 6 months.
With the monthly plan, access is automatically revoked every 30 days from the date of the last payment unless the subscription is renewed.
For requests/orders, transaction issues, or further assistance regarding your payment, please contact us via sales@emostelacademy.org or (via SMS, WhatsApp, or Phone Call) at +2349077471007, +2348141897754
Each course you enroll in will appear in your personal learner's portal and can be accessed via the "My Courses" tab on your dashboard.
You will receive your login details in the course access email.
We have pre-recorded sessions (released weekly) and are supported by live sessions (which are held twice a week).
Every live session is recorded and then posted to the learners' portal. This would be useful for anyone who missed the class to access them later. The recording also aids in further learning and revision.
Apart from the recorded and live sessions, we add our learners to communities based on their courses, allowing them to interact with course instructors, community moderators, and fellow learners, who are always available to help with any issues relating to the course. Learners may also directly contact their instructors via email and other communication channels provided.
For a more personalized experience, you may subscribe to our Private Training Services. This is however optional, it comes at an extra cost and is based on request.
This course is designed to be covered within three months. However, we cater to children with diverse learning abilities and preferences, tailored to their unique personalities. Therefore, we provide an extended duration that allows for comprehensive learning and practical application of the material.
Yet, we commit to giving each student's needs the highest priority to ensure they achieve excellence in the most efficient time frame possible.
Access to the course will expire six months after release, but technical support for participants will be available for 12 months.
This 12-month technical support applies solely to the chosen iCode course. Tutoring for school assignments and extracurricular activities is available only during the six-month access period.
We encourage you to sign up for more courses after completion to expand your knowledge and retain the advantages and support associated with each iCode course. Alternatively, you can opt for monthly payments or a one-time six-month access fee to continue access to perks and benefiting from our tutoring support for your school and homework.
For further inquiries, please contact us via our helplines or at study@emoselacademy.org
Please visit https://emostelacademy.org/faq for more frequently asked questions regarding our mode of class delivery and other relevant information, or contact our support team via email: support@emostelacademy.org
If you wish to learn more about us (who we are, where we are, what we do, etc.), please Click Here