Cool.
That’s a lot of code to look over. I’ll look at the last one since I would assume that that is the most mature example of your code.
Scanning the code quickly, I don’'t see any big problems, but running it through a validator, I find some validation errors:
Error: End tag p seen, but there were open elements.
From line 36, column 119; to line 36, column 122
ibute Page</p></a>↩
Error: Unclosed element a.
From line 36, column 38; to line 36, column 105
ct-tile"> <a href="https://codepen.io/dimitryzub/pen/LYbxEOd" target="_blank"> Tribu
Error: No a element in scope but a a end tag seen.
From line 36, column 123; to line 36, column 126
e Page</p></a>↩
Error: End tag p seen, but there were open elements.
From line 46, column 118; to line 46, column 121
urvey Form</p></a>↩
Error: Unclosed element a.
From line 46, column 38; to line 46, column 105
ct-tile"> <a href="https://codepen.io/dimitryzub/pen/wvorqmq" target="_blank"> Surve
Error: No a element in scope but a a end tag seen.
From line 46, column 122; to line 46, column 125
y Form</p></a>↩
Error: End tag p seen, but there were open elements.
From line 56, column 126; to line 56, column 129
nding Page</p></a>↩
Error: Unclosed element a.
From line 56, column 38; to line 56, column 105
ct-tile"> <a href="https://codepen.io/dimitryzub/pen/yLVzomG" target="_blank">Produc
Error: No a element in scope but a a end tag seen.
From line 56, column 130; to line 56, column 133
g Page</p></a>↩
Error: End tag p seen, but there were open elements.
From line 66, column 129; to line 66, column 132
umentation</p></a>↩
Error: Unclosed element a.
From line 66, column 38; to line 66, column 105
ct-tile"> <a href="https://codepen.io/dimitryzub/pen/oNYpNYG" target="_blank">Techni
Error: No a element in scope but a a end tag seen.
From line 66, column 133; to line 66, column 136
tation</p></a>↩
Error: Duplicate ID profile-link.
From line 75, column 40; to line 75, column 139
t-links"> <a href="https://github.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Github
Warning: The first occurrence of ID profile-link was here.
From line 74, column 40; to line 74, column 149
t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo
Error: Duplicate ID profile-link.
From line 76, column 40; to line 76, column 174
t-links"> <a href="https://stackoverflow.com/users/15164646/dimitry-zub?tab=profile" target="_blank" rel="noopener noreferrer" id="profile-link">StackO
Warning: The first occurrence of ID profile-link was here.
From line 74, column 40; to line 74, column 149
t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo
Error: Duplicate ID profile-link.
From line 77, column 40; to line 77, column 146
t-links"> <a href="https://www.instagram.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Instag
Warning: The first occurrence of ID profile-link was here.
From line 74, column 40; to line 74, column 149
t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo
You have some unclosed elements and duplicate IDs - IDs must be unique.
I also notice something like this:
<h3 class="contact-links"> <a href="https://github.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Github</a></h3>
That space before the a element - hmmm. I’ve seen so many formatting errors cause by little things like that. That is a space that will show up in the code. Is that what you want? If you really want some space there, I would recommend doing it more explicitly with CSS. I remember one time having to help a dev who spent hours trying to figure out why two things didn’t center properly. It came down to something like this. Don’t add “random” space into the HTML that is going out to the screen.
I also think that you’re overcommenting a bit.
<!-- Welcome Area -->
<div id="welcome-section">
Really? Do I need that comment? The ID on the next line gives me the same information. IMHO, the only time you should comment something is if it wouldn’t be immediately obvious to another coder. And 99.44% of the time if the code is organized better and better variable names are used, it isn’t even needed then.
Also, I don’t know how things work in a real environment, where I want to be a front-end developer. Should I know design part or not?
That depends, if it’s a small shop, you may have to make some design decisions. If it’s a big place, they will have someone whose job that is. But no matter what, it’s still good to know the basics. You can pick up a lot just by paying attention to good design choice. Don’t Make Me Think is a great book. Read some blogs, search for “best web page designs”, etc. But you’re in good company - a lot of developers aren’t good at design, myself included.
As far as this design, for a portfolio page I find it a little too busy - you can refer to one of my other rants about portfolio pages and why you need to tell them whether or not to continue in the first 5 seconds. But just in general, it looks pretty good.
If you could say something about design part besides something else, I would really appreciate it!