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.
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 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.
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.
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.
cd <directory-name> → stands for "change directory"
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…
Full Stack JS Developer | DraftKings Sportsbook