Is coding overwhelming?

Hi there campers, I’m new here. been working on the portfolio project longer than i should and its kinda tiring. I definitely need help.
first off… A workaround for the scrolling effect of the navbar is eluding me.
Also my background image refuses to be responsive.
And what’s more annoying is that i uploaded the pictures for my project to cloudinary, but they don’t appear when i link them to my page. Any help will be appreciated, thanks and cheers.
my portfolio project
check my progress here! please any contribution will be deeply appreciated.

Hey @alara_joel_stealth, it can definitely be frustrating but you will pick up a lot of this stuff with more practice. I can help you with some of your questions.

Scrolling Navbar. Can you clarify what you are trying to accomplish?

Background Images: I’m not sure exactly what you are looking for but one thing that comes to mind is adjusting the background positioning. By default, background images are anchored to the top left corner of the box. If you want that to always be centered as you change the browser width, you should try adding background-position:center; to the css for that div.

Trouble loading images: I noticed a few errors in the way you are trying to load the images. For background images, you have the syntax correct, ex. url(; but when you use an img element and reference the image source you don’t need to write the “url()” part–you only write the address. Ex. <img src="">.

The other image error I found was this: <img src= "pictures/Alara Joel NYSC.jpg " class= "thumbnail">. What you wrote here would work on your local computer if you have an html file and a pictures folder in the same directory. It is saying the image is located in a folder located in the same place as the html file…which, in the case of codepen, cannot exist. So the solution to this is the same as above. Use the full url of the photo on cloudinary.

Hope this helps

1 Like

Try changing in css:

  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url(;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;

Also, in codepen->settings->javascript->quick add and select first jquery and after BS4 otherwise your dropdown nav on mobile will not work.

1 Like

@csorrentino thank you so much . you definitely helped. I solved the background image problem approximately 2 minutes before seeing your reply, and just as your reply said i saw my error. What’s more is a quick error check with my IDE(komodo-edit on a linux mint machine) would have pointed this out to me.
The scrolling effect I want to accomplish is the same as in the example project (animated scroll i guess). Googled up some code, but i think i’m missing something(probably how to reference the navigation items to the jQuery script).
In a nutshell i think my problem was low focus, I tend to do so many things online while coding simultaneously (drifting mind). But playing some really nice Chinese flute tracks i found on you tube did the trick, it got me relaxed and focused (would probably write a post on this soon)
Thank you for reaching out man you are awesome

thank you I will try these fixes you proposed soon. One question tho the units ‘vw’ and ‘vh’ what do they mean. and these are flexbox solutions right? since you definitely seem to have an understanding of it, what do I need to do to get flexbox and css grid working in my projects, and also for my IDE to recognize them. cheers

vw is viewport width and vh viewport height

:slightly_smiling_face:yeah got that thanks. happy coding

This seems to be a pretty good portfolio for being a starter. try learning CSS grid:

Easy responsiveness.

thanks sir… I just want to have fun doing what i love
thanks for the video once i finish this portfolio page i’ll go right into it. cheers