Outschool
Abrir configuración de moneda, zona horaria e idioma
Iniciar sesión

Domina el desarrollo web con HTML, CSS y Bootstrap

Cree sitios web con HTML, CSS y Bootstrap en esta clase de 16 sesiones, gamificada, interactiva y para principiantes. Domine el diseño web profesional mientras crea un sitio web multimedia responsivo como proyecto final.
BYJU'S FutureSchool
Puntuación media:
4.4
Número de reseñas:
(31)
Popular
Clase
Jugar

Qué está incluido

16 reuniones en vivo
14 horas 40 minutos horas presenciales
Tarea
1 hora por semana. 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.

Experiencia de clase

Nivel de inglés: desconocido
Grado de EE. UU. 6 - 9
Nivel Beginner
🎁𝐋𝐢𝐦𝐢𝐭𝐞𝐝 𝐏𝐞𝐫𝐢𝐨𝐝 𝐃𝐢𝐬𝐜𝐨𝐮𝐧𝐭! 𝐆𝐞𝐭 $𝟐𝟎 𝐨𝐟𝐟 𝐰𝐡𝐞𝐧 𝐲𝐨𝐮 𝐞𝐧𝐫𝐨𝐥𝐥! 𝐔𝐬𝐞 𝐭𝐡𝐞 𝐜𝐨𝐝𝐞 <FUTUR57S7F20> 𝐕𝐚𝐥𝐢𝐝 𝐭𝐢𝐥𝐥 𝟑𝟏 𝐌𝐚𝐲!
1:1 private class, 1x per week, 16 weeks
In this course students will create interactive web pages and websites using HTML, CSS, and Bootstrap. This learning journey is designed to apply the concepts of web designing to build application based websites for school, e-commerce, etc. Students will also build an intercative Multi Media Website as their final project.

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.
Metas de aprendizaje
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.
objetivo de aprendizaje

Programa de estudios

16 Lecciones
más de 16 semanas
Lección 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 
55 minutos de lección en vivo en línea
Lección 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. 
55 minutos de lección en vivo en línea
Lección 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. 
55 minutos de lección en vivo en línea
Lección 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. 
55 minutos de lección en vivo en línea

Otros detalles

Orientación para padres
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.
Lista de útiles escolares
-You must have a computer with good internet connection.
-Materials (like a mouse) for a better learning experience.
 1 archivo disponible al momento de la inscripción
Idioma en el que se imparte la clase
Inglés
BYJU'S FutureSchool
Se unió el February, 2024
4.4
31reseñas
Popular
Perfil
Experiencia y certificaciones del docente
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 across the globe.

BYJU’s FutureSchool, an integral part of the BYJU’s group, specializes in online private coaching for learners across 120+ countries. Our core philosophy is to empower learners to build critical thinking and cognitive skills that they can apply to solve real world problems.

- We have completed over 80 million online sessions in USA and globally.
- Our Coding curriculum is CSTA aligned and powered by our subsidiary Tynker, which is used to teach in 150,000+ schools worldwide.
- Learners become Math confident with our 1-on-1 instructor-led sessions and Master class videos with professor Edward Burger, President Emeritus of Southwestern University in Georgetown, Texas.
- We follow proven pedagogy, designed by STEM experts that are customised to the needs of each unique learner.
- We bring conceptual clarity through Inquiry-based learning and reinforce fundamentals through projects, quizzes, and in-class and post-class activities.
- We are a KidSAFE+ Coppa certified institution that consider the privacy and sanctity of the parent-student-teacher relationship at the heart of our teaching philosophy.

We are excited to bring our World-class curriculum to you, now on Outschool in 2024!

So what are you waiting for? Join us in this adventure today and fall in love with learning!

Reseñas

Curso grupal en vivo
Compartir

30 US$

semanalmente o 480 US$ por 16 clases
1 x por semana, 16 semanas
55 min

Videoconferencias en vivo
Edades: 12-16
1-3 alumnos por clase

Acerca de
Apoyo
SeguridadPrivacidadPrivacidad de CAPrivacidad del alumnoAdministrar preferencias de datosTérminos
Obtener la aplicación
Descargar en la App StoreDescargar en Google Play
© 2024 Outschool