Scribd Logo
Upload

Welcome to Scribd!

  • 171 views

    Hotstar Clone Using HTML CSS and Bootstrap Notes

    Uploaded by

    Rupam Karmakar
    The document discusses a 7 day basic web development bootcamp with Bootstrap. It covers topics like HTML syntax, components of a website, headings, lists, hyperlinks, CSS units, colors, styling images, fonts and pages. Code snippets and examples are provided to explain concepts like HTML elements and tags, CSS selectors, units and properties. Helpful resources are also mentioned for students who may get stuck.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Hotstar Clone Using HTML CSS and Bootstrap Notes

    Uploaded by

    Rupam Karmakar
    171 views73 pages
    The document discusses a 7 day basic web development bootcamp with Bootstrap. It covers topics like HTML syntax, components of a website, headings, lists, hyperlinks, CSS units, colors, styling images, fonts and pages. Code snippets and examples are provided to explain concepts like HTML elements and tags, CSS selectors, units and properties. Helpful resources are also mentioned for students who may get stuck.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses a 7 day basic web development bootcamp with Bootstrap. It covers topics like HTML syntax, components of a website, headings, lists, hyperlinks, CSS units, colors, styling images, fonts and pages. Code snippets and examples are provided to explain concepts like HTML elements and tags, CSS selectors, units and properties. Helpful resources are also mentioned for students who may get stuck.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    171 views73 pages

    Hotstar Clone Using HTML CSS and Bootstrap Notes

    Uploaded by

    Rupam Karmakar
    The document discusses a 7 day basic web development bootcamp with Bootstrap. It covers topics like HTML syntax, components of a website, headings, lists, hyperlinks, CSS units, colors, styling images, fonts and pages. Code snippets and examples are provided to explain concepts like HTML elements and tags, CSS selectors, units and properties. Helpful resources are also mentioned for students who may get stuck.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 73

    7 DAYS LONG LIVE CLASSES

    Basic Web Dev


    with Bootstrap
    in Collaboration with:
    DevTown| Shaurya Sinha

    The original browser was once the


    dominant browser in terms of usage
    share, but as a result of the first
    browser war, it lost virtually all of its
    share to Internet Explorer.

    Netscapewas discontinued and


    support for all Netscape browsers and
    client products was terminated on
    March 1, 2008.
    DevTown| Shaurya Sinha

    COMPONENTS OF
    A WEBSITE
    What will be be learning
    DevTown| Shaurya Sinha
    DevTown| Shaurya Sinha
    DevTown| Shaurya Sinha
    DevTown| Shaurya Sinha

    CREATED IN JUST 10
    DAYS
    DevTown| Shaurya Sinha

    Vs
    Javascript
    DevTown| Shaurya Sinha

    <p> This is a Paragraph. </p>

    Paragraph

    Content
    09
    DevTown| Shaurya Sinha

    opening tag closing tag

    <p> This is a Paragraph. </p>

    Content
    DevTown| Shaurya Sinha

    element 1

    ->

    ->
    of

    pa
    ild

    re
    nt
    ch

    to
    ->

    ->
    element 2 element 3
    <- siblings ->
    DevTown| Shaurya Sinha

    element 1

    element 2 element 3

    element 4 element 5

    element 6 element 7
    DevTown| Shaurya Sinha

    <div> Content </div>

    <div>

    <h1> <p>
    DevTown| Shaurya Sinha

    <div> <h1> Title </h1> </div>

    another element !
    DevTown| Shaurya Sinha

    <div>
    <h1> Title </h1>
    </div>
    DevTown| Shaurya Sinha

    <div> <div>
    <h1> Title </h1>
    <p> Paragraph. </p>
    <h1> <p>
    </div>
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev


    with Bootstrap
    DevTown| Shaurya Sinha

    HTML Syntax The purpose of this problem set


    is to help you practice writing
    Problem HTML. We want you to build
    confidence and master basic
    Statement 1 HTML syntax.

    Discussion Points
    DevTown| Shaurya Sinha

    Helpful
    Resources
    if you get stuck there is no harm in going
    back and watching any of these videos.
    We encourage you to use outside
    resources as well. You can always refer to
    the MDN references or your favourite
    search engine to get unstuck.

    Books and Apps


    DevTown| Shaurya Sinha

    Make a Button !!!


    For this problem statement you have to do is type
    out the HTML to create a button element
    DevTown| Shaurya Sinha

    Check all the


    Headings !!!
    For this problem statement, you have to do is type out
    the HTML to create all the different types of headings.
    DevTown| Shaurya Sinha

    Make a List !!!


    For this problem statement, you have to do is type
    out the HTML to create an unordered list.
    This is an example of an unordered list
    You have to make an unordered listof 3 web
    languages
    HTML, CSS and Js
    DevTown| Shaurya Sinha

    Tree to HTML !!!


    Convert the following Tree to HTML code

    <body>

    <h1> <div>

    Content
    <p> <p>

    Content Content
    DevTown| Shaurya Sinha

    Make a Hyperlink !!!


    For this problem statement, you have to do is type out
    the HTML to create a Hyperlink.
    DevTown| Shaurya Sinha

    Mockup to website !!!


    For this problem statement, you have to do is type out
    the HTML to create this following mockup.
    DevTown | Shaurya Sinha

    Ruleset

    selector div {
    text-align: right ; Declaration
    Block
    }

    09
    ShapeAI | Shaurya Sinha

    H1 to green !!!
    For this problem statement, you have to do is type out
    the CSS to change Title to Green.
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev


    Bootcamp
    DevTown | Shaurya Sinha

    class attribute selector id attribute selector

    .book-summary { #site-description {
    text-align: right text-align: right
    ; ;
    } }
    DevTown | Shaurya Sinha

    Developer
    Tools
    Lets explore the web page
    miles

    feet

    LENGTH

    centimeters meters
    miles

    feet

    PIXEL/PERCENTAGE

    centimeters meters
    ABSOLUTE

    8 meters
    RELATIVE

    2 cars wide
    DevTown | Shaurya Sinha

    Absolute Relative

    .book-summary { .site-description {
    width: 400px ; width: 40% ;
    } }
    DevTown | Shaurya Sinha

    Absolute Relative

    px %
    m em
    in m vw
    cm vh
    DevTown | Shaurya Sinha

    em vw

    CSS Relative to the font-size of the element


    (2em means 2 times the size of the
    current font)
    Relative to 1% of the width of the
    viewport*

    Relative
    Units vh %

    Relative to 1% of the height of the Relative to the parent element


    viewport*

    10
    DevTown | Shaurya Sinha

    px in

    CSS pixels (1px = 1/96th of 1in) Inches (1in = 96px = 2.54cm)

    Absolute
    Units cm mm

    Centimetres Millimetre

    10
    ShapeAI | Shaurya Sinha

    CSS Units !!!


    For this problem statement, you have to do is type
    out the CSS to change.
    width to 100px
    height to 200px
    font-size to 4em
    DevTown | Shaurya Sinha

    CSS color

    Discussion Points
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev Bootcamp

    X X
    ShapeAI | Shaurya Sinha

    Let's Style an Image


    For this problem statement, you have to do is type out
    the CSS to change.
    add a border
    cursor change
    box shadow

    04
    ShapeAI | Shaurya Sinha

    Let's Style a Font


    For this problem statement, you have to do is type out
    the CSS to change.
    font-family to Helvetica or Arial or sans-serif
    font-size to 60px
    to uppercase
    underline the text
    change the color to RGB 19, 11, 230.

    04
    ShapeAI | Shaurya Sinha

    Let's Style a Page


    For this problem statement, you have to do is type out
    the CSS to change.

    04
    ShapeAI | Shaurya Sinha

    Let's Style a Page


    For this problem statement, you have to do is type out
    the CSS to change.

    04
    ShapeAI | Shaurya Sinha

    Stylesheet
    What if you wanted to use
    the same CSS on more than
    one webpage

    13
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev Bootcamp

    X X
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev Bootcamp

    X X
    ShapeAI | Shaurya Sinha

    CODE

    What are We
    doing up till TEST

    now?
    REFINE

    06
    7 DAYS LONG LIVE CLASSES

    Basic Web Dev Bootcamp

    X X

    You might also like