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.

You can write the exact same HTML and CSS you're used to in this boilerplate if you want - but this template will allow you to explore some helpful new additions to your web development toolkit.

A basic introduction to Sass (SCSS)

Whoa. What's Sass? It's a preprocessor for CSS. It adds some really helpful tools that help you stay sane when you're writing more complicated CSS. The standard syntax for Sass is called SCSS, and it is written so that you can write plain old CSS - just like you're used to now! - right in an scss file, or you can use some new, helpful tools, like variables.

We're only going to learn the helpful parts of Sass in this class: partials, variables, nesting, and inline media queries.

This starter template allows you to work in Sass if you like. We won't be learning a lot of Sass in class, but you are welcome to explore it on your own. The file extension for Sass is scss. Whether you choose to use Sass or not, you will be writing your styles in the src/css/styles.scss file.

Technically, Sass is a compiled language. That means it goes through a preprocessor, and becomes regular CSS at the end. This template takes care of the build process for you, so you can explore using Sass if you want to organize your CSS into smaller, more manageable chunks.

I personally love Sass - it makes my life so much easier! I wrote the Extend/Inhertiance part of the Sass documentation. So as you can tell, Sass means a lot to me! But it is also an industry standard, so it is good for you to be aware of it. Don't feel like you have to learn it all - or even any of it! Only use the parts that help your team.

Steps to try

Resize this browser. What is changing at each breakpoint?
Look at src/css/styles.scss. 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.
Add a new partial for your homepage styles.

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 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.