Web Development Front End

Squad Class
Level 1 - Session 11

1
 Web Development Front End Squad Class | Level 1 | Session 11

Introductions

Activities

Today’s
Agenda Animated Traveller
Website Final

Summary/HW

Project 5 Animated Traveller Website Final | AGENDA

 Web Development Front End Squad Class | Level 1 | Session 11

Welcome: Greet and share homework!

Mention the Wow factor in

individual homework ideas!

Project 5 Animated Traveller Website Final | Introduction

 Web Development Front End Squad Class | Level 1 | Session 11 Unlock the Concepts !

Task 2: Activity

Task 1: Captain & Recap

Project 5 Animated Traveller Website Final | Learning Path

 Web Development Front End Squad Class | Level 1 | Session 11 Unlock the Concepts !

Task 2: Activity

Task 1: Captain & Recap

Recap (Next)
Squad recap each concept
discussed in last class.

Project 5 Animated Traveller Website Final | Learning Path

 Web Development Front End Squad Class | Level 1 | Session 11

Captain of the day: Elect your captain of the

day!

We can go in alphabetical
order.

Discuss Responsibilities of a
Caption.

Project 5 Animated Traveller Website Final | Captain 6

 Web Development Front End Squad Class | Level 1 | Session 11

Responsibilities of a Captain

Be Initiative Share screen & Do Help in solving

doubts

Project 5 Animated Traveller Website Final | Captain 7

 Web Development Front End Squad Class | Level 1 | Session 11

Rules of the Class

1. Participate 2. One person at a time 3. Try your best

Project 5 Animated Traveller Website Final | Rules 8

 Web Development Front End Squad Class | Level 1 | Session 11

Quick Recap

• Let’s recap all the concepts covered in last class!

• Captain Goes first & tag the next person.

✔ translate? CSS translate moves an element up and down or side-to-side.

✔ translateX? The translateX() CSS function repositions an element horizontally
on the 2D plane
✔ translateY?The translateY() CSS function repositions an element vertically on
the 2D plane

Project 5 Animated Traveller Website Final | Introduction

 Web Development Front End Squad Class | Level 1 | Session 11

Concepts we will cover today!

Learning Objectives:
• Overflow
• Font Awesome
• custom scrollbar

Coding Objectives:
• overflow
• ::webkit-scrollbar
• @media query

Project 5 Animated Traveller Website Final | Objectives

 Web Development Front End Squad Class | Level 1 | Session 11c Unlock the Concepts !

Task 2: Activity

Task 1: Captain & Recap

Master Quiz!

Project 5 Animated Traveller Website Final | Learning Path

 Web Development Front End Squad Class | Level 1 | Session 11

Code Quiz: Let’s play an interesting Quiz!

Join at https://quizizz.com/join
or with the Quizizz! App

Enter the GAME PIN

Project 5 Animated Traveller Website Final | Activity 1

 Web Development Front End Squad Class | Level 1 | Session 11

Activity: Number Guessing Game

Click here to play the number

guessing game in exactly 3
clues. [1-10]

Let the captain spin first to get

the secret number ,and the rest
should ask one clue at at time
and guess.

Next member spin and so on.

Project 5 Animated Traveller Website Final | Activity 2

 Web Development Front End Squad Class | Level 1 | Session 11 Unlock the Concepts !

Task 2: Activity

Task 1: Captain & Recap

Unlock the Concepts

• overflow
• scroll-bar

Project 5 Animated Traveller Website Final | Learning path

 Web Development Front End Squad Class | Level 1 | Session 11

Congratulations!! Concepts we will cover!

• Completing the Animated
Website

• Custom scrollbar

• Social media icons

• Creating Image Gallery

Online Editor: https://replit.com/ Project 5 Animated Traveller Website Final | Learning Ladder
 Web Development Front End Squad Class | Level 1 | Session 11

Project: Animated Traveller Website

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Challenge: Create a section like this below the

landing page.

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Steps: Solution

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Challenge: Create a gallery like this using the flexbox

approach.

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Steps: Solution

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Steps: Add images in each card with hover

effect.

Delete the background-color

from #imageGallery and .card

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Oops Image is overflowing outside the

.card

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Solution: Set overflow as hidden in .card.

With the hidden value, the overflow is clipped, and

the rest of the content is hidden.

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Challenge: Create a footer and add these

icons from font awesome.

Font awesome CDN:

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Solution:

Don’t forget to add the link of

font-awesome
Project 5 Animated Traveller Website Final | Project Steps
 Web Development Front End Squad Class | Level 1 | Session 11

Steps: Make your site responsive.

Here we are decreasing the number of clouds in phone

view.

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Steps: Custom scroll-bar.

::-webkit-scrollbar CSS pseudo-element affects the style
of an element's scrollbar.

You can adjust width and color according to your

choice.

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

It’s your turn Now!

Let’s see who will make their animation more cool !

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

Project: Animated Traveller Website!

CONGRATULATIONS!
YOU MADE ANIMATED
TRAVELLER WEBSITE!

Let’s Publish your Project at Camp K12 website & share with
others!

Project 5 Animated Traveller Website Final | Project Steps

 Web Development Front End Squad Class | Level 1 | Session 11

League Project!!

• Add hover effect with any filter

property.

Project 5 Animated Traveller Website Final | League Project

 Web Development Front End Squad Class | Level 1 | Session 11

Code References!!

• Animated Traveller Website Final - Click Here

• Animated Traveller Website Final Code –

Click Here

Project 5 - Animated Traveller Webte Final |

References
 Web Development Front End Squad Class | Level 1 | Session 11

Let’s Get Ready for PTM!

Project 5 - Animated Traveller Webte Final | Get Ready For

PTM