CSS website layout in 9 minutes! 🗺️

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 55

  • @BroCodez
    @BroCodez  Год назад +61

    Bro Code


    Header





    This is Aside
    This is side content

    author information
    fun facts
    quotes
    external links
    comments
    related content



    This is a Section
    This is dependent content
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum est totam ducimus fugiat possimus consectetur architecto repudiandae, recusandae iusto aperiam eveniet quidem enim aliquam rem. Dolore voluptates nesciunt fuga quisquam?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum est totam ducimus fugiat possimus consectetur architecto repudiandae, recusandae iusto aperiam eveniet quidem enim aliquam rem. Dolore voluptates nesciunt fuga quisquam?


    This is an Article
    This is independent content

    News Article
    Job Post
    Blog Post

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quidem, repudiandae, suscipit illum animi ullam omnis at laborum eaque dolorem aliquam quos iure cum deserunt asperiores facere sed totam magni?




    Footer


    /* style.css */
    *{
    box-sizing: border-box;
    }
    body{
    margin: 0;
    }
    header{
    background-color: hsl(0, 0%, 86%);
    text-align: center;
    padding: 25px;
    }
    .navbar{
    background-color: hsl(0, 0%, 15%);
    height: 50px;
    }
    aside{
    width: 20%;
    float: left;
    padding: 10px;
    }
    section{
    width: 40%;
    float: left;
    padding: 10px;
    }
    article{
    width: 40%;
    float: left;
    padding: 10px;
    }
    footer{
    display: block;
    clear: both;
    background-color: hsl(0, 0%, 86%);
    text-align: center;
    padding: 25px;
    }
    @media screen and (max-width:600px){
    aside, section, article{
    width: 100%;
    }
    }

  • @LiveINtheGood53
    @LiveINtheGood53 2 месяца назад +2

    This instructor is wonderful. He explains each step very well and uses great examples to back up those steps.

  • @chromaticworkshop2669
    @chromaticworkshop2669 5 месяцев назад +6

    Thank you for all of these tutorial videos. I took the LinkedIn course on responsive design and you were a lot better in explaining things.

  • @kadafiblaze9662
    @kadafiblaze9662 Год назад +17

    Bro, this i this is dope. you are the best. love your work.

  • @redwanfzr464
    @redwanfzr464 8 месяцев назад +6

  • @Epic_coding200
    @Epic_coding200 Год назад +29

    W3Schools but with text to speech
    (I hate reading articles but u have fixed it for me !!)

  • @guchfun
    @guchfun 10 месяцев назад +3

    Thank you Bro Coder! I love the simplicity of this design as a starting point.

  • @yfjsdgzjdnfn
    @yfjsdgzjdnfn 9 месяцев назад +4

    It is nice to layout using flexbox rather float

  • @visitor_t-w3p
    @visitor_t-w3p 10 месяцев назад +1

    Fantastic...I love it.very clean clear to the point..I'm confident now

  • @condeCogs-35t
    @condeCogs-35t Месяц назад

    thanks sir it's very helpful for me to know how to creat the perfect layout .

  • @Wolphypwi
    @Wolphypwi 11 месяцев назад +1

    man, I wish to be as good as you and have the knowledge.

  • @小郭子游戏-v4r
    @小郭子游戏-v4r 7 месяцев назад

    pretty good. The content is good. It showing how to make a basic websites with all the basic factors instructed step by step.

  • @mforkan
    @mforkan 3 месяца назад

    That was extremely helpful! Thanks

  • @RickWoellert
    @RickWoellert Месяц назад

    Yeah Bro nice Video.

  • @LisaElsie
    @LisaElsie 6 месяцев назад

    amazing explanation, thank you !

  • @JasonTRogers
    @JasonTRogers Год назад +2

    wow, thank you for Going through that. It helped me understand how HTML and CSS work together. Do you have a video that explains the relationship of PHP with the other programing languages? How many programing languages are involved in building a website?

  • @khakimov_18
    @khakimov_18 11 месяцев назад

    you are doing a great job! Thanks for all

  • @tavrel4628
    @tavrel4628 10 месяцев назад +10

    why doesn't my article align with section and aside? it's right under the navbar and no padding adding seems to work. total beginner here😅

    • @SBisLive435
      @SBisLive435 6 месяцев назад

      Let's grow together

    • @SBisLive435
      @SBisLive435 6 месяцев назад

      Let's grow together

    • @Yehor-v7y
      @Yehor-v7y Месяц назад +3

      ​@@SBisLive435 fungi be like:

  • @TylerGraybeal
    @TylerGraybeal 10 месяцев назад

    Nice video bro!!!!

  • @abduljayconteh1858
    @abduljayconteh1858 9 месяцев назад

    Thank you very much @Brocode you are a genius

  • @AdeelAhmad0007
    @AdeelAhmad0007 7 месяцев назад

    Nice Video

  • @reaper8305
    @reaper8305 7 месяцев назад +1

    Sir bro code will you create a full actuall website with design

  • @sdy2024
    @sdy2024 6 месяцев назад

    Thank you very much , this is good stuff.

  • @suyashman7964
    @suyashman7964 Год назад +1

    Epic bro

  • @AdeelAhmad0007
    @AdeelAhmad0007 7 месяцев назад

    good

  • @eternalrinnegan8393
    @eternalrinnegan8393 10 месяцев назад

    clean af, ty

  • @alwinsantos3807
    @alwinsantos3807 6 месяцев назад

    hello what if i dont use style.css where to put this code" @media screen and (max-width:600px) {
    aside, section, article{
    width: 100%;
    }
    }
    "
    thankss

  • @AdeelAhmad0007
    @AdeelAhmad0007 6 месяцев назад

    amazing

  • @sherlockholms2544
    @sherlockholms2544 8 месяцев назад

    thanks bro ❤❤❤❤❤❤❤❤

  • @walidwalid1669
    @walidwalid1669 8 месяцев назад

    Thank you 🎉

  • @sereneflatun
    @sereneflatun 11 месяцев назад

    THank you THank you Thank you ************************

  • @SpongeknobSquarenut
    @SpongeknobSquarenut 11 месяцев назад

    is there a way to make the footer smaller?

    • @purplevanilla
      @purplevanilla 11 месяцев назад

      Just reduce the height of the footer

    • @SpongeknobSquarenut
      @SpongeknobSquarenut 11 месяцев назад

      @@purplevanillabut how?

    • @purplevanilla
      @purplevanilla 11 месяцев назад

      @@SpongeknobSquarenut For example, if the footers height is 100. Just change the height into 80 or smth lower than that in css.
      footer{
      height: 80;
      }

  • @souleaterboss2246
    @souleaterboss2246 11 месяцев назад

    Thanks 😮😮😮

  • @ezeabataprisca9164
    @ezeabataprisca9164 8 месяцев назад

    Thank you bro

  • @josepholaniyi8818
    @josepholaniyi8818 9 месяцев назад

    Thanks❤

  • @mothukurivenkatesh4641
    @mothukurivenkatesh4641 Год назад +2

  • @ayubayanle
    @ayubayanle Год назад

    Thank you man

  • @LloydChristmas1195
    @LloydChristmas1195 Год назад +8

    thank you so much!!!! This isn't plagiarism, is it? taking this code and making something else out of it?

    • @Yumiesthetic
      @Yumiesthetic Год назад +1

      of course not, as long as it's for personal usage and learning, it's fine

  • @buivandat-md8fd
    @buivandat-md8fd 8 месяцев назад

    tks bro !

  • @rejuzaman6365
    @rejuzaman6365 3 месяца назад

  • @softwareengineer1
    @softwareengineer1 Год назад +1

    Thankyou Bro

  • @felixtinnerholm4458
    @felixtinnerholm4458 4 месяца назад

    epic

  • @MotoPortalTR
    @MotoPortalTR 10 месяцев назад

    tenku tenku izmir -Turqey gut bye

  • @AdeelAhmad0007
    @AdeelAhmad0007 7 месяцев назад

    lop

  • @puranlimbu-r3k
    @puranlimbu-r3k 9 месяцев назад

    leuuuuu

  • @AdeelAhmad0007
    @AdeelAhmad0007 6 месяцев назад

    good