There are typically no classes taught during project periods with the exception of optional review time or bonus workshops.
However, we still take normal attendance for scheduled classroom days that fall on project periods, so you are still expected to be virtually present in our usual Zoom call.
In most cases we'll place you in breakout rooms to work on your project, but it's your responsibility to be available for meetings with instructors as needed.
Project Details
🔴 Mandatory To Pass:
MVP - Minimum Viable Product
Your application must meet these requirements:
Built with HTML, CSS, JavaScript using the React Library
Hosted on CodeSandbox or Netlify
Frequent Commits to github
A README.md file with explanations of the technologies used, the approach taken, a link to your live site, installation instructions, unsolved problems, etc.
Use Fetch and UseEffect to make a request to an external data source like OMDBapi and insert some of the data retrieved into your State and display it on the screen
Here are some "bonus features" but not required:
Have one or more complex user interface modules such as a carousel, drag and drop, a sticky nav, tooltips, etc
Look into localstorage so you can save data to the user's browser
Utilize Redux or the Context API
📋 List of API's
Below is a non-exhaustive list of some free API's you can use. There are many API's out there, however, so if you find one not on this list that you'd like to use, feel free! Please note that some may require signing up for an API key (e.g. the Marvel API).
Lastly, the following sites congregates a bunch of API's together, so you can take a look through their libraries and try to find an API that interests you! Note, however, that not all API's are free and many listed may require payment. We highly suggest to use a free API for your first project dealing with one.
Please be extremely thorough when finding an API you'd like to use for your project. In other words, please ensure you have properly vetted your API, by taking the time to read it's documentation and even "hitting a few endpoints".
Do this BEFORE you decide to seek instructor approval.
This ensures you're taking the time to test the API and see how you can get it to respond with data and what that data looks like.
Make A New Repo
You will be using GitHub,
After your project has been approved, make a new github repo for your project. You will be deploying this project onto netlify or codesandbox, so you must name your repo yourgithubusername.github.io (for example, if my github username was octocat I would do: octocat.github.io)
From there, follow the instructions outlined by github themselves on github.io
You will present your project and show your code to classmates and instructors.
Where to go for help during project week
Seek out help online
Seek out help with your classmates
Seek out help with our class Instructor Associate
Suggested Ways to Get Started
Wireframe Make a drawing of what your app will look like in all of its stages (what does it look like as soon as you log on to the site? What does it look like once data is retrieved?).
Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually.
Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
Think about...
Creativity
Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user?
Code Quality
Did you follow code style guidance and best practices covered in class, such as spacing, indentation, modularity, and semantic naming? Did you comment your code as your instructors have in class?
Problem Solving
Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations?
Personal Portfolio Website
Why Does This Matter?
Employers will often overlook a lack of a bachelor's degree in computer science, so long as you can prove to them you know what you're doing. How do you prove you know what you're doing? With code of course!
A portfolio website allows you to do many things, including:
Showcase your personal and professional programming projects
Link to each project's Github repository, so people can see your code and usage of version control
Introduce yourself with more personal flare than on a resume
Make a great first impression by having a tasteful design
Link all your social media and contact info in one spot. (Github, LinkedIn, and Resume at minimum!)
Get creative!
FAQ
What projects should you showcase in your portfolio?
Keep in mind, your projects section should be a "best of" section, not every project you've ever done. If you have multiple projects that are very similar, choose the one you think is the most impressive and use that one. Remember, 3 high quality, polished projects are way better than 10 projects that are unpolished or very similar to each other.
What if I can barely match my clothing much less design a pretty website?
Lean on each other! Most people are willing to take a couple minutes to look at your portfolio site and give you helpful feedback if you ask nicely. The more people you ask, the better!
Design is somewhat in the eye of the beholder, but some things are pretty universal! If one person is picky about something and everyone else loves it, it's probably just that one person being picky. On the other hand if everyone keeps clicking in a spot that isn't clickable, it's definitely something about your design that is leading people to do that and you should look into reworking it. Pay special attention to how people's eyes move across your page. If they are looking at information in a weird order or making some error when using your page, a design change may help.
Protip: If you join a hackathon you will likely be paired up with one or two designers with a UX Background. Hit them up and see if they'd be willing to spend a few moments giving an expert opinion. Most of the time people can tell you if something is wrong with your design, but a UX designer should be able to put into words what exactly that is.
When is my portfolio due?
You should aim to work on your portfolio in small increments so that it's done or nearly done by the end of the course. You have until one week post-course to finish your portfolio site, but don't be the person who has to build the whole site from scratch right after graduating! This is all work you have to do eventually, so the best advice is to be prudent about working on it in small chunks. Future you will be grateful!
CHECKPOINTS!
Checkpoint 1: Wireframes
Following your lesson on SDLC & Agile Methodolgy, you should have a good idea what a wireframe is and what it entails. Make a wireframe for your portfolio site. Take some time to think about special features you might want (e.g., a carousel or modal dialog for displaying projects), and how a user will navigate your site. Will you have smooth scrolling? Will your site be on separate pages? These are some choices to make now. You will have a better idea how to implement these features by the end of the course than you do now, so don't worry if you don't know exactly how to do something yet.
Protip: This is a great time to brainstorm about color pallettes. There are many tools you can use online to generate color pallettes, such as Canva, ColorMind, or ColorSpace. They each work differently so check them all out and bookmark your favorite!
Protip: Make sure you think about how your site will appear on a phone or tablet as well as a desktop! Making a separate wireframe for a phone-sized screen is a great idea.
Checkpoint 2: Hello World!
At this point, you have a portfolio site up and hosted on Github pages. The code itself probably looks about like this:
<h1>Hello World!</h1>
That's okay! Nothing really needs to be on there at this point! What's important is:
You have Github pages set up
You have a repo named YOURGITHUBUSERNAME.github.io
You can access your repo on the web at https://YOURGITHUBUSERNAME.github.io
You have a cloned copy of the repo on your computer, and a way of tracking commit history on your portfolio.
Now, whenever you have time, you can make small changes and check them in, which will automatically update your site!
Checkpoint 3: 25% done
This is an incremental step - you should have the following finished:
You've decided whether or not to use a CSS framework or other theme. If yes, which one?
A resume link or button (that goes nowhere)
Your site divided into sections or pages (even if those sections are empty)
You've chosen an initial color pallette (you can change this at any time, but try one out for now)
You have dummy/filler images where appropriate
You have lorem ipsum or similar filler text where appropriate
Protip: You can get creative with filler text! Lorem ipsum is boring and (if you translate it) depressing. Spice it up with hipster ipsum or something similar!
Protip: Bootstrap gets a lot of hate because many people have abused its default styles - making it seem generic, boring, or like every other website ever. However, it is a solid choice for a CSS grid and some basic stuff! If you like bootstrap, use it, just not, you know, too much!
Checkpoint 4: 50% done
This is an incremental step - you should have the following finished:
Your resume link now actually goes to your resume, even if the resume is a work in progress.
Your resume link opens in a new tab and is in a PDF format
You have at least 1 project to display in your project section (refer to your wireframe for what this entails - a title, probably a screenshot, maybe a description or a list of tech used, etc.)
Your project has a link to both the live site and the github repo
If appropriate, your live demo of the project has test data or a test user. (Basically think of an HR person who doesn't want to build a whole login on your site from scratch)
You've included a CDN link to whatever CSS framework you're using (if applicable)
You can view what you have on a phone-sized screen and see/read all the content
Protip: Make sure your site looks good on smaller screens! Your CSS framework should be a huge help here! If things are overflowing, check your image sizes or any hard-coded widths (pixels as opposed to percentages) in your CSS.
Checkpoint 5: 80% done
This is an incremental step - you should have the following finished:
Your site has navigation! Most of the time this means a nav-bar or some sort.
Your resume is complete, or very close to complete
Your site has styling - this will likely come from a combination of styles from your CSS framework (if applicable) and your own personal stylesheets.
We <3 the 90's but your styling shouldn't look like it's from then
Your site includes icons/buttons/links to appropriate social media such as LinkedIn or Github.
Your Github profile page links to your portfolio
Any images, animations, or effects load in a reasonable amount of time
Your site doesn't have a flash of unstyled content (this is where you see the HTML without the CSS for a split second, and is usually due to slow-loading images or JS)
The font style and size are easily legible and professional looking (no comic sans unless using it ironically)
No obvious CSS, HTML, or JS bugs
You will want to be at this point before your final project is due, so you may still have a placeholder for at least one of the projects. That's okay! You don't need to invent a time machine! Just make sure it's as close to ready as it reasonably can be.
Remember...
Don't stress! Even at the end of the course you still have an extra week to polish things up if you need it! Cheers to getting this far!
One of the toughest things to do as a new developer is to assemble an online portfolio.
What should I say?
What should I include?
What should I leave out?
But it doesn’t have to be that way.
If you’re stuck, take a look at these 15 samples of web developer portfolios for inspiration. (And if you want even more guidance on building your portfolio, look here.)
