CSS properties to improve your responsive design of web pageπ‘πͺ
π§΅π
1β£ Use Em / Rem
β Always try using em/percentage/rem instead of px, so that the text, images size adjust regarding the device-width
2β£ Padding/Margin
β we usually use a lot of padding when we make websites for desktops, to make them more attractive.
β While making it responsive for mobiles, tablets try decreasing the existing padding and margin.
3β£ Flex-Box
β using flexbox to align your HTML elements, such as <div> <p> provides the force elements that can wrap onto multiple lines according to their width.
4β£ Media Query
β Media query should be used to set width and height according to the breakpoints. Breakpoints refer to the width at which the websites look distorted.
5β£ Box-Sizing
β It resolves a lot of problems padding causes. Using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width because of padding
{ box-sizing : border-box ; }
6β£ Grid-Layout
β Reduced code bloat. Rather than creating extra HTML elements to contain your grid, columns and rows, your grid tracks are created within your style sheet.
Top Five udemy courses for web development π―π
π§΅π
some of the best list of courses that helps you to get started in the world of front-end development.
many people DM me where to start so these are courses for them who want to start or brush up their skills!!
01. The Complete 2021 Web Development Bootcamp
this course is created by @yu_angela, This course gives you a brief intro about the web development world, she discusses the full stack development this is the best course to get started