English
Log In

Master Web Development With HTML, CSS & Bootstrap

Class
Play
BYJU'S FutureSchool
Average rating:
4.4
Number of reviews:
(13)
Popular
Create websites using HTML, CSS, Bootstrap in the beginner-friendly, gamified & highly interactive 16 session class. Master professional web design while building a responsive Multi Media Website as your final project.

Class Experience

US Grade 6 - 9
Beginner Level
16 lessons//16 Weeks
 Week 1
Lesson 1
The School Techfest
-Design a web page with HTML -Learn to use heading tags for titles, paragraph tags for content, and image tags for adding pictures -Add headings, content, and images to your webpage using these tags
 Week 2
Lesson 2
Style your Web Page
-Style the web page using inline styling and external style sheets. -Explore various inline style commands, cascading style sheets, and div tags. -Use these styling tools to make the web page visually appealing and attractive.
 Week 3
Lesson 3
The School Website
-Revamp the school website using HTML and CSS for a more attractive look. -Learn to enhance HTML elements with id and class selectors. -Explore hexadecimal numbers to represent colors in CSS and use various CSS properties to align elements in the Home section of the school website.
 Week 4
Lesson 4
Website Navigation
-Create a navigation bar using HTML with unordered lists. -Style the navigation bar using CSS to enhance its appearance. -Add a delightful touch by using pseudo-selectors to style navigation items when the mouse hovers over them, improving the exploration experience on the school website.
 Week 5
Lesson 5
Website Layout and Iframes
-Explore CSS flexbox for organizing and arranging HTML elements on the webpage. -Learn to embed a webpage within another using the <iframe> tag. -Apply styling to both the about section and the footer section of the school website for a cohesive and polished look.
 Week 6
Lesson 6
Image Slider and Cards
-Master creating an image slideshow using CSS. -Transform the layout of the events section into a card display. -Add a visual highlight to the cards when the mouse hovers over them using a pseudo-class selector.
 Week 7
Lesson 7
Debugging : It’s Pizzalicious
-Debug the pizza website by identifying and fixing errors in both HTML and CSS files. -Learn to locate and resolve all issues for a smooth and error-free website. -Apply problem-solving skills to ensure the proper functioning of the website's code.
 Week 8
Lesson 8
Responsive Web Design
-Acquire skills in building a responsive website. -Use media queries to make the pizza website adapt to various screen sizes. -Explore the addition of custom fonts to enhance the visual appeal of the website.
 Week 9
Lesson 9
Multimedia Website
-Develop a multimedia website using the Bootstrap framework. -Implement a collapsible navigation bar for easy webpage navigation. -Ensure compatibility with various screen sizes by learning responsive design techniques.
 Week 10
Lesson 10
Website Carousel
-Master the creation of an image carousel showcasing various web page contents. -Learn to include navigation buttons on the carousel for easy slide transitions. -Enhance the multimedia website by incorporating dynamic image displays and interactive slide controls.
 Week 11
Lesson 11
Music Webpage
-Add cover images, songs, and their details to the music webpage. -Utilize Bootstrap classes to style and enhance the appearance of the webpage. -Incorporate music controls for a more interactive and enjoyable user experience.
 Week 12
Lesson 12
Movies Webpage
-Integrate movie cards onto the movie webpage. -Apply Bootstrap for styling to enhance the visual presentation of the cards. -Learn to incorporate a play button for seamless in-page movie playback.
 Week 13
Lesson 13
Books Webpage
-Add a book to the MMBFlix website using predefined Bootstrap classes. -Implement a modal to open the book in a pop-up window upon clicking. -Enhance the book webpage by including a close button for user-friendly navigation within the modal window.
 Week 14
Lesson 14
Customer Feedback
-Develop a feedback form for the MBBFLIX website. -Include fields to gather customer names, emails, and feedback. -Create checkboxes and radio buttons for additional user input options in the form
 Week 15
Lesson 15
Loader and Collapsible Elements
-Integrate new features into the MMBFLIX website, such as displaying a loading spinner during website loading. -Learn to implement a button for toggling the visibility of movie descriptions. -Include copyright information in the footer to enhance the website's completeness
 Week 16
