What to do with my portfolio project

I’ve just gotten mostly done with my first pass at the portfolio page. I have no real experience prior to this challenge so I found aspects of this very difficult. The jumping navbar for instance, I wish there was so info on that in the HTML and CSS sections immediately preceding this challenge. I’ve built this page from scratch (i.e no templates and no peeking behind the scenes of the example, like FCC instructs) but my page:
a)Looks like garbage compared to the sample.
b)Doesn’t jump smoothly like the sample .
c)Doesn’t re-size properly on my phone, though I used bootstrap flexible containers.

I’ve worked with only what we have been taught and what Ive read (elsewhere) about navbars and such.

Any advice? Right now I feel like scrapping it and starting fresh, but unclear how I will do any better with, for example, the navbar, since Im cobbling the info together from other websites and dont understand 100% its operation.

Here it is:

Hello !

Two quick things :

Your fonts colors, against a dark background are hard to read. You should aim for good contrast and have a lighter font color.

I also notice that you added Bootstrap Css, but you lack two crucial things to make it work :

Add Jquery and then Bootstrap in your JS panel. Bootstrap requires that JQuery is present and also use it’s own script.

Good luck !

2 Likes

I have been working on my portfolio project for a few weeks now and have made zero progress.(went back to reading/tutorials) I think I could easily get one made by using bootstrap or flexbox but I read somewhere that said I should make an effort to learn HTML/CSS before using frameworks…I guess after a couple more weeks of spinning tires, I may hitch a ride on the bootstrap train…

1 Like

Lots of useful advice in the replies! I am feeling similarly stuck - I too am entirely starting from scratch - and I have tried to keep within the scope of the projects thus far - and not compare my portfolio to the ones I see made by folks with more experience that me! Once we are more fluent in the CSS & Bootstrap - we can go and fancy up our portfolio pages.
Good luck!

1 Like

You make some very convincing points, matter of fact I am reconsidering my approach and will more than likely go back to using bootstrap…thanks

Does the contact form work? It would take a back-end language to get it done, so I would use a mailto: link instead of a contact form unless you know a back-end language.

for example: the e-mail link that I have at the bottom of my portfolio

http://devmaterial.github.io/portfolio/

Will do, thank you for the advice. I though that would be covered with the “quick add” were instruct to do in the video. Including the links for bootstrap and jQuery covered in the lecture series before this project is what you are referring to correct? And the “quick add” lets me see these libraries in action while I am building the page, but I I don’t include the link it wont work for other viewers? Is that how it works? Sorry for the million questions but these frameworks are totally new to me. Much appreciated!!!

Just set it up as a shell of a form since I hadn’t learned yet how the submit button would actually work from the lectures, but after googling mailto: link that seems like the easiest way to make that work for sure. Thank you!

Ok so it looks like i’m more confused about this than I though. After googleing to find the links for jQuery and Bootstrap to include in the js panel I happened upon these:

and

for jQuery, neither of which codepen seems to like because I get a little red ! in the bottom right corner telling me “unexpected token >” when I include either.

and for Bootstrap:

Which doesn’t look to my noob eyes like it belongs in the js panel, and it doesn’t seem to induce and changes when its included in any of the panels.

I think I’m gonna scrap this one and try again from scratch but I would like to get this sorted in my mind and on my new page before I start fresh. If you have the time/patience to explain what i’m missing conceptually with this it would be greatly appreciated.

Thank you very much!

Codepen is different, because you don’t actually include anything like traditional HTML documents. What you are adding via the HTML, CSS and JS panels are normally included in the

 tags of a HTML document.

In order to add Bootstrap to any codepen projects, you have to add both it’s CSS, and it’s JS for it to work. if you only do this, you’ll also get an error because Bootstrap requires another library (jQuery) to work.

Because Bootstrap needs jQuery, jQuery must be loaded first, so it have to be in the first slot of that JS tab.

Thoses red exclamation marks you are getting in the JS panel are caused by JS errors. It could have been caused because Jquery was loaded after Boostrap Javascript and bootstrap was unable to load jquery in time.

I hope this makes sense !

Thank you very much. Do you mind including the bootstrap, and jQuery links that I should be including in a response? I just want to be 100% sure I’m including the correct links. Thank you very very much!!

It’s very easy to do !

In Codepen :

  • click on the gear in the JS window, you should see a Quick-Add dropdown selection in this window.

  • First, select jQuery, and then Bootstrap. Hit Close !

That’s it. I see in your codepen that bootstrap CSS is already added, so there’s no further steps to this :slight_smile:

Happy coding !

I just finished a rough version of my portfolio last night! I was running into a lot of issues in my original as well, which in part was me having a lot of extra code. I decided to start from scratch just to get a clean slate. It especially helped to add a little more experience with the different aspects( ie. Navbars and forms) and I was able to pick and choose the best parts of my original to make a more cohesive and prettier page