Hi all,
I finished implementing the portfolio project here: https://codepen.io/hemel/pen/KmyXXB
Any comments are welcome. I’d like to know what I have to improve on such as code quality, design, and functionalities. How can I make it look more balanced and more like this one: https://codepen.io/freeCodeCamp/full/YqLyXB?
The social media buttons look really bad. Should I used <button> or <a>?
Thanks!
I edited the code in your post to make them visible 
IMO, <a> is preferable if it opens a page (and <button> for forms, etc.), and you can always use CSS to style your <a> elements as you see fit.
I recommend styling the Send button a bit. Maybe change the color to stand out against the background, or add a border around it (or both).
Are you sure you wanted to use version 4 of Bootstrap? I noticed that the Bootstrap CSS is version 4, but the JS is version 3. I tried replacing it with version 3 but it broke the page badly.
Hello, though I could give you some feedback on your design, and not code, since I’m here because I want to be able to actually learn to do some fron-end on my own designs.
These are only suggestions from my personal opinion, “rules” are ment to be broken, but you need to know all the rules so that you can break them in a correct way. ^^
Consistency in typography. This is something alot of people don’t realize the importance of. Try to stay consistent in your headers. Ie. you use both all captial cases on CONTACT ME. But About myself use lower. Try to stick with either. Also colors. You are using red on the first header, but other ones are white. At the same time, you navbar has a orange line, try sticking with either red or orange as your color choice.
Transparent grey box. Yes, I know it looks “cool”, but as for readability, it becomes distracting for people to read text when it’s like that. It’s not a long text, and it is oretty clear, but there is so much happening with the contrast of the characters, the background picture and the transparent box, that it becomes a bit much. So I would divide the picture and About me box vertically, guessing you put in the picture to make your site more lively.
The center adjusted About me text. There is a “rule” in graphics / typographical design that when something is adjusted to the center like that “all” other elements should be aswell, to create consistency and flow. In the example you are pointing to, the text is adjusted to the right, so that the text is “hanging” on to the rounded profile picture.