Getting to d3.js: CSS
I made it past HTML in a tutorial!
Is it a habit yet?
Next on my journey to mastering d3.js is to learn CSS. Continuing on with the Web Development Bootcamp course on Udemy, this started with learning what CSS is. Really quickly, CSS stands for Cascading Style Sheets and it is a really simple design language that handles the look and feel of a website by adding design elements to existing HTML.
Project 1- Color Vocab Website
The first thing I learned with CSS was how to add elements such as color, font size, and font weight to different HTML components such as ids and classes. Take a look at my first project (timely as I am also currently learning Spanish) that incorporates those learnings below!
Project 2- Margin, Padding, and Border
This was all about learning the CSS Box Model, which is a box that wraps around each HTML element and assists with design and layout. If you’ve ever inspected a web page in Chrome, you might have seen a box similar to the one on the right.
Below is my attempt to incorporate those learnings in a few <div> boxes!
Project 3- Motivational Poster
I’m not going to lie here, I took too much time off between practicing and had to google my ass off to remember how to do all of this, BUT that’s also kind of life as someone who writes code, right?
Anyways, this project was bringing together all of the above to create a motivational poster, you know those black background, white bordered things you’d see hanging up in school— here is my finished result and code!
Next Up: Intermediate CSS
