Coding2GO
Coding2GO
  • 137
  • 3 589 502
5 CSS Tips & Tricks for better Responsive Web Design
5 MINDBLOWING CSS Tips and Tricks for better responsiveness and modern css solutions for typical problems with CSS ONLY.
👉 Become a Member to Support our Channel:
th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin
You will learn elegant solutions for everyday css problems and productive shorthands for responsive web design, How to implement modern css features like min() clamp() or the aspect-ratio property. How to achieve responsive padding, and responsive font-sizes with CSS only and without media queries. You will also learn about accessibility and many modern css features.
BEGINNERS START HERE:
👌 Get our HTML & CSS Course here:
www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?couponCode=CODING2GO
Checkout our website for more:
👉 www.coding2go.com
Host Your Own Website With Hostinger:
👉 www.hostinger.com/coding2go
✌️ And get a huge discount with our code: CODING2GO
#cssonly #csstricks #webdevelopment
RELATED CONCEPTS YOU SHOULD LEARN:
How to code an Accessible Navbar: th-cam.com/video/m7YDWNz65iI/w-d-xo.html
CSS Flexbox: th-cam.com/video/bbaKrRU4MVk/w-d-xo.html
JavaScript: th-cam.com/video/WnpyUeKVM94/w-d-xo.html
Todo App Project: th-cam.com/video/THEKW1gITJI/w-d-xo.html
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS ONLY
✔ CSS Solution without JavaScript
✔ Responsive Web Design
✔ CSS Tricks
✔ css tips
✔ css tips and tricks
✔ responsive css tricks
✔ modern css tricks
✔ modern css features
✔ css min() function
✔ how to use min function in css
✔ how to use clamp() function in css
✔ css clamp
✔ aspect-ratio property
✔ how to make images responsive
✔ how to make padding responsive
✔ how to make responsive font-size
👉 If you want to learn more get our CSS complete course here:
www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?couponCode=CODING2GO
มุมมอง: 62 328

วีดีโอ

