Outschool
通貨、タイムゾーン、言語の設定を開く
ログイン

ウェブデザインをマスターする: HTML、CSS、Bootstrap を使用したレスポンシブなウェブサイト | 1-1 進行中

初心者に優しく、ゲーム化され、高度にインタラクティブな 16 セッションのコーディング クラスで、HTML、CSS、Bootstrap を使用して魅力的な Web サイトを構築します。最終プロジェクトとしてレスポンシブなマルチメディア Web サイトを構築しながら、プロフェッショナルな Web デザインを習得します。
BYJU'S FutureSchool
平均評価:
4.4
レビュー数:
(31)
Popular
クラス

含まれるもの

オンデマンドで会う
必要に応じて会議をスケジュールする
55 分
セッションごと
教師のサポート
宿題:
週1時間. Students will receive home work as a DIY coding activity. 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.
この文章は自動翻訳されています

このクラスで学べること

英語レベル - 不明
米国の学年 6 - 9
Beginner レベル向け
🎁𝐋𝐢𝐦𝐢𝐭𝐞𝐝 𝐏𝐞𝐫𝐢𝐨𝐝 𝐃𝐢𝐬𝐜𝐨𝐮𝐧𝐭! 𝐆𝐞𝐭 $𝟐𝟎 𝐨𝐟𝐟 𝐰𝐡𝐞𝐧 𝐲𝐨𝐮 𝐞𝐧𝐫𝐨𝐥𝐥! 𝐔𝐬𝐞 𝐭𝐡𝐞 𝐜𝐨𝐝𝐞 <FUTURBYJUS20> 𝐕𝐚𝐥𝐢𝐝 𝐭𝐢𝐥𝐥 𝟑𝟏 𝐌𝐚𝐫!
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.
学習到達目標
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.
学習目標

その他の情報

保護者へのお知らせ
In addition to the Outschool classroom, this class uses: https://www.tynker.com/ login supplied during class; does not collect personally identifiable information.
受講に必要なもの
-You must have a computer with good internet connection.
-Materials (like a mouse) for a better learning experience.
 クラス登録時に 1 の学習素材が提供されます
外部リソース
このクラスでは、Outschool内のクラスルームに加えて、以下を使用します。
  • Tynker
BYJU'S FutureSchool
参加しました February, 2024
4.4
31レビュー
Popular
プロフィール
教師の専門知識と資格
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!

レビュー

ライブ1対1レッスン
共有

$38

セッションごとに
オンデマンドでクラスを開催
55 分

10 人がクラスを受けました
オンラインライブ授業
年齢: 12-16

About
サポート
安全性についてプライバシーCAでのプライバシー保護学習者のプライバシーデータ設定の管理利用規約
アプリを入手
App StoreでダウンロードGoogle Playで入手する
© 2024 Outschool