Color Scheme

Frontend Developer

James Mason

I live in Lexington, KY, and I’m currently moving from the world of video editing into frontend development. Whether it’s a film timeline or a code editor, I’ve always loved the process of building something out of nothing. Lately I’ve been heads-down in HTML, CSS, and JS. I actually just put together a web-based calculator for a friend, and now I’m getting ready to dive into React. Feel free to look around and see what I’ve been working on. Check Jen's worksheet.

James Mason

Practical CSS Layouts

Starting with the basics of CSS and HTML, you'll progress through creating responsive designs for mobile, tablet, and desktop layouts. You'll learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists. You'll explore concepts like rem and em units, custom fonts, responsive images, and the picture element. By the end of the course, you'll have built three variations of a website, each increasing in complexity!

  • HTML
  • CSS
  • JavaScript
  • SVG
Magenta Lime layout, featuring albums, reviews, a playlist, and an audio interface.

Ultimate CSS Grid & Layout Techniques, v3

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code. You'll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts. Through hands-on CodePen exercises, you'll apply these techniques to real-world projects!

  • HTML
  • CSS
Grid-based layout with 3 columns and 4 rows, some merged, featuring planets and moons.

CSS Projects

Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques. You'll leverage CSS variables, flexbox and grid, inheritance, and responsive design strategies for supporting multiple device form factors. By completing these projects, you'll gain the confidence and refine your skills to tackle any HTML and CSS challenge in your professional path!

  • HTML
  • CSS
Our Team page featuring 6 images of people in 2 rows with social media icons overlapping each image.