NewDev Portfolio project. Please take a look

Here is my Pen

It is functionally complete. The content needs a bit more TLC.

I would really appreciate any and all feedback:
Content
Layout
Code layout and organization
Any problems you experience on your device/browser

I’m new to this but I’ve got thick skin. Do your worst!

Thanks in advance for your time.

Hey there,

  • Add margin to separate image with title
  • Use bootstrap grids to make your website more responsive
  • Halfway through the page there is a massive white blank div (class - parralax2)
  • You shouldn’t rely on<br> elements, you should use margin instead

Hi Michal,

Thanks for taking the time to look at my page and code.

I have a bunch of questions for you. I apologize in advanced if they seem like silly questions. I started to address some of your suggestions but thought it would be better if I fully understood where you were coming from.

Add margin to separate image with title

Could you explain this a bit. I didn’t realize they were not separate. Which image and which title are you referring too?

Use bootstrap grids to make your website more responsive

I used the columns in different parts of the page. Are the “columns” bootstrap grids? If so, are you suggesting to use it for the whole page? So sections that aren’t broken into columns would respond better on different devices? Is that the benefit?

Halfway through the page there is a massive white blank div (class - parralax2)

The page has 3 background (parralax) images. When you say there is a blank space is the image not loading and instead just comes up as white space? If that’s not it could you let me know which part you are talking about? I tried removing the paralax2 div but that just removes the 2nd image and combines the first and 2nd sections.

You shouldn’t rely on
elements, you should use margin instead

Thanks. I changed the
's to margins. If a section is too small to fill a screen what can I use so that the screen will be filled in between images on all devices?
I am having a problem removing the
's after my Portfolio ID:

<div class="parallax2"></div>
<a id="portfolio"><span></span></a>
<br><br>

Without them, when you click “Portfolio” on the Navbar the Navbar hides the title. The
's fix that. I tried removing them and using margin-top and margin-bottom in the ID tag and I tried in the span tag. Neither worked. Any suggestions would be greatly appreciated.

Hi codemoneky :smiley:
First of all, I would like to apologise for not being clear enough, I am usually struggling with putting words together, that’s why in fact I am here giving other campers feedback by helping them I am helping myself.

Anyway…

Add margin to separate image with title

What I mean by that is that in your projects section there is no padding/margin between the title and the image, here is an image which probably makes more sense than the sentence itself.

Text is literally touching image which makes it look ugly, here is a screenshot of how it should look like:


Use bootstrap grids to make your website more responsive

By grids I did mean rows with columns, ideally, you would want your whole page to be created with columns to make it as responsive as possible although it’s not necessary. For example, you could make your project section more responsive on smaller devices. Look at the image what it looks like:

Barely can see the title.

I see you have used <div class="col-xs-6"> but that in fact splits those cards into two columns for devices with width smaller than 768px

Instead, you could use <div class="col-xs-12 col-md-6"> which would make your cards look the same on devices with larger width and on smaller devices it would take up the whole row so it would look like this

The title is still small here, but using media queries you easily make it bigger. Take note however how much larger the images are. It makes it viewing much easier.

Halfway through the page there is a massive white blank div (class - parralax2)

It seems that you have fixed the issue (or my browser didn’t load the image for some reason), so yeah. No issue here today so I have nothing to comment on.

If a section is too small to fill a screen what can I use so that the screen will be filled in between images on all devices?

I don’t really understand what you mean, if you could clarify what you mean then I am happy to help.