Create a personal portfolio page and deploy it to Github pages.
You may continue with the "About Me" page you created when interviewing for this course. However, the intent is that this will be the foundation of the portfolio page you display to employers, so you'll probably want to make significant improvements!
At 2:30pm please report to your classroom. We'll ask you to pair with another student and review each others' sites:
- Push your most recent changes to Github.
- Fork your partner's repository.
- Clone it down.
- Check out a new branch called
your-name-suggestions
. - Take 15 minutes to make comments, suggestions, and changes to their code.
- Add and commit your changes, and then
git push origin your-name-suggestions
. - Click the green "New Pull Request" button on your fork's Github page and follow the steps.
- Take a look at the pull request your partner made on their fork of your repository, and consider their changes.
- Close their pull request (or, if you wish, merge it in).
At 4:30pm you will meet with your squad at the last place you met.
This lab counts as an assignment. Your squad instructor will review your code and leave feedback by Monday.
- Your page must be deployed to Github pages. This is a free hosting service provided by Github. You should name your repository
your-username.github.io
. The result is that your page will be publicly available at http://your-username.github.io. - Your semantics and style should be separated appropriately: your CSS should be separate from your HTML.
- Your HTML should pass the W3 HTML validator.
- Your CSS should pass the W3 CSS validator.
- Javascript isn't required, but you get bonus points for giving it a shot!
Please create an issue on this repo, ga-wdi-exercises/portfolio_pages, containing a link to the repo you created -- not the webpage. So your issue should contain http://github.com/wdidcstudent/wdidcstudent.github.io
, for example, and not http://wdidcstudent.github.io
.
Every student must create their own website, but you're welcome and encouraged to collaborate with others! The best way to create a great website is to get targeted feedback from others at several points in the process.
-
Think about who you want to view your site (potential employers, freelance opportunities, friends). I know it is tempting to make it flashy with tons of jQuery plugins, but the most important thing when designing your site is to make it EASY for your visitors to access the information they want and navigate around the page.
-
Think about the goal for your site and what you want your users to do (read about your story, look at your work/code/writing, contact you). Guide them to taking those actions by making them prominent / easy to find.
-
Wireframe what you want your site to look like first!
-
Use proper indentation and organize your code. Chances are people will view your source!
-
You may use Bootstrap or other CSS frameworks. If you do, you're encouraged to start off using it so that you get an idea of how you want your page to look, and then to gradually remove the Bootstrap in favor of CSS you wrote yourself.
Personal websites from some previous WDI grads:
- http://britt.is/
- http://raleighdaniel.com/
- http://jlappano.github.io/
- http://bradpuder.com/
- http://nicholalexander.com/
- http://kevoncheung.com/
- http://rlee1121.github.io/
- http://www.larrybuch.com/
- http://www.timlatorre.com/
- http://adrianbautista.com/
- http://www.andrewmadden.com/
- http://www.belcortes.com/
You can also Google "developer portfolio website" for more ideas :)
If you'd like, you can purchase a domain and then "point" the domain to your Github Pages repo. Here are instructions on how to do so:
https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/
We recommend Namecheap.
If you'd like, try adding some Sass to your portfolio site.
We'd like you to try using:
- At least three variables
- At least one mixin
- The
&
selector
Bonus!
- Use a color function:
darken
,lighten
, etc. - Use a function to create 3d effects, like https://jesse.sh/makes-3d-buttons-with-sass/