Intro
I created my first Portfolio it took me about 2 weeks and it's still not finished, (This is just an early release. ) In this article I will show you the tips and tricks for making a Portfolio.
Step 1: Ideas
First we are going to get started on ideas (the basics of your website). On a Portfolio the main ideas are: how to contact me, about me, my blog posts, etc...
Create does ideas into divs and right texts in them like h1-h1, p, span, i, etc... You may really want to create a website like this but you want people to see it right? Without spending a single dime from your pocket you can get a website. I used W3schools spaces, it was simple and easy to use. We are not going to jump into css yet cause that is not concerning for us yet. Now that you have made these few changes to your code let's jump into more advance stuff.
Step 2, Part 1: Basic CSS
For this part you will need basic CSS knowledge. If you haven't already create classes for your 'ideas', you can do that now. So when I talk about Basic CSS I'm talking real simple.
Step 2, Part 2: Fonts and Colors
We are going to focus on fonts and colors, what fonts do you want? That up to you but I can help you a bit, your font tells your users the theme of your website, if i'm doing a website about coding I might want to use a font such as Source Code Pro, that's an example. You maybe like how do I get these fonts? Simple Google Fonts, it provides free font's without any downloading. You go on their site pick a font you like click on the plus button insert the first big shunk of code in the HTML part of it then the small part of code in the CSS section. I think if you are using only one font you should put the CSS code in the 'body tag'.
Perfect!!!
Now lets talk about colors: use two color such as black and white, red and white, colors that match basicaly. You can use more but to start let go simple. In my project I had rainbows of color with CSS animation but that we will talk about later.
Step 4: I could write about this forever.
I don't want to spend forever to right this article so I'm going to summarize this. First of all you don't need a lot of Image, I recommend just using one such as your profile picture? Doesn't have to be an image of you can be a image you found on the internet (please give credit if you do so the image I have on mine is a drawing I drew so I didn't need to put credits.) Use icons the best sites for free icons without downloading any is Font Awesome you can directly paste the code in your code editor and they have over 1,000 icons! Insert of favicon! Make things interesting for the user! Use some animation if you don't know any CSS animation just find some free ones on codepen.io or something like that! Good animations are like text effects and button on hover those are the most interesting!
I think that's it for today if you have more questiong just comment it!
Top comments (0)