microlinamedia / portfolio

Your Very Own Portfolio 🔥

It's about time you show the world the wonders that you're now capable of building – it's time to build your portfolio. The portfolio should feature projects you have built so far and some information about yourself and your background, and - if you'd like - your contact details.

The portfolio will be a great test of your HTML and CSS skills but we will also take the opporitunity to get started with accessibility and build websites for everyone – something every frontender should know. Don't save until last day to do the testing – it's very much the task of this project and will take some time.

The portfolio should contain:

• A picture of you.
• A presentation of the tech skills that you have.
• A presentation of some thoughts that you have around code.
• A presentation of your projects linking to your Github.

Do you want our help in getting a job?

If you are taking the full program and plan to let us match you with companies at the end of the program, we want you to use our template for the portfolio. Basically you need to implement the given design to be able to get our help. If you work as a designer and really hate our design you could pitch to us why you would make a better job. But otherwise this design comes from experience of what exactly recruiters look at.

Access portfolio guidelines and designs.

For this weeks project, focus on getting the tech side working well - focus on HTML & CSS and nailing the accessibility and testing. For the matching process at the end of the bootcamp, the content becomes much more important, so this is something that we can add more love to later in the course. Since this is a page that we will use to profile you towards companies, your portfolio will need constant updates with new projects from now on.

If you don't want our help getting interviews, feel free to build the portfolio anyway you like. Here's some examples.

• https://york-demo.squarespace.com/
• http://www.thebeastisback.com/
• http://bjoernmeier.com/##

---

How to get started 💪🏼

Because this is your portfolio, you will own the repository! On GitHub, create a new repository for yourself to get started. You can initialize it with a README if you'd like - it doesn't really matter. Once you have your repository, clone it onto your computer.

⚠️ Code reviews are difficult without Pull Requests, so you need to make sure that your repository is public and then submit a link to your repo in the hand-in on Canvas. ⚠️

Test Your Webpage 🏼✅

A big part of this project is to test your page so that it works for all the most used browsers and works well for people with dissabilities.

1. Cross-browser testing

You should make sure that your page is looking and function like you would want in the following web browsers:

• Google Chrome
• Firefox
• Microsoft Edge

_If you're on a mac or linux computer, you can use this tool to test your site on Edge.

Follow the Workflows for cross browser testing when testing your sites.

2. Accessiability testing

The next step is to make sure your webpage works well for people with disabilities. You should follow each step on the Accessibility testing checklist at the bottom of the page and make adjustments for those errors that you find. Feel free to discuss in Slack what you find and how to solve some issues.

If you publish your website, you can use the built in screen reader on your phone for the screen reader test. Google to see how to turn it on for your phone.

Requirements 🧪

• The page should be built with HTML and CSS (JS if needed)
• You should use flexbox for layout (you can use CSS grid if you're comfortable with that).
• The page should be fully responsive. (mobile, tablet and desktop) – The page should look and function the same on Chrome, Firefox, and Edge. – The page should work well for people that uses screen readers and keyboard navigation. – The HTML code should validate in an validation tool.
• Code follows Technigo’s code guidelines.
• Contribute by helping others with this project on Stack Overflow.
• If selected; demo your solution for your team.

How to hand in the code 🎯

• Deploy your site to netlify
• Post the link to the repo and your deployed site in canvas
• Wait for the code review from your teachers

How to get help 🆘

Ask for help and share your knowledge about this project with the 'project-portfolio' tag on Stack Overflow. Talk to your team on Slack and help each other out. Do some research about your problem, you are surely not the first one with this problem, Google is your friend 🙂. And you can of course also book a tech call.

Stretch Goals 🏃‍♂

Make sure you've commited and pushed a version of your project before starting with the stretch goals.

Optimise your website for sharing on social media using og:tags.

Give your portfolio a custom domain and connect to your deployed site. Read more.

🚨 Don't forget to add, commit and push the changes to GitHub when you're done. 🏁

portfolio