Absolute Newbie Seeking Guidance?

Hi guys, I am a beginner in all aspects and was working on a portfolio website one of the challenges suggested I do. What I have is the following at the moment: https://codepen.io/BlueBit/pen/NRAWjv
It is definitely pretty basic, so please give me criticisms and advice regarding anything that should be avoided or corrected. How do I align the texts perfectly with each other? I’ve been using the padding element to eyeball them together, but I would think there are many other ways to do so. Also, how would I add social media, such as instagram, twitter, etc, buttons? And what would you guys suggest I look into afterwards? Thank you for your help.

1 Like

Check out Font Awesome.
To use those icons, first add


to the CSS settings.
Then you can now add icons, like this.

<i class="fa fa-github"></i>

More examples

Check this out.


You are using bootstrap anyways, so why not to make your page responsive with bootstraps grid?

1 Like

Best thing to do is take full advantage of bootstrap so the website looks good across all screen sizes, in code pen your website looked amazing bit in full screen the positioning was off

1 Like

Hey man, I unfortunately don’t have any critiques or advice, just wanted to say good job.

1 Like

Thank you for the advices kevcomedia, svmi3195, and jonothecoder! I really appreciate all of them, and thank you vxm007! It makes me happy to be making progress no matter how small!
After reading your replies, I have updated the webpage. I tried the bootstrap grid method to position the portfolio images but how do I adjust the space between them and with the margins of the page? Also, why are the images no longer in the lighter gray box after I used the bootstrap grid method? I have also added the

element and now there’s a space between the navigation bar and the left border. How would I fix this?
( https://codepen.io/BlueBit/pen/NRAWjv )

Basically think of the Gray box like a container, your images are in a different container thats why they overflow. When ever your in doubt Google it :wink:

Thank you! I gave them their own background-color and padding to make it appear similar to what it looked like before and it worked, but I worry about making everything too messy since it feels like I’m just brute forcing it and slapping things together, and yup google’s usually the answer haha