First web page project - need feedback!

Code Feedback
1

Hello! :slight_smile:
I’ve been working for a while at my first web page project. I need so much your feedback please!
What can I do to improve the page?
Is it enough to present it at a job interview?
I’ve build it using bootstrap.
Thank you!

2

Hi there!

Nice site. It’s a great start. I like the large image slider and the “Barcelona” text overtop. Your top nav that slides to the various parts of the page works well. Your breakpoints also work very well. I love the way you made it Responsive.

A few picky things:

  • The font size for the word “Welcome” is larger than the rest of the nav. Also, most sites don’t say “Welcome”.
  • The login link doesn’t go anywhere.
  • At the widest breakpoint, your boxes (Apartment rental / Hotels) touch each other and this looks funny. I would add a margin.
  • These boxes are also not the same height.
  • The outer edges of your boxes (left and right) don’t line up. I would make everything line up along an invisible line.
  • Your social media links in the bottom right of your footer don’t seem to go anywhere.
  • The recommended links at the bottom are piled atop each other and I would try and find a nicer way to lay them out (maybe in columns or maybe create a second footer?).
  • I’m not crazy about the font for your headings, but that’s just personal taste.
  • One more thing: In Codepen, you can use the cog wheel to import scripts, rather than write them in manually in the head of your HTML.
3

Hey. Aside from what @solona suggested you could use background images instead of images in your carousel; to me, they are always more manageable but then again, it’s a question of preference.

Basically each of your .item divs would drop the img inside of it and be like this:

<div class="item" style="background-image:url(your_image_url);">

And in your CSS you would have:

.item {
  min-height:50vh; /* Adjust this to change the height of the carousel */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

The vh unit is helpful for styling elements based on the viewport size.

This is just a suggestion, of course. Aside from that, the page is pretty clean. For a first web page it’s quite well done, good work!

5

Thank you very much!!! :slight_smile: