interactive Problems

Task id # 4

Figma to landing page

beginner level

Task goal

  • Learning Figma to web desgin
  • Practicing pixel perfect web design

Required skills:

htmlcssflexboxbootstraptailwindany

Design a pixel perfect website from the following figma.
Consider only desktop view
Figma Link: Click me to open

Task id # 1

Responsive Header

beginner level

Task goal

  • Learning media-query
  • Practicing flexbox
  • practicing position

Required skills:

htmlcssflexboxmedia-query

Design a responsive header with following structure:
Desktop mode (min width 600px)

  • A logo at left side
  • A navbar at middle including four menu items (Home,About,Contact,Blog)
  • A search bar and profile icon at right side

    • Mobile mode (max width 600px)
    • A logo at left side
    • A hamburger menu icon at right side
    • If hover or click on hamburger menu icon, a drawer from left side will open. It will cover 80% width of the viewport.
    • In that drawer, logo will be at middle top. then there will be the search bar. After that Menus will be at center and at bottom there will be the profile icon

Task id # 2

Car shop

beginner level

Task goal

  • Learn to make a complete project
  • Writing requirements
  • practicing all parts of html and css
  • practicing responsiveness
  • practicing different libraries and techs used in static website

Required skills:

htmlcssscssflexboxmedia-querybootstraptailwind

Mr X has a car business. He needs a website to show his cars list, car details, contact and visit information and details of his shop. Also, he needs a personal page in this website, where customer will know about him in details. Make a website for him

Hints: Design a static website with the pages Mr X needs. Try to do your best. use any of these : html, css / scss / bootstrap / tailwind etc. you can use little bit JS if necessary but it is optional.

Task id # 3

Dipjol and Manna

beginner level

Task goal

  • Learning javascript
  • Practicing DOM
  • practicing onclick event handler

Required skills:

javascript

Dipjol is a villain. he wants to kidnap some australian cows. But Hero Manna appears to him as a thorn. Now make a web app, from where only Dipjol can kidnap Australian cows, but Manna can make the cows free.

Hints: Design a one page web application with Javascript where there will be image of Dipjol, Manna and at least 8 Australian cows. If you select Dipjol and then select any cows from a box, it will move the cows to dipjols box. but if you select manna and the select any cows from dipjols box, it will revert that cow in its initial place. Use Javascript / Jquery / React JS / Next JS any thing you want