DEV Community

Cover image for An Old Noob #2 - Cloud Resume Challenge, Responsive Design
Zachary Wilson
Zachary Wilson

Posted on • Edited on

3 1

An Old Noob #2 - Cloud Resume Challenge, Responsive Design

Thank you for joining me for the second installment of my journeys through beginner cloud development.

You probably guessed by now. Mobile scalability took a bit longer than i anticipated.

Quite a bit longer.

The reason for this is two-fold.

  1. I'm trying to stay as true to the tasks of The Cloud Resume Challenge as possible. This did not include learning Bootstrap. I've seen some really slick cloud resumes out there, a lot of which were developed with the Bootstrap framework. If i decide to explore web development further than this challenge, learning Bootstrap or something similar seems the intelligent decision.
  2. I'm using as much of my own code here as possible. I've never before written a CSS file from scratch, or designed a site using only on what i learned from W3Schools. I didn't want to drop in a Bootstrap template, i wanted to own what i'm publishing and learn from it. Thus i have to balance my impatience with my initial purpose for undertaking this challenge to begin with: to boldly go where no me has gone before.

If you're unsure where this ship is heading, allow me to introduce you to the wonderful world of viewports. Per Mozilla

A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc.
The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in.

It can sound pretty complicated. Especially the first time you look at just how many devices and viewports are out there. I spent more than a couple hours toggling different mobile viewports in my browser's developer mode trying to figure out why my resume looked as expected on my iPhone XR but not on my wife's iPhone 12 or my son's Pixel. Even after researching i was still a bit confused.

Ultimately, after numerous trials, errors, and comedies, i determined that i needed to modify my content width and margin sizes individually for various smaller screen sizes. In the interest of simplicity, i chose to stick with what i feel are the three most prevalent viewports in the wild: 360px, 375px, and 414px. I created an @media rule in my CSS for each of these sizes and...

Success!

Yay me

I'll take no shame in admitting my exhilaration when i loaded my local file to each viewport size in my developer console and saw my page render precisely as i've been wanting all these weeks. I didn't cry, but it was touch and go there for a moment.


Productivity Points

Huge thanks to the developers of JSFiddle - this site has saved me so much time and i can't recommend it enough for beginners to web development.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay