Outschool
통화, 시간대 및 언어 설정 열기
로그인

HTML, CSS 및 Bootstrap을 사용한 마스터 웹 개발

초보자 친화적이고, 게임화되고, 상호 작용성이 높은 16세션 수업에서 HTML, CSS, Bootstrap을 사용하여 웹사이트를 만드세요. 최종 프로젝트로 반응형 멀티미디어 웹사이트를 구축하는 동안 전문적인 웹 디자인을 마스터하세요.
BYJU'S FutureSchool
평균 평점:
4.4
수강 후기 수:
(31)
인기 수업
수업
재생

무엇이 포함되어 있나요?

16개의 라이브 미팅
수업 14 시간 40 분 시간
Homework
주당 1시간. 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.
보고계신 지문은 자동 번역 되었습니다

수업 소개

영어 수준 - 알 수 없음
미국 6학년 - 9학년 학년
레벨 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.
학습 목표
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.
학습 목표

강의 계획서

16 레슨
16 주 이상
레슨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 분 온라인 라이브 레슨
레슨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 분 온라인 라이브 레슨
레슨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 분 온라인 라이브 레슨
레슨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 분 온라인 라이브 레슨

그 외 세부 사항

학부모 가이드
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.
수업 자료
-You must have a computer with good internet connection.
-Materials (like a mouse) for a better learning experience.
 등록 시 1개의 파일을 볼 수 있어요.
수업 진행 언어
영어
BYJU'S FutureSchool
가입일: February, 2024
4.4
31수강 후기
인기 수업
프로필
교사 전문성 및 자격증
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!

리뷰

라이브 그룹 코스
공유
매주

US$30

또는 16 회 수업에US$480
16주 동안 주당 1회
55분

실시간 화상 수업
연령: 12-16
수업당 학습자 1-3 명

아웃스쿨 소개
고객 지원
안전 정책개인 정보CA 개인 정보어린이 개인정보데이터 기본 설정 관리이용 약관
아웃스쿨 홈페이지
앱 다운로드
앱 스토어에서 다운로드Google Play에서 다운로드
© 2024 아웃스쿨