How I Code INSANELY FAST in VS Code - Emmet Tutorial
มุมมอง 12Kหลายเดือนก่อน
Emmet Abbreviations Tutorial for beginners to code faster in visual studio code with HTML code snippets and code completion that boost productivity and coding speed in html and vs code. In this video you will learn everything about emmet abbreviations in visual studio code and all the shorthands to generate html code insanely fast in vs code. 👌 Become a Member to Support our Channel: th-cam.com...
Build Navbar Menus That Actually Work for Everyone
มุมมอง 23Kหลายเดือนก่อน
Get started with Miro: miro.pxf.io/xLL1ev How to use Aria Attributes and Responsive CSS to build an Accessible and Responsive Navigation Bar Menu using HTML, CSS and JavaScript. You will learn how accessibility works in HTML using aria-attributes like aria-expanded, aria-controls, aria-hidden, and of course how to make a navbar responsive using Flexbox and media queries. This responsive navigat...
Learn CSS Nesting in 4 Minutes (Pros & Cons)
มุมมอง 9Kหลายเดือนก่อน
CSS Nesting is revolutionizing how we write stylesheets by enabling selectors to be nested within other selectors-a feature once exclusive to preprocessors like SASS and now supported natively in CSS by all major browsers. In this quick and practical video, we'll cover CSS Nesting syntax, its pros and cons, and essential tips for working with descendant selectors, pseudo-classes, and the ampers...
Why I don't use flex-wrap anymore (and what to use instead)
มุมมอง 52K2 หลายเดือนก่อน
Grid Wrapping Explained: th-cam.com/video/3T0gjtXRNC0/w-d-xo.html There are a few problems with flex-wrap which we will address in this video. I am also going to show you three alternatives to use instead of flex-wrap, because I found that they work a lot better in some situations. Learn about media queries, grid wrapping and a smooth javascript slider. 😎 Become a Member to Support our Channel:...
The most popular Flexbox property explained in 4 Minutes | CSS flex shorthand
มุมมอง 41K2 หลายเดือนก่อน
Learn how to use the flex shorthand in CSS Flexbox to create responsive layouts faster with CSS Flexbox. This one line of code can improve your Flexbox layout fast and easy. flex: 1 1 0; is one of the most popular flexbox pro tips. Understand the meaning of flex 1 1 0 and how the flexbox properties flex-grow, flex-shrink and flex-basis work. 😎 Become a Member to Support our Channel: th-cam.com/...
Why you should start using ARIA Attributes in HTML
มุมมอง 28K2 หลายเดือนก่อน
Learn ARIA in 5 Minutes | HTML Accessibility Tutorial for beginners 😎 Become a Member to Support our Channel: th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin Learn how to use aria-attributes like aria-label, aria-labelledby, aria-expanded and aria-controls in HTML to make your websites more accessible and boost your Accessibility score. Knowing how to use ARIA attributes in HTML is an impor...
Avoid THESE 5 JavaScript Beginner MISTAKES
มุมมอง 44K3 หลายเดือนก่อน
Watch this next: th-cam.com/video/PojpwEbOQJg/w-d-xo.html 😎 Become a Member to Support our Channel: th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin In this video, we explore five common beginner mistakes in JavaScript and how to avoid them for better, cleaner, and more efficient code. Whether you're just starting out or looking to improve your JavaScript skills, understanding these bad prac...
Why inline-flex is my new favorite display value
มุมมอง 115K3 หลายเดือนก่อน
Learn how display: inline-flex can improve your CSS flexbox layouts In this video, you'll learn why display: inline-flex is my favorite CSS property for Flexbox layouts. While traditional block and inline elements control element alignment on a webpage, using display: flex can disrupt sibling behavior and cause layout issues. That's where inline-flex comes in! It combines the flexibility of Fle...
10 CSS PRO Tips and Tricks you NEED to know
มุมมอง 126K3 หลายเดือนก่อน
😎 Become a Member to Support our Channel: th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin 👉 Get our HTML & CSS Course on Udemy: www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referralCode=8054BF2C4D86FC75DB00 In this video you will learn 10 CSS Tricks for Beginners and Advanced Developers that want to learn modern css concepts. These 10 css pro tips can boost your...
How to use map() filter() reduce() | JavaScript Array Methods Tutorial
มุมมอง 17K3 หลายเดือนก่อน
Most important Array Methods Explained for Beginners | Learn Map, Filter, Reduce in JavaScript with Examples | Use array methods instead of foreach. Become a Member and get access to our udemy course 👉 th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin *Check out our website*: 👉 www.coding2go.com * Get our CSS Udemy Course*: 👉 www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-boo...
JavaScript Arrays Crash Course Tutorial for beginners
มุมมอง 4.4K4 หลายเดือนก่อน
Learn how to create arrays in javascript | How to add and remove array elements | How to loop over arrays using a forEach Loop 😎 Join our Membership to Support our Channel: th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin Thanks to all of you, who already support our work 💙 👉 Get our HTML & CSS Course on Udemy: www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referra...
Javascript forEach method explained in 4 Minutes for beginners
มุมมอง 9K4 หลายเดือนก่อน
Understand ALL THREE parameters of the forEach method and how to use them to iterate through arrays in javascript Learn more about Arrays: th-cam.com/video/do3a2tmlabw/w-d-xo.html Learn how to iterate through arrays with the forEach method in js | 😎 Join our Membership to Support our Channel: th-cam.com/channels/GpoeEhUBQBaaKZ_a8HB67Q.htmljoin Thanks to all of you, who already support our work ...
Build a Responsive Sidebar Menu with Animated Dropdowns | HTML CSS JavaScript Project
มุมมอง 103K4 หลายเดือนก่อน
Collapsible Sidebar Menu | Source Code | Dropdown Transitions | Bottom Navigation Bar on Mobile Devices | HTML, CSS, JavaScript Project 👉 Get our HTML & CSS Course on Udemy: www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referralCode=8054BF2C4D86FC75DB00 In this video you will learn how to use modern css and javascript concepts by building an html, css and javascript ...
How to create RESPONSIVE Layouts with CSS GRID
มุมมอง 90K5 หลายเดือนก่อน
Responsive Sidebar, Navbar, Main, Footer Layout, How to use CSS Grid Layouts for beginners | Responsive CSS Grids with grid-template-areas, fractional units and media queries. Learn more about CSS Grid in our course: 👉www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referralCode=8054BF2C4D86FC75DB00 Learn CSS Positions in 4 Minutes: 👉th-cam.com/video/YEmdHbQBCSQ/w-d-xo....
Tooltip Hover Transition for Social Media Icons HTML & CSS Tutorial
มุมมอง 19K5 หลายเดือนก่อน
Tooltip Hover Transition for Social Media Icons HTML & CSS Tutorial
Create Responsive CSS Grid Layouts with GRID WRAPPING
มุมมอง 89K5 หลายเดือนก่อน
Create Responsive CSS Grid Layouts with GRID WRAPPING
Learn CSS Flexbox in 20 Minutes (Course)
มุมมอง 357K5 หลายเดือนก่อน
Learn CSS Flexbox in 20 Minutes (Course)
Learn CSS in 7 Days | Course Announcement
มุมมอง 21K5 หลายเดือนก่อน
Learn CSS in 7 Days | Course Announcement
Create a Dark Mode Switch with HTML, CSS, JavaScript
มุมมอง 51K6 หลายเดือนก่อน
Create a Dark Mode Switch with HTML, CSS, JavaScript
Learn CSS Border Animations in 6 Minutes
มุมมอง 287K6 หลายเดือนก่อน
Learn CSS Border Animations in 6 Minutes
Learn CSS :not() and :has() selector in 6 Minutes
มุมมอง 15K6 หลายเดือนก่อน
Learn CSS :not() and :has() selector in 6 Minutes
Login & Signup with HTML, CSS, JavaScript (form validation)
มุมมอง 53K6 หลายเดือนก่อน
Login & Signup with HTML, CSS, JavaScript (form validation)
Learn JavaScript EventListeners in 4 Minutes
มุมมอง 36K6 หลายเดือนก่อน
Learn JavaScript EventListeners in 4 Minutes
BIG NEWS "How to Center a Div" finally answered (new css property)
มุมมอง 28K6 หลายเดือนก่อน
BIG NEWS "How to Center a Div" finally answered (new css property)
Learn CSS ::before and ::after in 4 Minutes
มุมมอง 250K6 หลายเดือนก่อน
Learn CSS ::before and ::after in 4 Minutes
Learn CSS Positions in 4 minutes
มุมมอง 163K7 หลายเดือนก่อน
Learn CSS Positions in 4 minutes
Learn CSS Animations in 9 Minutes
มุมมอง 83K7 หลายเดือนก่อน
Learn CSS Animations in 9 Minutes
These CSS PRO Tips & Tricks Will Blow Your Mind!
มุมมอง 551K8 หลายเดือนก่อน
These CSS PRO Tips & Tricks Will Blow Your Mind!
Build & Deploy a TODO APP with JavaScript
มุมมอง 32K10 หลายเดือนก่อน
Build & Deploy a TODO APP with JavaScript

