Skip to content

Working on the Project

Jump to bottom
Jon Andre Briones edited this page Jul 30, 2025 · 15 revisions

Use the links to jump to your appropriate skill level:

Or to the area you'll be working on:

Starting out

Welcome to this CSSS Project and thank you for showing interest! If you're here to learn about web development or just want to pad your resume with projects then this is a great place to start. The W3 Committee will do their best to help you start your journey. Before working on the Angular portion of the project, it might help to understand HTML/CSS/JavaScript. We recommend working on some static site projects before moving on to Angular. The point of this project is to help people understand web development at a more fundamental level; skipping the basics is not recommended.

It's a little bit overused, but try making a TODO app using HTML/CSS/JavaScript only.

New to Angular

I recommend doing the Angular tutorial if you're completely new to Angular.

If you think you have a solid understanding, try making a TODO app in Angular.

If you're coming from a different framework and have a solid understanding of how they work, this video is pretty good. If you want just a basic understanding of components and services watch it starting from here up to about 1:07:45.

Then, I recommend doing this Pokedex React project, but in Angular. Use the video as a guide or ask the W3 Committee if you get stuck.

Main Site

  • Number 1 rule is to ask questions if you're not sure about something. Angular is highly-opinionated, meaning there's usually a "correct" way to do something, so sometimes it's better if we just tell you why some things are done a certain way
  • Utilize the Angular CLI when any Angular building block (components, services, directives, etc.), so that all of your code is properly set up

File naming conventions

Files names should be kebab-case. Sass files should be prepended with an underscore (_) to indicate they're a partial. This ensures the Sass compiler doesn't create redundant values.

Generating Angular building blocks

This mini-guide explains the workflow and commands you'll use to contribute to the main site. If you want to know more about what these commands do the Angular docs are a great reference for this section. The basic building blocks of Angular are components, services and directives. You can use the Angular CLI to generate these files in the current directory you're in.

ng g[enerate] component/service/directive # the [enerate] part is optional, so `ng g component` generates a new component
# Adding `-h` will print out the help instructions.
# Adding `--dry-run` will tell you what files it will create/edit, but not do it.

For example, if you're working on a new component, you would do:

cd src/<path/to/parent/folder> # Make sure you're in the parent folder that you want to generate the component in
ng g[enerate] c[omponent] my-component # The `ng g c` is equivalent to `ng generate component`
# If you want to see what will change before you actually do it add on --dry-run
# ng generate component <name> --dry-run

This will generate the classic trio and a test file inside the folder src/<path/to/parent/folder>/my-component/

  • my-component.component.html Template (HTML)
  • my-component.component.scss Stylesheet (CSS)
  • my-component.component.ts Controller (TypeScript)
  • my-component.component.spec.ts Test file

Now you can import this component into other components.

Static Sites

Depending on what you're doing, you'll most likely be creating a trio of HTML/CSS/JavaScript files and placing them in public/<feature>. Read the feature specification/issue to figure out what needs to be done and if there is any confusion just ask!

Clone this wiki locally