Hi Peeps!
I’ve almost finished my portfolio page, so I thought I’d post it here and see if anyone had any feedback before I submitted it.
Thanks,
Becka
Hi Peeps!
I’ve almost finished my portfolio page, so I thought I’d post it here and see if anyone had any feedback before I submitted it.
Thanks,
Becka
You used the same colour scheme I did for mine! YaY!
I like it, esp the shading effect on your portfolio previews. You mention its a work in progress, so I think you are still working on the navigation? It does not highlight the page I am on as I scroll down the page, and the smooth scrolling effect isnt there. But otherwise, it looks very good!
Thanks for the feedback. I do love that shade of red.
Yeah the scolling stuff is giving me trouble. I know Bootstrap Scrollspy is involved but I think I’m missing something because I can’t get it to work.
Yeah, I had so many problems with that when I did mine too. Here’s a tip for you, when you google Bootstrap smooth scroll, the first link is to a W3C page about Bootstrap Scrollspy. That was the most helpful guide I found that helped to finally get mine working.
You can check mine out at https://codepen.io/cndragn/pen/PmzPEX to see if that helps any
I have completed my tribute. Expecting feedback
Hi again,
I’ve managed to get smooth scroll working. The scrollspy still won’t work - I’m beginning to think it’s the way I’ve done my navbar causing the problems.
.I’m going for a walk before I get too exasperated with it and throw the laptop.
Awe!!! I know the feeling…its getting there though, you got the smooth scroll working!
Wish I knew way more to be able to help you better (js is the vein of my existence at the moment!) but I do notice you dont have the scrollspy function in your js…
Do you mean the:
$(document).ready(function() {
$("body").scrollspy({
target: "#myNavbar",
offset: 70
})
});
bit? Or something else? I feel like I’m missing something obvious.
Wow yeah me too, because I literally just did this yesterday myself here…Im looking everywhere! One thing I noticed, not that it helps this problem tears but you have your full header in here…for codepen, you only need to put in everything between the body tags… can go to settings to put in your style sheets and anything for yoru header like your google fonts etc.
But yeah, Im looking and changing up everything I can think of and its not budging… I really hope someone comes in to help out too, cause Im so curious what it could be. I bet its something so small too!!
Yeah, it’s almost always something small. That or something I’ve done precludes it working.
Thanks for looking anyway. At least the rest of it is done.Did I mention how much I like your portfolio yet? I think I was too busy fretting at mine. Sorry.
Awe thank so much! And no worries… Im also kind of curious about yours and have popped in to play around with it between lessons lol
Im sure some guru will pop in (well, I hope!) and say…oh just do this one little thing and it’ll work
Oh, I like you smooth scrolling so much
Becka, how did you do you page? Immediately in Code Pen or in a editor on your computer? Does it work in your computer?
I did it in codepen. It works in codepen’s debug mode so it should work if I dl the files and load them on my computer.
Now I’m trying to get it to pass the codecamp beta’s test but meh! I don’t like one of the requirements.
Becka
Becka, you made mistakes in your navigation bar. You should remove all spans in your navbar and think about another variant of styling it.
I forked your project in Code Pen and removed spans, your scrollspy works perfect.
I thought it might be the spans.
Though if you removed all of them that might create an issue for the collapse.
Oh and thanks for taking a look.
Yeah the problem is that taking the span out ruins the look of the buttons (they are there as a workaround for the fact that bootstrap doesn’t support styling links as buttons in the navbar…
I’ve managed (by dint of using !important to correct some of that but the buttons are still way too big and the scrollspy highlight is not the same as the active colors and I’m not sure how to force it to take the active class).
But at least it’s working now and I know it was my determination to use buttons causing it.
Thank you!
Becky
Oh wow, there you go!!! I wonder though, why do you specifically want to use the button classes for your nav? If its just for the way they are styled, you could write up or copy the css used for the buttons for nav to style them the same way and then you wont have the button span classes to deal with… I
I know! It was such a simple thing.
I’m not overly attached to the buttons styles. Right now I’m more concerned about getting the scrollspy to use the .active class rather than getting the buttons to look right. It’s weird that it’s a different colour than when I click a link.
Yeah, I think thats cause the buttons have their own css stylings separate from links css that control how they look…thats the .btn:hover, btn.focus etc…
How did you get the FCC debugger on there btw…I was playing around with it and looks interesting!
It’s from the beta course http://beta.freecodecamp.com. You put it in a javascript in your head:
<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>
However the portfolio projects in the beta course has somewhat different parameters so it’s not a good guide on the current version. The idea is that once beta goes live you’ll have to get a project to pass that before you move on to next thing.
I’ve the button styling off on the fork i’m using http://codepen.io/Shutsumon/pen/PmGxdB so I don’t break the nearly done code and it’s still happening. From what I can find out by googling it is applying bootstraps own .active class to the li tag while my .active is applying to the link (which is why you can see my style peeking out from under it).
Becka