ความคิดเห็น

  • @agold77
    @agold77 7 ชั่วโมงที่ผ่านมา

    This is very nice

  • @FundamSrijan
    @FundamSrijan 8 ชั่วโมงที่ผ่านมา

    0:43 oooooooooooooooo

  • @RasenBunkai
    @RasenBunkai 9 ชั่วโมงที่ผ่านมา

    ty 4 the explanation you're awesome dude <3

  • @cinephilia1252
    @cinephilia1252 11 ชั่วโมงที่ผ่านมา

    Loved it!!!!! Count me in as a subscriber!!

  • @westfield90
    @westfield90 11 ชั่วโมงที่ผ่านมา

    Superb

  • @webtech996
    @webtech996 14 ชั่วโมงที่ผ่านมา

    awesome! this video is helpful for me. thanks bro code opps haha

  • @FrankDicaprio-e1w
    @FrankDicaprio-e1w 15 ชั่วโมงที่ผ่านมา

    Very informative

  • @joelherrador283
    @joelherrador283 17 ชั่วโมงที่ผ่านมา

    thanks to that guy, i will pass my exam <3

  • @raviel498
    @raviel498 18 ชั่วโมงที่ผ่านมา

    This is probably the best navbar video I've watched. Always struggled to make a good mobile menu, but i also learn a lot in term of accessibility.

  • @harshitkumar3816
    @harshitkumar3816 18 ชั่วโมงที่ผ่านมา

    ta

  • @canProg
    @canProg 20 ชั่วโมงที่ผ่านมา

    Very nice ! Thank you. Very clear and direct explanations.

  • @HarlandGartley
    @HarlandGartley วันที่ผ่านมา

    Just what I was looking for. Well explained without any blurb or annoying music. Great stuff! Thanks!

  • @dee23gaming
    @dee23gaming วันที่ผ่านมา

    Why didn't you use the <img> tag, and simply point to the external SVG file? Much simpler and cleaner that way.

  • @adityapatil1361
    @adityapatil1361 วันที่ผ่านมา

    Nice video you can explain about inert attribute ❤

  • @freddymazenge1462
    @freddymazenge1462 วันที่ผ่านมา

    Best Tut Ever

  • @dariel5911
    @dariel5911 วันที่ผ่านมา

    Why you add border radius 1000px, not is the same put in 50px?

  • @isaacgarcia2745
    @isaacgarcia2745 วันที่ผ่านมา

    The grid solution is great if you have multiple items but when you only have a few the fraction will grow too big and take the whole container

  • @isaacgarcia2745
    @isaacgarcia2745 วันที่ผ่านมา

    The problem comes when you only have one element in the grid, lets say I want to display user content if the user only have one element it grows to the whole screen

  • @EmilioMalca-e2e
    @EmilioMalca-e2e วันที่ผ่านมา

    very useful. My first question is why the onclick wasn't done in javascript but in the HTML directly? isn't that a bad practice? I am just learning sorry I have tons of doubts. I think that will be a good practice for me. Doing it on the javascript file instead of the html.

  • @chapterx2.0
    @chapterx2.0 วันที่ผ่านมา

    I AM SO HAPPY I COMPLETED YOUR UDMEY COURSE IT WAS REALLY HELPFULL FOR BEGINNERS

  • @NejlaBjelanovic
    @NejlaBjelanovic 2 วันที่ผ่านมา

    can someone send the whole code

  • @NejlaBjelanovic
    @NejlaBjelanovic 2 วันที่ผ่านมา

    Can someone send the whole code

  • @habibou3057
    @habibou3057 2 วันที่ผ่านมา

    Très utile, merci beaucoup 👍

  • @NerdyCodeCrafter
    @NerdyCodeCrafter 2 วันที่ผ่านมา

    thanks for the css tips bro

  • @db2360
    @db2360 2 วันที่ผ่านมา

    Im building my first website and this mf build a similar website within 10 minutes and ive been working on mine the last 10 days😂😂😂

  • @tobiaszos1349
    @tobiaszos1349 2 วันที่ผ่านมา

    omg so nice thanks a lot :)

  • @ibrahimkapadwanchwala4231
    @ibrahimkapadwanchwala4231 2 วันที่ผ่านมา

    in my case the pseudo elements are not visible . can somebody help me?

  • @Professional-Coding1
    @Professional-Coding1 3 วันที่ผ่านมา

    your videos is soo useful

  • @DMC888
    @DMC888 3 วันที่ผ่านมา

    If you're having trouble getting this working in an existing site, it could be caused by your border-box reset as the top of your CSS. If you have the usual box-sizing: border-box set for all elements is doesn't allow the animations space to render. Adding box-sizing: content-box to .card fixes this.

  • @pogiakolagi1909
    @pogiakolagi1909 3 วันที่ผ่านมา

    Hi, why do you declare the onclick in the html when you already have a function for the open and close of dialog? Is this for better performance?

  • @dfer26
    @dfer26 4 วันที่ผ่านมา

    Is it possible to this only on the Fonts?

  • @madman3727
    @madman3727 4 วันที่ผ่านมา

    can someone help me with javascript section, I know basics and made a calculator myself before but I am so much lost after he started making so many functions and I wast not able to keep up with him.

  • @akshatjain1221
    @akshatjain1221 4 วันที่ผ่านมา

    Can you offer a course of javascript?

  • @LEGENDsgameplays-
    @LEGENDsgameplays- 4 วันที่ผ่านมา

    There should be a series of this topic.

  • @Farhan949
    @Farhan949 4 วันที่ผ่านมา

    which live server do you use? please tell , i want a fast live server which changes as i type❤

  • @iniyankarthik4008
    @iniyankarthik4008 5 วันที่ผ่านมา

    Thanks a lot brother for the free class.. A fan from India 🇮🇳 🤝

  • @Farhan949
    @Farhan949 5 วันที่ผ่านมา

    what live server you use please tell❤

  • @muhozaclovis2898
    @muhozaclovis2898 5 วันที่ผ่านมา

    this was awesome mn thx alot

  • @trimalakismeno
    @trimalakismeno 5 วันที่ผ่านมา

    Great explanation, thank you!

  • @fullStackInKannada
    @fullStackInKannada 5 วันที่ผ่านมา

    Very nice video, I really liked it :)

  • @realfchen
    @realfchen 6 วันที่ผ่านมา

    OGM, dude, you are good.

  • @shahidulhasansarker
    @shahidulhasansarker 6 วันที่ผ่านมา

    i learned thanks man

  • @m4adz766
    @m4adz766 6 วันที่ผ่านมา

    Thème name please ?

  • @SakaPaulo
    @SakaPaulo 6 วันที่ผ่านมา

    Thank you so much!

  • @Farhan949
    @Farhan949 6 วันที่ผ่านมา

    how did u do css in vsc like there are 2 files , and how did u open the web page side by side , please tell❤

  • @ArnavCoding-b7h
    @ArnavCoding-b7h 7 วันที่ผ่านมา

    3:12 New icon

  • @chapterx2.0
    @chapterx2.0 7 วันที่ผ่านมา

    I AM AMAZED BY THE WAY YOU WORK YOU DO NOT JUST READ OUT THE CODE BUT THE WAY YOU ADD CODE AND THEN REMOVE IT IF NOT NEED FOR BETTER UNDERSTANDING