Challenge: Style your Portfolio
The last challenge of this CSS module is to style your portfolio, which you started in the HTML one. At the time, we encouraged you create multiple pages, just so you learn how to link them. However, we would suggest (and that's just a suggestion), that your portfolio is a single page website, which means you would have to change the current structure to fit all of the sections in index.html.
So, for this challenge:
We should have already done the following, whilst practicing throughout this chapter.
- Create a new css file called styles.css.
- Link your external stylesheet with your index.html file.
- You might want to tidy up your html a bit after all the practice we have done! take out the bits you don't want and make sure it's just what you want on your portfolio.
And this is pretty much where your challenge starts. This is your portfolio so it would be weird if we were to tell you how to style it. We could, however, give you some tips:
- Grab a piece of paper and schematise what it should look like instead of jumping straight into applying some properties.
- How should the layout be?
- What's your colour scheme? Will you have any accent colours on a white background? Will you go for a dark mode look? What about a font?
- Will you have a sidebar for the users to navigate to different sections? Or will it be at the top?
- Mobile first. Start designing and building for smaller devices and use all of the tools in your arsenal, combined with media queries, to expand it to wider screens.
Try to look around existing portfolios. Everyone adds their own spice, but you'll find that some components are common, since they're part of a familiar structure (eg.: navigation, footer with social links, a header).
This is the portfolio you'll showcase to us and your peers. It's a blank canvas so have fun with it! After all, it's only your first iteration. By the end of the course you might have built another 2 or 3!
And importantly, don't be overwhelmed! There is not right answer to this, we just want to see you put your new knowledge into practice. It can be as simple or as complex as you like.
And if you are struggling with anything, as always, ask your tutor in the next class!
Very important note: Every time you complete styling a section, or you find convenient, push your changes to GitHub. We will be expecting multiple commits!
For inspiration: