UI vs UX

User interface refers to the aesthetic design of the visual elements of your application. The colors, sizes, typography we are choosing. Complementing UI design is UX design, user experience, which is the design process that focuses on the usability of a product, with the goal of making the product intuitive and easy to use for the user.

Design Process

The design process is an iterative process which entails making mocks for different “user stories”. Everything is thought through from the perspective of the user, working through different flows that the user could enter.

Usually, a designer will receive a product spec of…


This lesson will be an introduction to HTML, CSS and pairing them together within React. We will do this by creating a navigation bar at the top of the page with some static data. I’ll walk you through the styles and classes that I use in mine, but I encourage you to make yours look and feel however you like.

HTML

HTML is the template language that allows us to put “HTML elements” onto the DOM. Think of HTML elements as the boxes, buttons, tables, links, etc that get displayed on a site. …


Now that we actually have our local application running it is time to start coding. First, we will install a code editor. Most of the Web Devs at DraftKings, along with myself, prefer VSCode. It’s great to use, nice to look at, and has a lot of different extensions you can take advantage of.

After we get set up with VSCode, we will run through some basic JavaScript / coding exercises to get our feet wet. The lesson will end with applying some of these coding exercises within React and actually displaying our solutions on the page.

Also, please use…


This lesson will be focused on getting our React App up and running with a beginner friendly Create React App framework. We will use Vercel for creating the project, triggering builds, deploying and hosting our application.

Vercel

There are many build and deploy tools out there. Vercel is especially easy to use, and can get you up and running in minutes. Lots of JS projects will have separate build and deploy tools, which can be useful in more sophisticated projects, but for the purpose of this class we will try to keep things as simple as possible.

Vercel offers a variety…


This lesson we will be introducing the command line. The command line is how we can navigate the files in our computer and run the programs that we will code. We will cover navigation, directory creation, file creation, writing to a file, and running a script.

Apps to Use

Mac Users:

  • Use Terminal (already installed)

Other OS:

Bread and Butter Commands

cd <directory-name> → stands for "change directory"

  • Supports tab completion. Start typing directory name and then hit tab when it is the only one that meets that pattern

ls → stands for "list"

mkdir <directory-name> → stands for "make directory"

Directory names are…


Hello, my name is Chris, and I am a web engineer at DraftKings who has been working with React and NodeJS a little over 2 years. I studied computer science at Cornell University, which taught me many valuable computer science principles, but exactly zero of the technologies I will be teaching through these posts. Unfortunately, the educational system has not caught up with where modern web development has gone, leading many institutions to teaching outdated technologies. My only web development class I took in college was taught in PHP.

Fortunately for whoever is reading this post, this course is designed…

Chris Haralampoudis

Full Stack JS Developer | DraftKings Sportsbook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store