Suven

Inter

nship

Designing your internship front-endtemplate

This internship will help you understand functioning of a basic HTML document and CSS styling.Before you start with this tutorial, we strongly recommend you to visit following websites.(Internet connection is strongly recommended while designing this template for beginners)

The following links are extracted from the most popular full stack curriculum supported by a passionate open source community.

https://www.theodinproject.com/courses/web-development-101/lessons/introduction- to-the-front-end

https://www.theodinproject.com/courses/web-development-101/lessons/html-and-css-basics

https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5

https://learn.freecodecamp.org/responsive-web-design/basic-css

Suven

Inter

nship

The following internship project uses popular entertainment websites like netflix /hotstar /hulu as a sample layout reference template.

The following descriptions below will give you a brief introductionabout different sections of this web-page and how to design.

}

Website logo with box shadow and border radius cssproperties. Header with navigation

links

Suven

Inter

nship

Sub div elements containing movie poster images and movie description as shownabove.

This is a Border-bottom css property and not <hr> tag tag

Genre category

Div Media carousal container NEXT button implement javascript onclick

event.

Media carousal container div containing Images to be displayed.

Suven

Inter

nship

Select tag element for Genre selection(All, Action, Drama, Sci-Fi). Action, Action, Drama, Sci-Fi). Drama, Action, Drama, Sci-Fi). Sci-Fi).

On select a particular option movies list gets filtered.

Search text-box on entering required movie namefilters data or outputs “no result found”. There’s adummy search button and css font properties, Action, Drama, Sci-Fi).border properties and background color have beenapplied.

On typing movie name for here e.g. “Haider”, Action, Drama, Sci-Fi). the movie is filtered from movies list and displayed.

Footer contains site logo and copyright info. If required, Action, Drama, Sci-Fi). other site-navigation links can also be merged.