Lesson 16
Chat Support
-Incorporate chat functionality into a webpage. -Implement the ability to open and close a chat window with a button click. -Learn to design dialogs for effective chat support on the webpage.
This class is taught in English.
  • C1: The School Techfest -Design a web page with HTML -Learn to use heading tags for titles, paragraph tags for content, and image tags for adding pictures -Add headings, content, and images to your webpage using these tags Class Outcome: Gain foundational skills in designing web pages, using HTML for structure, and CSS for styling. C2: Style your Web Page -Style the web page using inline styling and external style sheets. -Explore various inline style commands, cascading style sheets, and div tags. -Use these styling tools to make the web page visually appealing and attractive. Class Outcome: Enhance web pages by styling with inline and external CSS, incorporating div tags, and understanding color representation with hexadecimal numbers. C3: The School Website -Revamp the school website using HTML and CSS for a more attractive look. -Learn to enhance HTML elements with id and class selectors. -Explore hexadecimal numbers to represent colors in CSS and use various CSS properties to align elements in the Home section of the school website. Class Outcome: Transform the school website by mastering responsive design, embedding webpages, and applying custom fonts for an attractive and cohesive look. C4: Website Navigation -Create a navigation bar using HTML with unordered lists. -Style the navigation bar using CSS to enhance its appearance. -Add a delightful touch by using pseudo-selectors to style navigation items when the mouse hovers over them, improving the exploration experience on the school website. Class Outcome: Learn to create a navigation bar with unordered lists in HTML, style it using CSS, and add delightful hover effects for improved user experience. C5: Website Layout and Iframes -Explore CSS flexbox for organizing and arranging HTML elements on the webpage. -Learn to embed a webpage within another using the <iframe> tag. -Apply styling to both the about section and the footer section of the school website for a cohesive and polished look. Class Outcome: Explore CSS flexbox for layout, embed web pages with the <iframe> tag, and style the about and footer sections of the school website. C6: Image Slider and Cards -Master creating an image slideshow using CSS. -Transform the layout of the events section into a card display. -Add a visual highlight to the cards when the mouse hovers over them using a pseudo-class selector. Class Outcome: Build image slideshows with CSS and transform the webpage layout to visually appealing card displays C7:Debugging : It’s Pizzalicious -Debug the pizza website by identifying and fixing errors in both HTML and CSS files. -Learn to locate and resolve all issues for a smooth and error-free website. -Apply problem-solving skills to ensure the proper functioning of the website's code. Class Outcome: Become proficient in debugging by identifying and resolving errors. C8: Responsive Web Design -Acquire skills in building a responsive website. -Use media queries to make the pizza website adapt to various screen sizes. -Explore the addition of custom fonts to enhance the visual appeal of the website. Class Outcome: Develop a responsive pizza website using media queries, and apply custom fonts to enhance the visual appeal. C9: Multimedia Website -Develop a multimedia website using the Bootstrap framework. -Implement a collapsible navigation bar for easy webpage navigation. -Ensure compatibility with various screen sizes by learning responsive design techniques. Class Outcome: Create a multimedia website using Bootstrap, incorporating a collapsible navigation bar and making it compatible with different screen sizes. C10: Website Carousel -Master the creation of an image carousel showcasing various web page contents. -Learn to include navigation buttons on the carousel for easy slide transitions. -Enhance the multimedia website by incorporating dynamic image displays and interactive slide controls. Class Outcome: Implement an image carousel on the multimedia website, adding buttons for slide transitions and creating an engaging user experience. C11: Music Webpage -Add cover images, songs, and their details to the music webpage. -Utilize Bootstrap classes to style and enhance the appearance of the webpage. -Incorporate music controls for a more interactive and enjoyable user experience. Class Outcome: Add cover images, songs, and details to the music webpage, style it using Bootstrap, and integrate music controls for interactive playback. C12: Movies Webpage -Integrate movie cards onto the movie webpage. -Apply Bootstrap for styling to enhance the visual presentation of the cards. -Learn to incorporate a play button for seamless in-page movie playback. Class Outcome: Integrate movie cards onto the webpage, style them with Bootstrap, and add a play button for in-page movie playback. C13:Books Webpage -Add a book to the MMBFlix website using predefined Bootstrap classes. -Implement a modal to open the book in a pop-up window upon clicking. -Enhance the book webpage by including a close button for user-friendly navigation within the modal window. Class Outcome: Add a book to MMBFLIX using Bootstrap classes, open it in a modal window, and enhance the book webpage with a close button. C14: Customer Feedback -Develop a feedback form for the MBBFLIX website. -Include fields to gather customer names, emails, and feedback. -Create checkboxes and radio buttons for additional user input options in the form Class Outcome: Develop a feedback form for MMBFLIX with fields for names, emails, and feedback, including checkboxes and radio buttons for additional input. C15: Loader and Collapsible Elements -Integrate new features into the MMBFLIX website, such as displaying a loading spinner during website loading. -Learn to implement a button for toggling the visibility of movie descriptions. -Include copyright information in the footer to enhance the website's completeness Class Outcome: Enhance the MMBFLIX website by adding a loading spinner, a button for toggling movie descriptions, and copyright information in the footer. C16: Chat Support -Incorporate chat functionality into a webpage. -Implement the ability to open and close a chat window with a button click. -Learn to design dialogs for effective chat support on the webpage. Class Outcome: Gain practical skills in implementing interactive chat features on webpages, including window toggling and dialog creation.
0 - 1 hours per week outside of class
Homework
Frequency: available upon request
Feedback: available upon request
Details: Students will receive home work as a DIY coding acitivity. They will follow the provided tutorial to finish the post class project. All projects will be finished individually. Homework will be recommended but not mandatory.
 1 file available upon enrollment
-You must have a computer with good internet connection. -Materials (like a mouse) for a better learning experience.
In addition to the Outschool classroom, this class uses:
In addition to the Outschool classroom, this class uses:
https://www.tynker.com/" students use a login supplied by the teacher and does not collect personally identifiable information. 
In addition to the Outschool classroom, this class uses:
https://www.tynker.com/
Joined February, 2024
4.4
13reviews
Popular
Profile
Launched in 2015, BYJU'S offers highly personalised and effective learning programs for K12 grades. Today, with 50 million registered students and 3.5 million paid subscriptions, BYJU'S has become one of the most preferred education platforms... 
Group Class

$30

weekly or $480 for 16 classes
1x per week, 16 weeks
55 min

Live video meetings
Ages: 12-16
1-3 learners per class

About
Support
SafetyPrivacyCA PrivacyLearner PrivacyTerms
Outschool International
Get The App
Download on the App StoreGet it on Google Play
© 2024 Outschool