Responsive Web Design Made Simple CSS @media Rule Tutorial

Responsive Web Design Made Simple CSS @media Rule Tutorial

By  |  December 3, 2017  |  Website Designing  |  Comments

Learn the CSS @media rule and the easiest way to make a responsive and mobile-friendly website layout.
@media – http://www.developphp.com/lib/CSS/media
Lesson Code – http://www.developphp.com/video/CSS/Responsive-Web-Design-Made-Simple-CSS-media-Rule-Tutorial
Video Rating: / 5

Today Los is joining me again for a special episode where we talk about the basics of coding for a responsive website.

We cover three main principals:

1. The Meta Tag
2. HTML Structure
3. Media Queries

After you watch the video you can reference the github repo to see the code in action:
https://github.com/DevTips/Responsive-Web-Design-Basics

Thanks everyone!!

—

DevTips is a YouTube show about web design and development.

Check out the DevTips Github account:
https://github.com/DevTips

—-

HTML5 Basics Playlist:

CSS Basics Playlist:

—-

DevTips now has a twitter account:

Travis also tweets:

Video Rating: / 5

See also  Como hacer una Web Responsive | Mobile First | Html5 - Css3 | Parte1 | Muy Fácil

About the Author: Lu Liuxian

26 Comments

  2. Vytautas Matulevičius

    on December 3, 2017 at 3:02 pm -

    Amazing, thank You!

  3. Educat Open

    on December 3, 2017 at 3:51 pm -

    thanks...very nice

  4. sajal sangal

    on December 3, 2017 at 4:06 pm -

    IS there a was to make the transition from pink to blue and conversion of bigger text into smaller more smooth

  5. Manny Cepeda

    on December 3, 2017 at 4:31 pm -

    Hi Adam, thank you for all your amazing videos on programing. I'm a novice and went to school to learn coding. I defend myself but not as good as you are. I have a question, I'm still old fashion and have a non-responsive website (don't kill me please), but I find it hard to grasp how to make it responsive. If I send you my code, can you look at it? Thanks!!!!

  6. Dejan Petrović

    on December 3, 2017 at 6:16 pm -

    Heh, this code doesn't work on my Samsung A5 2016 and J5 2016. Any ideas?

  7. Ballpoint Animator

    on December 3, 2017 at 6:23 pm -

    i didn't know adrien brody taught webdesign.

  8. Othmane Sirajy

    on December 3, 2017 at 7:00 pm -

    big like (y)

  9. Chandan Sarkar

    on December 3, 2017 at 7:30 pm -

    hello sir, first of all I want say you a big thanks. I don't know how many people are there like me who is learning from your video... you are doing a fabulous work. I really appreciate it. and it's my wish to meet you someday. once again thank you so much.
    now I have a question... I want upload a PDF file which can not be download. how can do that? actually I want to make a ebook website. can please suggest me something... please help me.

  10. MuscularMetal666

    on December 3, 2017 at 7:38 pm -

    Thank you sir. Thumbs up

  11. Thinker101

    on December 3, 2017 at 8:32 pm -

    I can't thank you enough for this tutorial.

  12. VillageHiddenInDaBeats

    on December 3, 2017 at 8:54 pm -

    Why should I have to spend extra time making my buttons/links bigger and more spaced out for people with fat fingers? They chose that life. Deal with it! (Obviously just kidding) lol

  13. Sachin Kumar

    on December 3, 2017 at 9:53 pm -

    Very informative video tutorial, Thanks a lot

  14. Perth Website Designers

    on December 3, 2017 at 10:27 pm -

    Having a responsive website is the de-facto standard nowadays, especially that people are keen to surfing online using smartphones. Hence your site should have responsive web designs that adjust to your customers’ devices. The content, text titles and images should move to fit within the size of a specific screen.

  15. Sunny Sung

    on December 3, 2017 at 11:11 pm -

    Awesome Tutorial Adam. You are an awesome instructor.

  16. Lori

    on December 3, 2017 at 11:20 pm -

    Oh, My, God, your voice is so calming .... I love watching you videos, they are well explained, I find useful information and your voice is just so calming :)) Thank you for your effort that you put into these tutorials!

  17. Tanny

    on December 4, 2017 at 12:13 am -

    2:08 Where to place the meta viewport tag? Within the head tags?

  19. Katherine Claire San Gabriel

    on December 4, 2017 at 1:51 am -

    wow the gayness ,,

  21. Antonio de Sousa

    on December 4, 2017 at 2:47 am -

    Sorry, this tutorial did nothing for me...

  22. Ayesh Zahid

    on December 4, 2017 at 2:56 am -

    👍👍👍👌

  23. unisha acharya

    on December 4, 2017 at 3:38 am -

    can u do a video on split screen plz

  24. Marco Ramos

    on December 4, 2017 at 4:04 am -

    You guys are great, Thanks for making this so much fun... :)

  25. Yeya

    on December 4, 2017 at 4:40 am -

    Can you only set the width to be auto containers?

  26. DesignOWeb Gurwinder

    on December 4, 2017 at 5:54 am -

    you are a nice gays

Leave a Reply

Recent Posts

Recent Comments

Archives

Categories

Meta

img
INDesign DiGiAgency aims to provide useful and powerful tools and solutions that can help online and offline marketers reach out to more clients, market their products and services and boost website traffic. We have maintained a good reputation in providing excellent and high quality services to our clients for years. Should you wish to learn more about us and our services, feel free to contact us or sent us a message. We would be happy to talk to you.
INDesign DigiAgency, Incorporated
a Division of INDesign Marketing Services No. 1 Scotts Road #24-10 Shaw Centre, Singapore 228208
Monday – Friday: 9am to 6pm
Saturday: 9am to 1pm
Sunday: Close
Phone:+6597335129
Email: support@ indesignmarketingservices.com
INDesign DigiAgency