Suven Internship Designing your internship front-end template 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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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.