© 2022 Hashnode
#responsive-web-design
Day 43! TGIF! Welcome to an amazing day. Yesterday, I continued learning CSS Variables by creating new variables and giving them colors as their values, I also added fallback values, used the :root va…
Hello everyone, I hope everything is fine with you. In this piece, I'll discuss some ideas that I utilize while creating responsive websites. Padding/Margin Use em/rem/ percentages Flex-wrap Box-Sizi…
What does responsiveness mean? In simple terms, it refers to a design approach that causes a website to adapt to any screen it is being viewed on. So it could be viewed on say, a desktop, phone, or a tablet and it will look as good and acce…
It's been a while since I posted on here. But I'm still on the journey of web development, fear not. I've gone through essential CSS concepts and some next-level Javascript. But that's not what we're here to talk about. Today I was going …
Introduction The World Wide Web(WWW) opened the gates of creativity via the internet to everyone, not just scientists. It connected the world in a way that greatly facilitated people's access to knowl…
What is a picture tag and how to use it for Responsive Design The HTML5 element <picture> tag is intended to provide more flexible and highly functional responsive image. Rather than loading a single …
We are going to follow 3 main steps: html { font-size: 62.5% } Use "rem" instead of "px" Update media query Step 1 • Set the font size of html to 62.5% Step 2 • Use "rem" instead of "px" unit • …
I will be honest with you, I don't consider myself as a "CSS Sensei" or anything similar. Even though I have tried HTML & CSS years ago, it became more prominent in my life approximately 1.5 years ago…
Introduction HTML needs no introduction. HTML expands as HyperText Markup Language. It is the most popular and widely-used language for web application development. Created in 1991 by Berners-Lee, bu…
Let's say you wanted a button full width on mobile and regular width (auto) on desktop. You think you would do : <form> <div class="mb-3"> <label for="exampleFormControlInput1" class="for…
