Earlier this year I was fortunate enough to discover, and become part of, the Chingu Cohorts.
Here’s a medium article on what the Chingu Cohorts are, but suffice to say that it’s an online (Slack) community of individuals determined to be the best developers they can be and help each other along the way. It’s a place for learning, building, collaborating and motivating, and I feel lucky to have found it.
Recently, a group of Chingus started a Speedrun Challenge, which is basically up to a month spent building as many of the Free Code Camp (FCC) projects as possible to learn and master a particular stack. You can learn more about the Speedrun Challenge in this Medium article and this GitHub repo.
I’m starting a Speedrun today and will be working with the MEAN stack. Part of the Speedrun Challenge is to write a blog or Medium post for each project completed. This is my post for the Tribute Page.
Given that the Tribute Page is the first ‘Basic Development Project’ in FCC, it’ll be a very basic project consisting of one static page paying tribute to someone or something. To speed things up, I’ll be reusing the content from my original tribute to Thomas Edison.
Project Structure
The final part of the Challenge is to create one single page application (SPA) out of all the projects that you’ve created. With this in mind, I’ll be building all the individual FCC projects as one larger application with a single landing page.
I created the project using the Angular CLI by running the following code in the VS Code terminal (View->Integrated Terminal):
|
1 |
ng new fcc-portfolio --prefix fp --routing --style=scss --source-dir=client |
This sets up a project called “fcc-portfolio” in the current terminal directory. The various flags do the following:
- --prefix fp will prefix all the the component selectors with “fp” (default: app)
- --routing will generate a routing module (default: false)
- --style=scss will set the style file extensions to scss (default: css)
- --source-dir=client will name the source directory ‘client’ (default: src)
Big thanks to P1xt for pointing out the bottom 3 flags listed above. They definitely saved me some time setting up routing and Sass.
Once the project was up and going, it was quite easy to add the Tribute page using my previous project as a guide for content.
Currently, I have the app.component acting mostly as the <router-outlet> with the router serving up the LandingComponent and the TributeComponent as called for.
The LandingComponent will continue to act as the main landing page with links to all the various projects.
You can follow my code in this GitHub repo.
Biggest Challenge
For me, the biggest challenge here was design and making the page responsive. Maybe challenge is the wrong word… It’s certainly where I spent most of my time.
I’m fairly new to working with CSS Grid and Sass, so incorporating those and making the page fully responsive took more time than it should have. But hey, isn’t that why I’m doing this??
You can see the final product above. I’ve decided to call this good enough for the time being (with respect to design) and move on. I’ll come back in the end and work on getting the design to look consistent throughout all projects.
Alright, off to my next project.
-Jeremy