Just looking for some feedback on the portfolio project in the course I had a lot of struggles with it and spent a lot of time on google the past 3 days making this and I am kind of happy with it! So hit me with some criticism!
Hi. I like the overall look and feel of the page. It is very clean and handsome.
Your links work nicely.
However, your overflowing to the right and forcing a scroll across situation.
Consider making your body width 100% and height auto. You may also want to add bootstrap.js in the js settings since you have the css set. I’m not sure how this will help, but it seems to me that they would work together.
To get the responsive look, place a viewport meta tag in your html header setting. This will allow it to resize according to the viewing screen. On that note, if you add a class of img-responsive to your images then they also will resize more smoothly.
Instead of square buttons on your footer, consider each logo for the links - facebook, twitter and freecodecamp.
I hope this was helpful to you.
Thanks I didn’t even notice the scrolling to the right thing! and I saw looking at some other portfolio and saw that icon idea you’re talking about so I might do that instead! Thanks!
Let me know when it’s finished. I would love to see it.
Your page is easy on the eye, I like that.
However I think that I should add a few pointers that could make your site functionally better:
- Use this template for your navigation bar: http://www.w3schools.com/css/css_navbar.asp
- Study this code to make your navigation bar more responsive to movements like in the example code: https://startbootstrap.com/template-overviews/scrolling-nav/
- Add class = “btn” to all your buttons to give them bootstrap capabilities(I noticed you referenced bootstrap in the css but didn’t use it much).
4)Add font-awesome as another external css and use it to make your buttons have logos for twitter, facebook and freecodecamp. Put this link below the bootstrap as another external css: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
Incase you need any more content to you just reply.
Ok ok im having a lot of problems now, I tried to make a vertical bar for my social media links and only one shows up and this white space is back now and I can’t figure it out at all on how to fix it!
I can’t see it the problem.
I edited my link with the codepen
Ok, you have them in a table. It’s better to put them in a div row that is called social row-fluid pull-center then place each sm into a class with col-sm-4. I’m not sure why social is 200x300px. perhaps use percentage or em?
Ok sooo I took the advice and kind of redid the entire thing using bootstrap! Here’s what I have now I just can’t get the links to work correctly, the 2 white bars won’t go away, the stock images don’t go in a row and finally I’m not sure how to change the button colors once you click on them from the default colors. I want the social media buttons to be the same color as the navbar once you click on it and the focus color to change.
EDIT I think I fixed the example sites to go in a row now, and I tried to add the icons for the social media instead but I can’t figure out how to move them closer together would like to have them in place of where I have the buttons.
Hey I think you misunderstood my idea of font-awesome.
I like the progress you have made though with bootstrap.
if you’d like some tutorials that cover the navigation bar as well I recommend: https://www.youtube.com/channel/UCwHrYi0GL6dmYaRB0StEbEA3
You will code with the instructor and have a deeper understanding of bootstrap
Feel free to use my portfolio page for reference: http://codepen.io/edkahara/pen/qakWzG, check out the settings in css and you’ll see I’ve engaged font-awesome
You do not need the logos for the social media pages, with font awesome they will be inside your buttons. The social media buttons are at the bottom.
Yeah I wasn’t really sure what you meant by font awesome. I barely even knew what bootstrap was before a few days ago lol. But I’ll check out font awesome for sure and look at some YouTube videos.
Haha lol font-awesome was confusing to me too
check this out for reference: http://fontawesome.io/
The link to the font-awesome reference is at the external css settings(where you put the bootstrap reference)
I think I got it figured out! Here’s what i got now!
The only problems I have now are the white bar to the right and under the jumbo-tron I can’t seem to get rid of and when you click on the buttons they default to blue I want to change the colors but I’m not sure how.
EDIT and how do I remove the underline on my links on the navbar buttons and remove the blue showing that I have visited the link? I thought it was text-decoration: none; but I guess I am wrong?