Kickstart Your Responsive Web Design Journey with CSS Media Queries

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 17

  • @terrylee6092
    @terrylee6092 13 днів тому +2

    I have been watched this playlist so many times, paused it again and again, then write some code. And after that I just understand this. I m not the smart guy😢. These videos helps me a lot. And some of the detail of the attribute of HTML tag I just know from the video, such as 'role' , 'arile-lable'. Thanks so much.

    • @OptimisticWeb
      @OptimisticWeb  13 днів тому +1

      Thank you! Pausing, practicing, and revisiting is how we all learn - I’m glad the videos have been helpful.

  • @geokongr
    @geokongr 3 місяці тому +1

    Very smart use of grid-template-areas to create the layout!

    • @OptimisticWeb
      @OptimisticWeb  3 місяці тому

      Thank you! 😊 grid-template-areas make it so much easier to create flexible layouts.

  • @biggand8520
    @biggand8520 3 місяці тому +1

    Hey, cool video! Media queries are a big topic, each website has to use to be responsive. So thanks for covering that. Personally, I prefer “old” syntax, I noticed that new syntax is not working on some Apple phones, in safari, especially old version. And it seems that nowadays they do everything to omit media queries- container queries, auto wrap in grids and etc. Most valuable for me became combination of @screen and max-width queries, I couldn’t get why my media queries began to work when printing page)) even when @print is the lowest query in the file)) yeah…

    • @OptimisticWeb
      @OptimisticWeb  3 місяці тому +1

      Thanks for watching! Yeah, media queries are the first step for learning how responsive designs work, and a video on container queries is next in line. You're right, these days, we can use auto-wrapping grid layouts that help us get the same result without using any specific media query. I didn't know that the latest syntax may cause issues with some Apple phones, thanks for sharing.

  • @MrCloudTel
    @MrCloudTel Місяць тому +1

    this is awesome can you please break down how you apply a background gradient used on this tutorial

    • @OptimisticWeb
      @OptimisticWeb  Місяць тому +1

      Glad you enjoyed it! I’ve actually had a few people ask for a breakdown of that gradient design, so it’s definitely on my list. Stay tuned!

    • @OptimisticWeb
      @OptimisticWeb  16 днів тому +1

      @MrCloudTel The video explaining this background pattern is coming next.

  • @AlThePal78
    @AlThePal78 3 місяці тому +2

    I thought you might of covered container queires but maybe that is next this is important to know before that

    • @OptimisticWeb
      @OptimisticWeb  3 місяці тому +1

      Yes, container queries are next in line. Stay tuned, and thanks for watching!

  • @ilyesPR
    @ilyesPR 3 місяці тому +1

    Fucking banger, very simplified and helpful

    • @OptimisticWeb
      @OptimisticWeb  3 місяці тому

      Thank you! A video on container queries is coming up next.

  • @outpost31737
    @outpost31737 3 місяці тому +1

    Container queries will replace media queries.

    • @OptimisticWeb
      @OptimisticWeb  3 місяці тому

      I wouldn’t say they'll 'replace' media queries, but they’re definitely more powerful for creating context-aware layouts. Stay tuned - a detailed video on container queries is coming up next. Thanks for watching!

    • @outpost31737
      @outpost31737 2 місяці тому +1

      @@OptimisticWeb I rarely use media queries besides websites are responsive by default it is the designers who cause problems with layouts for different screen sizes. Planning is everything.

    • @OptimisticWeb
      @OptimisticWeb  2 місяці тому

      I agree - websites are naturally responsive, and grid layouts are great for adapting to different sizes. Whether you use media queries or not often comes down to experience. If you know, you know!