Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 6

    Uploaded by

    Меруерт Асхат
    6 views16 pages

    Original Title

    lecture_6

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views16 pages

    Lecture 6

    Uploaded by

    Меруерт Асхат

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    INTRODUCTION TO

    WEB DEVELOPMENT
    Lecturers: Umarov Fahriddin Alisherovich (Sarsenova Zh.N.)
    Labs: Aitim A.K., (Myrzakanurov A.S.)
    6
    Email:umarovf19@gmail.com
    ADVANCED CSS SELECTORS
    GRID LAYOUT
     The CSS Grid Layout Module offers a grid-based layout system, with rows and
    columns, making it easier to design web pages without having to use floats and
    positioning.
    HOW TO MAKE YOUR HTML RESPONSIVE
    BY ADDING ONE STROKE OF CSS CODE
    BOOTSTRAP
    HOW TO ADD BOOTSTRAP TO
    YOUR WEBSITE?
    1. Download the files from https://getbootstrap.com/

    2. Use CDN links:

    These two are the important files


    FORMS VALIDATION STATES
    FORMS VALIDATION STATES
    GRID SYSTEM
     Bootstrap's grid system allows up to 12 columns across the page.
     If you do not want to use all 12 column individually, you can group the columns
    together to create wider columns:
    GRID SYSTEM
     Bootstrap's grid system is responsive, and the columns will re-arrange
    depending on the screen size: On a big screen it might look better with the content
    organized in three columns, but on a small screen it would be better if the content
    items were stacked on top of each other.
    GRID SYSTEM
    GRID SYSTEM
    BOOTSTRAP3 VS
    BOOTSTRAP4
    PRIMARY CSS UNIT
     Primary CSS Unit: - In bootstrap 3 px unit is used and in
    bootstrap 4 rem unit is used.
     A rem is basically this: the font-size value you've set to your
    <html> element. Like this:
    CSS FLEXBOX LAYOUT
    MODULE
    USEFUL LINKS:
     https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean
     https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean
     https://m.habr.com/ru/post/477144/
     https://cssgridgarden.com/#ru
     https://www.outpan.com/app/fd1b175fe8/flexbox-froggy
     https://www.outpan.com/app/1b970b008f/flexbox-playground
     https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере
     https://drive.google.com/open?id=0B-OHBbsyGOazZmxGeEFDUzdkdjA
     https://opensenselabs.com/blog/tech/bootstrap-3-or-bootstrap-4
     https://www.youtube.com/watch?v=FTlczfR82mQ
     https://www.youtube.com/watch?v=EFafSYg-PkI
     https://www.youtube.com/watch?v=Zz6eOVaaelI&t

    You might also like