Here's a quick look at UX design in HTML and CSS - Technical.ly Baltimore

Software Development

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

Freelance coders Joshua Lynch and Corey Burgin show how a website comes to life.

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.”

gif showing code and website

(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.

gif showing coding and website

(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.”

Advertisement

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

gif showing code and completed website

(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.


Donte Kirby is a 2020-2022 corps member for Report for America, an initiative of The Groundtruth Project that pairs young journalists with local newsrooms. This position is supported by the Robert W. Deutsch Foundation. -30-
Subscribe to our Newsletters
Connect with companies from the Technical.ly community
New call-to-action

Advertisement

Technically Media

Sign-up for daily news updates from Technical.ly Baltimore