Redesigning VS Code's Website With Inspect Element

Redesigning things through the dev tools is a great way to learn a lot more about how they work, and the real power of them, and VS Code has a pretty ugly home page, so I thought it would be fun to try and redesign it only using my dev tools 😀

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:46 - Taking a look at what we’re starting with
00:56 - The hero area
04:17 - The 4 icons
05:11 - Fixing the line-heights
06:14 - CSS Demystified
06:50 - The testimonials

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[NotGeri]

Imagine you are several hours into the redesign and you accidentally refresh :(
Great content as always!

[frittex]

I like your take on the design, it makes the website feel more alive

[ChiriVulpes]

I like the hero change from an aesthetic standpoint but I don’t think your reasoning with the heading and button fighting works — the heading and button just look like completely separate contexts, the heading being big and first, and the button feeling like the primary actionable content. I also think the buttons beneath the hero were meant to be shown with the hero, quick links to features visible on all common desktop resolutions. I think before your hero changes and associating those buttons more with the below content, those buttons weren’t necessary to have more padding on.
The weirdest change you made is the testimonials though, I don’t understand why you’d want to emphasise user avatars or names anywhere near that much… it’s user _testimonials_, not user _profiles_. You’ve styled them like someone could style a list of team members or something. Also this page doesn’t use gradients like that anywhere else so it doesn’t fit for that reason either.
CSS redesigning live sites is a cool concept (and something I’ve done a lot of myself for sites I frequent) but it would be cool if for future episodes like this you put a greater emphasis on understanding what the requirements and intention of the page likely is, rather than focusing primarily on the look. I think it’d lead to some more focused redesigns!

[averageguy]

Mate, you did a great work! Learned loads seeing this as usual. Keep the designs coming! Cheers! 👊🏽

[xorlop]

I like this type of redesign because it is actually easily actionable. You mostly only working with what already exists on the page and working with the styles that already exist... very creative!

[mikehenry]

Waiting for the person who designed VS Studio's site to chime in.

[VladdyHell]

Imagine having a sudden power outage while doing this video💀

[JDalmasca]

Feels like that testimonial section would have been a good place for a grid with a container query to adapt the layout!

Would love to see your take on existing pages that are less content driven and more interaction driven (e.g. e-commerce). Amazon's got a super busy and bloated product page layout. Maybe a "Let's Redesign [X]" would be a good series to try out! I'd love to see how other designers take on existing sites from essentially nothing.

[Xe]

When experimenting with styles in the browser, is there a way to save your changes to a file so you don't lose your work?

[ChrisMochinskiMusic]

*break room at Microsoft’s branch office in Lake Horn, Mississippi*

“HEY DAVE!!!” the senior-most front-end web dev hollers across the barren 3rd floor of the building as he takes his fourth shot of tequila at 1:44 PM on a Tuesday. “DAVE!! GET OUT HERE! THAT KEVIN GUY HAS A NEW VIDEO! HE’S GOING THROUGH YOUR MARKETING SITE CODE!!”

*Dave bursts from the men’s restroom - which has been repurposed as a server room - with a jar of mayonnaise in one hand and a plastic spoon in the other*

“AH CRAP. DOUG’S GONNA KILL ME.”

*Doug suddenly falls through the ceiling, naked*

[justsample]

to be honest, you made almost no changes and the result looks uglier; vs code's website looks relatively fine in my opinion, you could choose a different site and make way more changes - there's a lot of websites that are in like top 100/1000 in the world and look terrible

[giorgichkhikvadze]

One question! Why do you use margin-block-end instead of margin-bottom? :D

[briankgarland]

Percentage to the rescue! That's why I still use percentages quite often.

[jaya]

Hi Kevin, first of all your channel is a blessing and a master piece.
Second, I would like to ask for your thoughts about this AI revolution that is coming.
I am afraid that all of my work, learning to become a designer and developer is obsolete and loss of time.

Please tell me it isn't so!

Please will you address AI revolution topic soon in a video because I know that a lot of people have the same worries.

[michaelnorton]

Hi Kevin, great video as always!!😎

Kevin could I request a video tutorial please on how to make a multi-level slide-out menu (similer to 'mmenu'). I've seen so many on a single level or with expanding drop-downs, but hardly any on multi-level ones which is so surprising considering their popularity!!🙏🏻

[mityukov]

I feel the testimonials section a bit off. The whole page is all "quadratish", and here's this fuzziness at the bottom if the images, that just doesn't match

[shanedonlon]

This was actually a fun little experiment to watch. I love seeing what people can do with the same HTML (similarly to CSS Zen Garden). It's always super interesting.

[MrMairu]

What I learned from this video is that I can drag elements around in the Dev Tools! I never knew that! 😳😳😳

[MarcHoekstra]

I like to use the golden ratio line-height 🙈 line-height: 1.618;

[inostranec]

the Dev tool is the worst thing for coding that I know. This one is so bad that I often get stuck on it