Prompts: What did you find the most challenging this week? What is something that you needed to look up and what solution did you find to resolve the issue?; Research an unfamiliar topic from the video and write a detailed blog post about your findings.
The most challenging thing this week was understanding all the fundamentals of CSS. To get a headstart on the Tribute assignment I began experimenting with styling using CSS code before we got into the lesson. Although I’ve gotten extremely close to replicating the page design, I still struggle to align everything properly. I have Googled, checked multiple coding practice sites, asked ChatGPT, and even asked my uncle and a friend for assistance to no avail. Each time I get one step forward, I seem to take ten steps backward when trying to implement the suggested alterations. Thus, I have yet to find a resolution to align everything to match the original Ada Lovelace website.
After watching the video, How to Code in 2022 – From Zero to Career-level on YouTube (https://www.youtube.com/watch?v=TwanFw93TUQ), there were a lot of unfamiliar topics discussed. However, I decided to focus my attention on media queries because, in today’s digital world, websites need to look great on all screen sizes, from smartphones to large desktop monitors. Media queries are the styling solution for that.
Media queries are a CSS feature (a computer language for laying out and structuring web pages) that allows developers to apply different styles based on factors like screen width, height, orientation, or resolution. Using media queries, you can ensure a responsive design that adapts smoothly to different devices. The basic syntax looks like this:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
The code above would change the background color to light blue when the screen width is 768 pixels or less, which makes it useful for mobile-friendly designs. They are commonly used to create flexible layouts, hide or show elements, and adjust font sizes for better readability. You can target multiple conditions using logical operators (a tool that combines or modifies true/false statements to create new ones) like and, or, and not. For example, the below rule would increase the font size only on screens between 600px and 1200px, ensuring better readability on tablets and mid-sized devices.
@media (min-width: 600px) and (max-width: 1200px) {
body {
font-size: 18px;
}
}
By mastering media queries, you can build websites that provide an ideal experience across all devices, improving user engagement and accessibility. The best part is, that there are so many free resources online to help you start experimenting with them today to make immaculate web designs. Here are some links to explore to deepen your understanding of CSS media queries, help you master media queries, and enhance your responsive web design skills:
- MDN Web Docs: Using media queries -> https://shorturl.at/1xedZ: This link provides a comprehensive guide that introduces media queries, their syntax, and how to use them to create responsive designs.
- W3Schools: CSS Media Queries -> https://www.w3schools.com/css/css3_mediaqueries.asp: On this link, you’ll find a tutorial that explains how to apply different styles based on device characteristics like width, height, and orientation, with practical examples.
- CSS-Tricks: A Complete Guide to CSS Media Queries -> https://css-tricks.com/a-complete-guide-to-css-media-queries/: This guide offers an in-depth look at media queries, covering syntax, common use cases, and practical tips for responsive design.
- GeeksforGeeks: CSS Media Queries -> https://www.geeksforgeeks.org/css-media-queries/: The article in this link, provides an overview of media query features, best practices, and answers to frequently asked questions.
Just like all things tech, learning media queries may seem tricky at first, but with practice, we’ll soon be creating websites that adapt beautifully to any screen, as we continue experimenting with curiosity and enjoying the journey of web development along the way.
Leave a Reply