CodeNewbie Community 🌱

Cover image for Portfolio Website Challenge.
software Devlpr
software Devlpr

Posted on • Updated on

Portfolio Website Challenge.

Don't know where to start with your Portfolio Website? Here is a portfolio website challenge for you :). Enjoy.

The purpose of this challenge is to work on/improve your front end skills and also have your own portfolio website.

Requirements.

  1. About Me - Include your name, a photo, and a short blurb about your skills, what you’ve done and where you hope to go in your career.
  2. Projects - Samples of your work.
  3. Contact Me - Include a contact form or your social media channels(LinkedIn and GitHub profiles).
  4. Responsive web design - It should automatically adjust for different screen sizes and view-ports.
  5. Cool animated loader(Nice to have).
  6. Hosted on GitHub.

To do.

  1. Create an account on GitHub if you don't have one already - https://github.com/
  2. Get the Student Pack(For students) - https://education.github.com/pack/offers The student pack gives you access to dot tech, Namecheap, and Name.com. Register your domain name with one of them. dot tech https://get.tech/github-student-developer-pack Namecheap https://www.namecheap.com/support/ Name.com https://www.name.com/partner/github-students
  3. Use GitHub pages to host your website.

For those who don't have student email addresses to get the Student Pack, you can use GitHub Pages to host your website without a custom domain name.

Notes :
*Getting started with GitHub - https://guides.github.com/activities/hello-world/
*Getting started with GitHub pages - https://pages.github.com/ | https://guides.github.com/features/pages/
*Setting up your website with GitHub pages and dot tech - https://www.youtube.com/watch?v=eKv8YLaxeb8&t=160s
*Best practices for creating a portfolio website - https://www.springboard.com/blog/programmer-portfolio/

For some inspo:
https://codeburst.io/10-awesome-web-developer-portfolios-d266b32e6154
https://www.mockplus.com/blog/post/web-developer-portfolio

Happy coding :).

Top comments (3)

Collapse
 
sheriffderek profile image
sheriffderek

This seems like the order of importance:

  1. CONTENT: About Me - Include your name, a photo, and a short blurb about your skills, what you’ve done, and where you hope to go in your career.
  2. CONTACT: Contact Me - Include a contact form or your social media channels(LinkedIn and GitHub profiles).
  3. LAYOUT (don't make it not-responsive)

Optional?

  1. Projects - Samples of your work. (if you have them?)

Cool animated loader(Nice to have). (why?) (what would be loading?)
Hosted on GitHub. (Why? What if you already have a server?)

Consider this as well: jonathanstark.com/xyps

Collapse
 
softwaredvlpr_ profile image
software Devlpr

Thanks for the tips🙂.

Projects(If you have them?) Yeah if you have them but isn’t the whole point of this to showcase your work?

Loader - Loading into your site(Optional).

Hosted on GitHub, this was written with students in mind, where I come from most people/students don’t have server hence GitHub.

Collapse
 
sheriffderek profile image
sheriffderek

I think that having a solid basic “business card” site is much more important than showing your projects.

There are 10s of thousands of boot camp graduate sites that all seem the same. Surely, writing about your work and showing some case studies is great! Even a series of CodePen s can be enough. I’m just saying you can think of it like progressive enhancement. A side with your info is better than an unfinished portfolio / or a portfolio with projects that don’t tell your story well.

I’ll make a post about it!

Thanks for getting people motivated!