Check out my portfolio?

Check out my portfolio?
0

#1

Hi Campers!

I’ve just finished my first attempt and would love any and all feedback you have about it! I particularly struggled with getting my headers and footers exactly how I wanted them, so any insight into that would be much appreciated!

Thanks!

Morgan

Portfolio


#2

Hi. Morgan.
You’ve got a good start here. Just need some tweaking.

First thing to change, in your HTML mark-up you have your navigation commented out. <!-- nav -->. So your navigation is not showing up at all in your pen.

Secondly, there is a huge amount of white space at both the top and bottom of the page that only has “MC” showing in it. This is because the image you are trying to use is not being uploaded and we are only seeing the alt attribute for the image. Try hosting the images on cloudinary.com
http://cloudinary.com/

I think once you correct these you will have met the challenge.


#3

Hello Morgan,

I also agree that the pictures cannot be seen, and that your nav is being hidden.
Once those two issues are corrected, then we will be able to view the site as you intended it to be.
I did love your ‘Once upon a time’ story!
Let us know when your done.

Enjoy!


#4

Hi!

You should tweak a bit responsiveness of your page :wink:

  1. I see that you used heavily CSS to set height (etc.)- try doing this in HTML by typing (for e.g.) style=“max-height: 60px;”. This way it should scale nicely on mobile devices.

  2. Place: meta name=“viewport” content=“width=device-width, initial-scale=1” to your “head” tag for proper rendering and touch zooming on mobiles.

  3. Remember, you can give each column more than one measure (for e.g.) : div class=“col-xs-12 col-md-8”. This way columns won’t stack on smaller devices :wink:

For review purpose it would be great to place comments before each section of your page (for e. g.) !–About me-- :slight_smile:


#5

Thank you so much! The photos have been giving me trouble for awhile now, so thank you for suggesting Cloudinary. I will definitely look into it! I have been using my public folder on dropbox, but apparently that doesn’t work for people other than me!


#6

Thank you! I’ll work on the photos asap-thanks for the feedback. I’ve commented out the nav because it wasn’t stacking the way I wanted it, so decided to go another route. I left the code in there just in case I wanted to take another stab at it later on!

Thanks again for your help!

Morgan


#7

Thank you! Tackling responsiveness is next on my to-do so I appreciate the tips!

In regards to #3, if you give the columns multiple measures, will it default to the first you list and work its way to the second depending on the device size?

Thanks again!
Morgan


#8

look great !!!
i have some device to you between section put link with icon , when click it is scroll down to next section :slight_smile:
Good job !!


#9

Hi, good work :slight_smile:
If you dont mind I will suggest tiny improvement that you can build on :slight_smile:

<div class="pageOne" id="p1" style="max-height: 900px;">
  <!--<ul class="nav nav-pills">
<li class="btn btn-nav">
  <a href="#p1">Home</a>
</li>
<li class="btn btn-nav">
  <a href="#p3">Work</a>
</li>
<li class="btn btn-nav"> <a href="#p2"> About Me</a>
</li>
<li class="btn btn-nav">
  <a href="#p4">Talk to Me</a>
</li>
  </ul>-->
  <div class ="row" style="height: 700px;">
<div class = "col-md-2" style="background-color:black;">
<ul>
  <li class="btn"><a href="#">Home    </a></li>
  <li class="btn"><a href="#p2">About Me</a></li>
  <li class="btn"><a href="#p3">Work    </a></li>
  <li class="btn"><a href="#p4">Talk to Me</a></li></ul>
</div>
<div class = "col-md-2"></div>
<div class = "col-md-2"></div>
<div class = "col-md-2"><img class = "logo-head" src="http://res.cloudinary.com/morgacoo/image/upload/v1498758195/MC-logo-white_eeuezc.png" alt="MC"/></div>
<div class = "col-md-2"></div>
 <div class = "col-md-2">
</div>
  </div>
  </div>

It is just bit of design suggestion by all means not the correct way to implement it :slight_smile: