Let's discuss your "Personal Portfolio Webpage"

Ok so, here’s some things that might help you out. I’m just starting out too though, so please feel free to ignore me if you think I’m just talking out of my ass.

1. You don’t have to put everything in your HTML tab. The things inside your <script> tag, you can put them inside your CSS tab in CodePen. Your code would look neater like that.

2. Fiddled with your code a bit to see why the content’s misaligned, and I managed to straighten it out by:

a) Keeping the sum of all the columns for every row equal to 12 (because that’s the official bootstrap grid layout), instead of 10.

b) Assigning CSS classes to the row instead of the content. So for example, for the “Frank the Crab” title at the top, instead of assigning all the background and border modifications to the h1 class, I made a .page-title class that I assigned to the row containing the “Frank the Crab” h1 text.

Hope this helps you out!

1 Like

Ah, amazing feedback, thanks very much! Big help :):slightly_smiling_face:

Project Link - https://codepen.io/alecaceaes/full/JMLoOb/

1 Like

Open to any kinds of feedback! :blush:

1 Like

I have finished the tribute page with some reading. But I didn’t understand anything about the portfolio page. Is it more suitable for the campers who finished the Javascript course?

I know that is hard to have some feedback through here but I have to give a shot, learned a LOT doing this project, thanks to FCC and community!

1 Like

@LealBruno Looks great!

A few things I noticed:

  • Social icons under your name are not centered because of &nbsp;. Why do you have non breaking spaces?
  • The title of the third section can be hard to read because of the background. You could maybe have a grey transparent overlay on your background to avoid that?

I like your portofolio. As a suggestion only, it would be great if you could add links to your projects. For example, I wanted to see the Animal Trading Card project, but unfortunately you didn’t set up the link.
Keep up the good work!

1 Like

Hi mate, thanks a lot for your feedback!! Going to check the buttons you said.
Also, I changed the background of third section for a white one, probably later one I will change the background img, or at least blur the current one. Thanks again mate, really appreciated that!

I really like it. Everything is clean and simple :+1:t2: Great job!
I already did previously this project with Bootstrap, but now making new one using just HTML CSS and JS with jQuery… still working on it to make it responsive))
https://codepen.io/Ilima/full/EoGKoO Everything is messy though for now))

1 Like

That’s very impressive. I’m a little scared to follow that one!

Here it is. Still needs some work. I have struggled with the Navbar to no end!!! I couldn’t get it to be: container fluid (without all of the buttons spreading across the width of the navbar) and aligned right. So I settled for aligned right. I will revisit it and fix it later. I also have a little gap at the bottom below the footer that I couldn’t eliminate through margins or padding. If you have any suggestions, I’m all ears. Well anyway, it’s simple and not as fancy as some. I plan to add a little js when I revisit it in the future. Right now I am just operating within my comfort zone.

Bring all your inline style in the css, it is going to be a nightmare to maintain otherwise.
Get used to the coloring of your IDE, the coloring seems to break at some point. You are missing a " on line 62.

Regarding your navbar issue, would the following achieve what you want?
Wrap your code inside the nav element (lines 32-46) with

<div class="container">
    [...]
</div>

So that it looks like this:

<nav class="navbar sticky-top navbar-dark" style="background-color: #2D3E4F;">
   <div class="container">
     <a class="navbar-brand" style="font-family: 'Raleway', sans-serif; font-size: 30px;
	    color: #badfef;" href="#">BEN LEE ///</a>
[...]

Project Link - https://codepen.io/LetsZiggy/full/qNQRap/

1 Like

Project Link - https://codepen.io/stovein/pen/goEdZj

1 Like

Hi Talha,

I think your project would look nice without the container-fluid class in the first div. I don’t know if it breaks anything but it doesn’t sems so.

In the background of your portfolio images you can try using rgba to have a transparent background :slight_smile:

1 Like

Thanks a lot! There was 2 major problem that makes me frustrated and after applying your advice they’re solved. I appreciate it.

Thanks for the tips!. I plan to eventually move all the styling to the css in the future. I tried the container trick already and it works, but it moves all of my buttons to the left in the process and I don’t know how to get them back over to the right after wrapping it.

Can you show me how you do it in your codepen? I do not have that problem.

It worked! I wasn’t wrapping the entire nav section before. Thanks so much for your help. Do you happen to know how to make the buttons switch to a hamburger when I make the screen narrow?