Here’s a quick look at UX design in HTML and CSS

It’s Design Month at Technical.ly, so we’re seeking ways to go inside the process of how the stuff we see on the web and in the world gets created. For a quick demo in languages used for UX design — or user experience design for the uninitiated — I talked to a couple friends from Philly who use programs like Sketch with IOS or code in CSS. In this series of steps, Joshua Lynch and Corey Burgin show how coding on the backend becomes what you see on the front.

In step one, Lynch is building what you see when you land on a website from scratch in Visual Studio Code.

“This long file is the framework for what the entire page will look like,” said Lynch. “From here on out we will add styling or CSS (Cascading StyleSheet) which is in charge of making our basic HTML look prettier.”

(photo courtesy Joshua Lynch and Corey Burgin)

HTML, or Hyper Text Markup Language, is primitive by itself and needs CSS to give it the modern look of a website we’re used to. HTML alone gives us the looks of websites back in the late 90s and early 2000s.

“We override some of the basic functionality [with CSS] that HTML applies to our page,” said Lynch  “I do this because I want to have full control over how I display elements on my page, I do not want default styling or behavior.”

This is step two in the process of creating a website from scratch.

(Courtesy of Joshua Lynch and Corey Burgin)

“We see our styling start to take effect,” said Lynch. “From here on out we’ll begin to see the site begin to look like something that you’d visit on the web.”

Lastly, there’s wrapping up the kinks and adding some final touches to the mock up of a site.

(Courtesy of Joshua Lynch and Corey Burgin)

“The final first draft, you’ll notice that we stuck to a color theme of a goldish-yellow, black and white,” said Lynch. “We even added that color tint to images to make sure the pictures used feel as though they match the theme. This is the foundation of building a website frontend/UI using HTML and CSS.”

Check out Lynch and Burgin on Instagram for more UX design and coding tips: @codex125 and @corey_corisma, or their podcast Code Coffee & Culture at wherever podcasts are available.