Exploring Responsive Web Design with SCSS, Flexbox and Grid

Recreate a website for a hands-on deep-dive into modern web layout techniques

Exploring Rover.com: Responsive Web Design with SCSS, Flexbox and Grid — I recreated the Rover homepage using only HTML and CSS (See my Rover page here)

Recreating an existing webpage using modern responsive web design techniques is a great way to sharpen your skills.

Stretch your boundaries – recreating a webpage’s structure, content, and layout challenges you to engage different skillsets and experiment with code in ways you might ordinarily avoid.

Practice any time you want – choose a website with the features you want to explore and see how closely you can recreate it using only the core elements and capabilities of HTML… or other technologies if you want to.

Be your own judge – get as close as you can to the original design or improve upon it how you see fit. The goals are yours alone.

I already do a lot with WordPress, so I wanted to go raw and recreate a complex responsive web design layout from the ground up using only semantic HTML, SCSS (Sass), Flexbox and CSS Grid.

No WordPress, no Joomla, no templates. Just VS Code and a browser.

I selected the Rover.com homepage for my responsive web design study

I gravitate to user-friendly design so it was important to choose a website that shows empathy and respect to its users.

Rover.com was an obvious responsive web design choice because I’ve used their services and have first-hand experience of their site on multiple devices.

Their site makes a great study because you can see how the content and structure has been optimised to reduce friction and ease the user into taking action. This is a site that fully understands who its users are.

The site has a clean, complex yet deceptively simple layout that’s just perfect to get your hands dirty with Flexbox and CSS Grid for some responsive web design practice.

Take a look at the finished product

My version of the Rover site was created mid-2022 so there might be a few differences if Rover has updated their website since then.

Original Rover: https://www.rover.com/uk/

My version of Rover: https://rover-homage.wednesdaygenius.com/

See my code on Github: https://github.com/wednesdaygenius/rover-homage

I think I did okay, what do you think? 🙂

Note: I used Rover fonts and icons for educational purposes in my responsive web design study as I recreated their homepage. I haven’t uploaded the Rover font files to Github because of copyright concerns. But you can find them yourself through Developer tools the same way I did.

My methodology

It was a lot of work, but once you get a structured methodology in place, you can work through it in manageable chunks and finish each session with some progress.

Objectives

Get clear on what you want to achieve with your project because that sets your boundaries.

I wanted to create a visual replica of the homepage using SCSS, Flexbox and Grid. I wasn’t concerned with studying their code to see how they’d done it because I wanted to do it my way.

Plan and structure

I examined the page visually and mapped the sections on the page and how they adapt across different screen sizes.

Using Developer tools, I found the fonts, breakpoints and styling elements like colours and font sizes to ensure I could match the look and feel.

HTML skeleton

I created a basic skeleton structure using semantic HTML incorporating the sections I’d identified – Navigation, Hero, Services, Testimonials etc

I padded out the skeleton structure for each section trying to organise the hierarchy of HTML elements and CSS classes in a way that would best serve a responsive web design. This would be fine-tuned as the build went on.

I designed the page section by section. The trickiest part was getting the hierarchy of HTML elements correct for the responsive web design. You want to avoid code repetition and you want to stay lean as much as possible.

Commenting the code as you go is an invaluable way to keep tabs on where you are and what needs to be done. The comments can be deleted afterwards, of course.

CSS styling

Styling with CSS is second nature but laying it out using SCSS was something new at the time. I’m glad I took the time to learn though because it’s so much more streamlined. Using variables and nesting makes CSS coding more efficient, readable and reusable.

I’ve included my SCSS file in my Github if you want to take a look.

I started with the typography, colours and basic layout properties. Then gradually built up the styling to match the original website, paying attention to positioning, margins and padding.

The biggest surprise was that all the Rover icons are actually custom font they designed in SVG and converted to font files.

Responsive elements

My biggest tip here is to give the page a unique colour at each breakpoint. This way, when you’re stretching your browser in and out, you get immediate visual feedback when you enter and leave a breakpoint. It makes debugging so much easier.

You cannot step into the same river twice

Knowledge and experience is always changing and the way you do something today is different from the way you’ll do it tomorrow.

As this task went on, I noticed my code was getting tighter and I was approaching things differently from the way I had at the start.

It’s a shame I didn’t journal this responsive web design project in Github with all the versions because now, the challenges faced and solutions discovered have been lost to the mists of time and only the finished product remains.

But I’m happy to have emerged a more rounded developer.

Original Rover: https://www.rover.com/uk/

My version of Rover: https://rover-homage.wednesdaygenius.com/

See my code on Github: https://github.com/wednesdaygenius/rover-homage