Student Site Boilerplate

What do professional web development workflows usually have?

A text editor (VSCode or other text editor of your choice)
A version control system (Git/Github)
A way to access that version control system (Command line, Tower)
A package manager (such as npm), which requires node.js to be installed
Build tools that let you use the latest and greatest technology, which makes your life easier (Linters such as Stylelint and ESLint, compilers such as Sass and Babel, and module bundlers such as Webpack)

Most importantly, these tools are here to help and support you! You don't need to be an expert in them or even really understand them. There are people whose entire jobs are to put together tooling like this. That's not your job in this class, and that's why you're going to use a modern boilerplate so you don't have to do that work.

A basic introduction to modern CSS

Modern CSS allows you to do some neat things, including use variables and media queries. You don't have to learn these for this class, but you can use them if you want.

Steps to try

Resize this browser. What is changing at each breakpoint?
Look at src/css/style.css. What is new about what you see? What looks familiar?
Examine each new element one at a time. What is it for? Where is it coming from?
Change one color variable.

Why are we learning about GitHub?

There's so much to learn in web development today! That said, learning version control systems - especially Git, and the website GitHub - allows you to collaborate with a whole world of other web developers. You can even get involved with and contribute to the projects you are passionate about!

You don't need to be a programmer to be a great contributor. I contributed to the Sass language documentation because I love working with Sass, and I could see some places where it could be improved. You can see the two pull requests I opened to contribute to https://sass-lang.com/guide below.

What's super cool about this is I've never actually met or even spoken to the two people who approved my pull request. But by being genuinely helpful, I've made a personal connection to them and their project, so they may remember me later on. This is a great way to get involved and network in the web development community. Giving back your code to the community and making it open (so anyone can contribute to and modify it) is a big part of open source development. It helps the web grow and change quickly.

Linting: Like Autograding, but for the real world

In the first part of this semester, we used Autograding to help catch errors and make sure our code passed certain tests for an assignment.

In professional web development, this is a lot like linting your code to make sure it adheres to coding standards. Coding standards keep code consistent among teams. As a class, we will adhere to the Stylelint Standard Configuration, which uses a common set of coding standards that Google, Airbnb, and many other companies use. I have modified one rule, which is that I would like you to use tabs instead of spaces for indentation. They are much easier to edit and manage than spaces.

You should reference this list of rules when you see linting errors.

In the real world, there isn't Autograding - because every project is different, just like everyone's final project will be different, so there would be no way for me to write tests like "make sure you have at least one ordered list tag". Consider linting your new Autograding, and keep your code neat, tidy, and consistent!

Editing and Connecting to GitHub

You will want to connect to GitHub to make the most of this boilerplate.