Author: Jeremy Morgan
Welcome to the Code Portfolio Challenge, where we challenge you with a series of four projects over the year that help you skill up your code knowledge using hands-on projects that prepare you to build in the real world. These projects will also be valuable additions to your portfolio and will make great talking points during interviews!
What makes the Code Portfolio Challenge format different from most tutorial or project-style learning out there? We won’t tell you exactly what to do or how to do it. Like a real job assignment, the challenge is spec-based. You have to open the Google tabs and go down the rabbit holes to figure it out. But as with most challenges, it’s all about building up your skills and advancing to the next level of development, and I’m here to help you. Are you ready to join me in the first Code Portfolio Challenge: Build a resume from JSON?
Challenge Overview
| Challenge Topic | Programming |
| Challenge Creator | Jeremy Morgan |
| Challenge Goal | Create an HTML page from a JSON file |
| Challenge Outcome | Practice critical software problem solving and gain hands-on experience with front end development |
| Challenge Deadline | June 30, 2022 |
In the first Code Portfolio Challenge, we’ll build a website that displays your resume. Your website can showcase your name, contact information, personal statement, key points and job history. We could whip some HTML, format it and call it good, right? But we’re developers. We have to think about future scaling. We’ll use HTML to display the resume, but we want the data separated and stored in a JSON file. So the resume will be read by JavaScript and transformed into an HTML page. Some good styling would be nice, and bonus points if you can make it adapt to mobile devices!
Why is this important? If we store the data in JSON, we can later use that data in other ways. We could use some other method to write to the JSON and have it automatically update on the HTML page. We could use this data in another application. This decoupling of data and view means we can expand this project quickly and efficiently.
Challenge details
Here are the steps for this challenge:
- Create a JSON file with your job history in your own format
- Include information like your name, contact information, personal statement, key points and job experience
- Use JavaScript to render it to HTML (a front-end framework like Vue or React will save some time)
- Add it to your GitHub public repository and share your project in Discord
How you choose to turn JSON into a webpage is entirely up to you. Get creative! At the end of this challenge, you’ll have your resume up on a webpage for the world to see. You edit a JSON file and save it when you need to update it.
Of course, if you ever get stuck along the way, feel free to reach out to your peers in our Discord server! We’ll also be releasing a video for this challenge where I’ll show you how I built my solution. Keep an eye out for that—it’ll come about halfway through this challenge!
As an expert-level step, you could use GIT to deploy the site automatically when you commit changes, or build it in Vanilla JavaScript.
Learning resources
If you’d like to learn more about the technologies we’ll use for this challenge, check out these resources:
- HTML Basics
- Building Websites with HTML, CSS, and JavaScript: Getting Started
- Creating data models in JSON
- Hands-on JavaScript Project: JSON
I also recommend signing up for Pluralsight Skills’ free-tier plan! Every month, there’s a new rotation of free courses to help everyone learn and upskill!
I’ll submit my own entry into the challenge, and do a live stream where I walk through it with an audience. I hope you’ll join!
How to submit your challenge
The first step is to sign up for a free GitHub account (if you don’t already have one). Create a public repository with your source code to submit to us. You’ll also need to host it on a static hosting site. Here are a few options:
There are many options out there, and you can set it up wherever you like as long as it’s publicly available.
Once that’s done, post a link to your public repository in the designated Discord text channel along with a link to your LinkedIn profile by the deadline!
Prizes & giveaway
Upon completing and submitting your project, you will be:
- Given feedback on your project by me, if applicable
- Endorsed on LinkedIn for the skills you showcased by the challenge creator (LIST SKILLS)
- Mentioned in a special celebration post on A Cloud Guru’s LinkedIn page
- Entered to win some special swag
- This challenge will remain available indefinitely, but in order to be eligible for the above, please submit your project by June 30, 2022!
Of course the biggest reward is that you’ll learn some critical software problem-solving, learn some front-end development, and have something to show potential employers!
So let’s open up our IDEs and get started!
Questions? Comments? Feel free to reach out to me!