Project Sprout Stream


                    <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="author" content="Wendi Wang; A01345480">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap|Baloo+2:wght@400;600;800&display=swap|Poppins" rel="stylesheet">
                            <link rel="icon" href="./assets/Favicon Black.png" type="image/x-icon">
                            <title>Features</title>
                        </head>
                        <body>
                            <header>
                                <div class="logo">
                                    <img src="./assets/Logo_transparent.png" alt="Sprout Stream Logo">
                                    <button class="log-in-btn">LOG IN</button>
                                </div>
                                <button class="download-btn"><a href="#download">Download Now <img src="./assets/download-solid.svg" class='dl-icon' alt="download icon"></a></button>
                                <div class="tagline">
                                    <h1>Sprout Stream</h1>
                                    <p id="myText">Engage, Empower, Grow.</p>
                                </div>
                                <div class="signup">
                                    <input type="text" name="Email" id="email" placeholder="Email">
                                    <button>SIGN UP</button>
                                </div>
                                <div class="navigation">
                                    <ul>
                                        <li><a href="#about">About Us</a></li>
                                        <li><a href="#swiper">Popular Shows</a></li>
                                        <li><a href="#unique-points">Why SproutStream</a></li>
                                        <li><a href="#faq">FAQ</a></li>
                                        <li><a href="#download">Download</a></li>
                                    </ul>
                                </div>
                            </header>
                            <main>
                                <div class="about" id="about">
                                    <div class="column1">
                                        <h3>1,900+ movies</h3>
                                        <p>Including award-winning blockbusters and exclusives</p>
                                    </div>
                                    <div class="column2">
                                        <h3>38,000+ episodes</h3>
                                        <p>Kids Friendly movies & series released each week</p>
                                    </div>
                                    <div class="column3">
                                        <h3>New & exclusive</h3>
                                        <p>Parent control for carefully designed AGE GROUPS</p>
                                    </div>
                                </div>
                                <div class='swiper' id='swiper'>
                                    <!-- Additional required wrapper -->
                                    <div class="swiper-wrapper">
                                        <!-- Slides -->
                                        <div class="swiper-slide"></div>
                                    </div>
                                    <div class="slides-nav">
                                        <div class="nav-icon"></div>
                                        <!-- additional nav-icons here if needed -->
                                    </div>
                                </div>
                            </main>
                            <footer>
                                <div class="footer-column1">
                                    <h2>Follow Us</h2>
                                    <div class="social-links">
                                        <a href="" class="social-icons"><img src="./assets/facebook.svg" alt="SproutStream Facebook"></a>
                                        <a href="" class="social-icons"><img src="./assets/instagram.svg" alt="SproutStream Instagram"></a>
                                        <a href="" class="social-icons"><img src="./assets/youtube.svg" alt="SproutStream Youtube"></a>
                                    </div>
                                    <p>For more info, please visit our <a href="">Support Center</a></p>
                                </div>
                                <div class="footer-column2">
                                    <!-- affiliations and accessibility icons -->
                                </div>
                                <div class="footer-column3">
                                    <p>Disclaimer</p>
                                    <p>This is an assignment for a BCIT project</p>
                                    <p>If you do not want to receive future marketing email messages from SproutStream, please <a href="">opt-out</a></p>
                                    <p>©2023 SproutStream</p>
                                </div>
                            </footer>
                        </body>
                        </html>

Overview

The SproutStream Website Development project, as part of the New Media Design & Web Development Program at the BCIT School of Business, was undertaken from November 10th to December 7th, totaling 34 hours of dedicated effort. This initiative aimed to create a website for SproutStream, an innovative streaming app designed with children in mind, providing a safe, educational, and engaging digital space.

My Role& Contributions

As the developer, Wendi Wang, I played a crucial role in the realization of the SproutStream website, focusing on creating a platform that mirrors the app’s mission to be a safe haven for children’s entertainment and learning. My contributions encompassed:

Email Template and Webpage Development: Employed HTML and inline CSS to craft a responsive email template and engaging webpages, ensuring consistency with SproutStream's visual identity.
Content Integration and Webpage Design: Collaborated closely with the content team to integrate educational and entertaining content, enhancing the user experience for both children and parents.
Features Page Development: Developed a comprehensive Features Page to showcase the app’s offerings, complete with a Call to Action section to encourage app downloads or subscriptions.

Goals

Establish a website that reflects SproutStream’s dedication to providing a secure and educational platform for children

Develop content and design elements that reassure parents of the app’s value in their children’s digital consumption

Ensure the website is accessible and easy to navigate for all users, including both children and adults

Features

Educational Content Showcasing

The website highlights the new and popular shows categorized to cater to different age groups and interests.
Parental Guides and Resources

Includes sections dedicated to parents, offering guides on safe digital practices and how to make the most of the app for their children’s learning.
Interactive and Responsive Design

A user-friendly interface that adapts to different screen sizes, ensuring an enjoyable browsing experience for both desktop and mobile users.

Project Summary

The development of the SproutStream website marked a comprehensive effort to create a digital platform that aligns with the core values of safety, education, and entertainment for children. Through strategic planning, innovative design, and collaborative development, the project successfully translated the SproutStream app’s mission into a vibrant and accessible website. This project stands as a testament to the effective partnership between design and development disciplines, underlining a commitment to enhancing digital experiences for younger audiences and their guardians.

Next Project: Sunshine Soundfest

Project Sprout Stream

Overview

My Role& Contributions

Goals

Features

Educational Content Showcasing

Parental Guides and Resources

Interactive and Responsive Design

Project Summary