Hello there!
Two days ago, I accidentally spilled a drink on my laptop, which led me to have it repaired. After eagerly waiting for the repair, I was thrilled to have my laptop back in even better condition than it was before the drink incident. With it finally working again, I could resume my activities without any hindrance.
To kickstart my renewed productivity, I decided to take on a challenge at devChallenges.io. While the project seemed straightforward, it presented its own set of challenges. In this article, I aim to share my experience and shed light on good coding practices.
One common issue that developers encounter is the inconsistency in how webpages display across different devices, causing frustration and denting their self-esteem. It's akin to ordering a meal and receiving something completely different.
The particular challenge I took on was designing a 404 web Page Error UI, typically displayed when a web page cannot be found due to incorrect input or other reasons. For this project, I used a design from a FIGMA file on devChallenges.io, with the expectation that it should be implemented accurately. However, upon testing, I noticed a slight discrepancy in the output – "Things didn’t look as they should on the laptop."
To investigate and rectify this issue, I turned to the developer tool known as "inspect," which allowed me to assess how my webpage responded on various screen sizes. Often, the root of the problem lies in the use of breakpoints, essentially media queries, that enable you to adjust elements on your webpage to suit different devices.
Without properly defined breakpoints, your webpage may appear fine on a desktop or laptop but become frustratingly unresponsive on mobile devices and tablets. To resolve this, I made necessary adjustments to my breakpoints, and the responsiveness of the webpage was perfect.
I have a deep appreciation for responsive web design, as it not only enhances user comfort but also attracts more traffic to your website.
Here are the media query rules I employed:
1. Styles for desktop screens (min-width: 1024px)
```css
@media screen and (min-width: 1024px) {
/* Add your desktop-specific styles here */
}
```
2. Styles for tablet screens (min-width: 768px to 1023px)
```css
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* Add your tablet-specific styles here */
}
```
3. Styles for mobile phones (max-width: 767px)
```css
@media screen and (max-width: 767px) {
/* Add your mobile-specific styles here */
}
```
These media queries are essential for accommodating different screen sizes. The 'min-width' media feature caters to screens larger than the specified pixel value, while 'max-width' is designed for screens smaller than the specified value.
When implementing a design, paying meticulous attention to detail, even in a seemingly simple project, is as crucial as relishing your favorite meal. Just as you want to savor every bite of your meal, you won't be satisfied if your implementation goes awry.
In this context, selecting the appropriate media query is paramount. So, from this point onward, prioritize building responsive webpages, and you'll thank yourself later as both a developer and a designer.
I'm proud to say that the images below showcase the solutions to the challenge, and I believe I did an excellent job!
Here's to more challenges and growth for all you dedicated developers out there. Have an amazing day!