Skip to content

Working on the Project

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

Use the links to jump to your appropriate skill level:

Starting out

Welcome to this CSSS Project and thank you for showing interest! If you're here to learn about how web development works 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.

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.

Main Site

When working on the main site, utilize the Angular CLI as much as possible. This is to ensure your code is scaffolded properly.

File naming conventions

Files names should be kebab-case. Sass files should be prepended with an underscore (_).

Angular quick reference

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.
ng generate component <name> --dry-run

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

cd src/<path/to/parent/folder> my-component # Make sure you're in the parent folder that you want to generate the component in
ng g[enerate] c[omponent] my # The `ng g c` is equivalent to `ng generate component`

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