I created my portfolio page, but do not have projects to brag yet. I did the tribute page and waiting for feedback.
2 Likes
Hi. I looked over your tribute page and decided to force myself to give you constructive feedback. I usually avoid that because I have the bad habit of being honest, and I often don’t know when to stop. I’m sorry for any emotional damages my unfair ramblings might cause 
Design
I’m not a designer, but I try to pick up a few tricks as I go. I think I learned a lot from UI design articles on tutsplus, especially those by Ed Wassermann.
All text on your page is centered
I don’t think that is a good idea. The readers’ eyes have to constantly look for the beginning of the following line, which makes your text harder to read, if not tiring.
Also, I think it is important to design in such a way that visitors of you site can see and understand its structure without even reading a single word, just by clever use of color, distance between correlated elements, white space for separation etc.
The text is very bright
You chose pink #d6d as text color, which is not far away from the background-color’s #fff in terms of brightness. This makes your text even harder to read, in my opinion, at least. If you want to pull that color off, I’d go with a dark background color. I also tried darkening the font color to values between 20 and 40, which looked much more readable (i.e. #331733 - #662e66).
Your lists don’t look like lists
The formatting should make it obvious to the reader what is a list and what is not, but I don’t think it is on you page. Apart from the aforementioned centering, there are no bullet points etc. to indicate such. I looks like you wanted to use proper list tags, but it does not work. That is because your HTML is a bit messy. Your lists should look like this:
<ul>
<li>Trained employees</li>
<li>Hiring</li>
<li>Payroll</li>
<li>...</li>
</ul>
Instead you have used line breaks:
<ul>
<br>Trained employees
<br>Hiring
<br>Payroll
...
</ul>
If you really want no bullet points etc, you should still use the right markup and use css for styling.
Use proper horizontal rulers
If you were going for a terminal aesthetic, it would be ok to use dashes to separate content. In a portfolio page, I think it looks amateurish. It is better to either use the <hr> -tag , or style your sections appropriately, something like:
section {
border-top: 1px solid #929;
padding-top: 1em;
}
Oh, and here are a few styles for horizontal rulers.
You don’t make much use of horizontal space
Your web page is a bit like one of these long scrolls announcers supposedly read from in ye olde times. I think it’s a good idea for a portfolio to try not to waste the reader’s time. Present more meaningful information on the screen by utilizing bootstrap’s grids. The first screen people see of your page is the most important and sometimes the only thing people will ever see of it.
I like your header
Your photo is tasteful and engaging (its compression artifacts and lowish resolution are noticeable, though). Some may find the background color a bit drastic, but I like it. The text below the image is short enough that centering it makes sense. I also like the sidebar.
Headlines should be closer to the content they precede
All your headlines are closer to the preceding content than what follows, which - again - makes it more difficult to get a feeling for its structure. Also I don’t think it is helpful that the headers have identical/similar alignment, color and size.
Also
Style your links. 
Blue on bordeaux is a dangerous combination, I think
Content
I have one major complaint and that is: Too much. You spend a whole page listing a lot of stuff and I don’t think quantity is helpful here.
First of all, you list a rather broad set of skills. While many are of technical nature, even those are too broad. A reader looking for a web developer is not interested in your hardware prototyping capabilities, much less management skills.
Secondly, you don’t quantify the impressively long enumeration of substantives in any meaningful way. I am sorry I have to say this, but the quality of your portfolio, especially the markup, can easily put your resume in a very bad perspective. Under professional summary, you naturally list HTML5, CSS, Bootstrap and jquery along with user research, knowledge of databases, from to back end integration etc.
The only - suggestive - evidence you provide about whether you actually have any of those skills, is a web page that looks decent for a beginner, but never good enough to be made by a professional. Personally, I am not of the opinion you made all this up. I just want to underline the importance of quantifying your skills and not listing everything you ever attempted. Your abilities as a web developer are adequate for someone who is just starting out learning all that stuff - and it is a lot. If you want to mention any front-end technology, make that clear. For instance, you could write that you are an ‘aspiring web developer’, that would be much more believable.
I am a tax accountant, I can do taxes, book keeping and all that stuff (actually, I was able do that a long time ago, I’ve thankfully forgotten most of it ). I would never mention that on my portfolio, because I’m trying to sell myself as a web developer. Honestly, wade through your lists and remove everything that is not related to what you want to present yourself as, as well as everything you can’t back up, quantify or at least make believable. If you wrote the winning research on satellite phone systems, show that. If you can’t (nda or whatever) at least elaborate to make it less abstract. You don’t have to prove you have degree or language certain skills, but what about that Worldwide Scope Patent Researcher? If you really want to represent yourself as the Queen of all Trades, I suggest you categorize your skills by whatever visitors may be interested in, e.g. (front-/backend) web development, software development, theoretical cs, research, business, soft skills etc.
Implementation
From reading your HTML, it appears to me you have still to master the basics. That is not bad for someone just starting out. It takes a lot of practice, interest and reading to develop a solid understand of the technologies used, so don’t worry. Here are a things you can improve:
Don’t abuse tags/characters
When you use headlines, use them to emphasize the hierarchy of your web page. <h1> should be at the top, <h2> below etc. Don’t use <h1> because you want larger characters, for instance try to avoid this:
<h1>-------------------------</h1>
The opposite is also true, don’t use <h4> as caption because the font size of <h1> is too large for your taste. I’ve done this, too, and sometimes still do, but try not to get into the habit. For lots of reasons it is better to style your page only through css. I know that this is a bit much to ask from a beginner, but I think you should try to nudge yourself into that direction.
Also, don’t abuse and use <br> sparingly. It is by design that white space is collapsed to one space, don’t fight it. When you want to align elements, use css. This can be done using bootstrap’s columns, spans with display: inline-block; etc.
Use labels
<label for="myInputId">Phone</label>
<input id="myInputId" placeholder="Phone" required>
Close your tags, eat your vegetables
Not all tags need to be closed in HTML, but most do.
Some text editors will tell you when you forget one, but code pen is sadly not one of them. However, there are two easy things that will tell you when something is wrong:
- When you click the arrow left to a tag it should wrap everything between the tag and end tag. If it wraps too little or too much, there is most likely something wrong.
- When the indentation is wrong, something is in the bush. Whenever you write an opening tag In codepen and then press enter, indentation should increase by a few spaces on the next line. When you write an end tag matching a tag that is not closed yet, indentation should decrease on the next line. If one or the other does not happen, look out.
If you got here, congratulations. I probably overdid it again, sorry
I have treated your portfolio like a professional one and given you appropriate feedback, because I had the impression that it is supposed to be one. However, for the second project (assuming) of an absolute beginner, this is an achievement you should be proud of, despite everything I’ve written. Just getting something done that is readable and complete is not easy.
Don’t even try to do everything I’ve suggested. Maybe you want to as you get more experienced and that’s fine. Don’t get overwhelmed, though. Stay positive, do stuff, read up on things you don’t understand yet.
I haven’t done my portfolio page yet, because I would criticize my work even harder. A portfolio is in my opinion probably the most difficult front-end project, because it is the most important.
I’m done now. Have a nice day
2 Likes
That is the most constructive feedback I’ve seen to date wow!
2 Likes
I’ve cleaned up quite a bit of front-end code in my time contracting for advertising agencies and two quick and obvious things are:
-
You are pasting in seemingly random browser-prefixes (you can instead switch on the autoprefixer setting in codepen’s css settings).
-
Missing properties (position):
.resume {
text-align: center;
position
background-color: #ffccff;
position: relative;
color: #d6d;
}
I see a lot of this from outsourced work when working for larger agencies, and agencies will be looking at your code and asking why you do certain things, so I would look over what you have coded and ask yourself those same questions. The most important thing is to keep learning, and hold off on making any claims that you cannot back as it will hurt your online image.
2 Likes
Oops, I totally forgot to take a closer look at the css, thanks for covering that
2 Likes
Really good and helpful feedback.
Thanks! appreciate it.
how do you add images to codepen coming from own computer or dropbox?
@endencia: You can upload them to an image hosting service that allows direct linking to images, such as directupload.net.
Great! Thanks:heartpulse: