Create a personal portfolio page and deploy it to Github pages. Please refer to the documentation on GitHub for detailed instructions.
- Separate concerns of semantics and style: your CSS should be in a linked stylesheet 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!
- Your page must be deployed to Github pages. This is a free hosting service provided by Github.
You have not been taught how to deploy to Github Pages. That's okay! This is an opportunity to learn something new on your own. Just follow the instructions here. If you run into any issues, just ask the instructor on lab support.
Please create an issue on this repo, containing a link to the repo you created and your GitHub Pages URL.
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, 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 would like but make sure you read the documentation for it thoroughly.
Personal websites from some previous SEI grads:
- http://bnmrrs.com/
- http://raleighdaniel.com/
- http://jlappano.github.io/
- http://bradpuder.com/
- http://kevoncheung.com/
- http://www.larrybuch.com/
- http://adrianbautista.com/
- http://www.andrewmadden.com/
- http://www.belcortes.com/
You can also Google "developer portfolio website" for more ideas :)
- Use pseudoclasses
- Explore CSS animations
- Try using some JavaScript
If you'd like, try adding some Sass to your portfolio site.
Particuarly, look into using:
- variables
- mixins
- the
&selector
If you want to explore Sass more, look into:
- Use a color function:
darken,lighten, etc. - Use a function to create 3d effects, like https://jesse.sh/makes-3d-buttons-with-sass/