Portfolio Project - Feel free to add yours in a comment as well!

#1

I was hoping to find a group post with people’s portfolio pages but I didn’t see one…so here’s mine! Definitely open to any helpful critiques from anyone…I’ve submitted it for now, but as I complete more projects I’ll be adding the thumbnails and such so I’ll be able to update/change things later on.

Please feel free to add yours as a comment to this post too! Would definitely love to see what you’ve all come up with.

Linda’s Portfolio Project

1 Like
#2

Hi :slight_smile:

I think is a good idea insert a meta tag in the header:

Bootstrap documentation (http://getbootstrap.com/css/) :

Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your .

 <meta name="viewport" content="width=device-width, initial-scale=1">

The codepen linter throws this errors:

CSSLinter:

Don’t use IDs in selectors:

#menubtn {
  color: white;
}

#intro {
  color: white;
  background: green;
  font-size: 20px;
  padding-top: 50px;
  padding-left: 10px;
  font-family: 'Inconsolata', monospace;
}

#profilephoto {
  padding-bottom: 15px;
  padding-top: 35px;
  height: -10%;
  width: -5%;
}

#portfolio {
  background: purple;
  padding-top: 50px;
}

h2 {
  font-family: 'Lalezar', cursive;
  font-size: 54px;
  color: white;
}

#portfolio h4 {
  font-family: 'Inconsolata', monospace;
  font-size: 20px;
  text-align: center;
}

#contact {
  background: #663300;
  padding-top: 30px;
  padding-bottom: 10px;
}

HTML:

It seems that your intro section don’t comply with bootstrap (is missing the “.container”):

<div class="row" id="intro">
    <h2 class="text-center">My Story</h2>
    <div class="story col-xs-8">

Bootstrap documentation (http://getbootstrap.com/css/):

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

#3

Thanks for the help! I’ve gone in and added the meta tag to my header, which I didn’t know about.

I had the container-fluid tag above my nav bar, instead of my intro, and just containing all of my code…not sure if that really was making a difference or not, but I did move it to be right ahead of my intro instead of the nav bar. Still seems to look alright, so I think that should be good.

So at first, I had no idea what you meant by CSSLinter, but now I’ve figured out a new way to check my code! lol So thanks for that. :slight_smile: I’m definitely curious to hear some opinions though - why NOT use ID’s as selectors in CSS? I’ve used them to identify specific divs and items in those divs…I mean I guess I could change most of those to specific classes instead, but…I don’t really see, at least in all cases, why that would make much difference. Definitely something to ponder, I guess.

#4

you’re welcome :slight_smile:

MDN documentation:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document.

Bootstrap documentation:
http://getbootstrap.com/css/#buttons

Use any of the available button classes to quickly create a styled button.

in your code :

<span class="glyphicon glyphicon-menu-hamburger" id="menubtn"></span>

Bootstrap is using the “id” for the javascript code, your css rule affect the “hamburger icon”, not the color of the navbar buttons. If you changes your css code to:

#menubtn {
  color: red;
}

And shrink the page (the broser window) the navbar is gonna collapse, and the top menu it is going to be replaced for an “hamburger menu” (color: red).
Bootstrap assumes that you are going to use a class for the style. I forked your Portfolio:

// https://codepen.io/erretres/pen/NAorRP

#5

Wait, I’m confused: you mentioned this:

What JS code? I don’t have any on my page. Now I could see, if I had JS and CSS using the same id, how those might conflict with each other. So if that was your point that’s understandable and a good reason to only use them in one place. But I created the id name for that span, it wasn’t anything bootstrap related, and I used it specifically to make the hamburger icon white (or red). I wasn’t attempting to affect the color of the navbar buttons.

#6

Hi :slight_smile:

Yes, you have:

https://code.jquery.com/jquery-2.2.4.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Because (Bootstrap documentation):
http://getbootstrap.com/components/

Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

My point is : Bootstrap assumes that you are going to use a class for the style.

My mistake, I just assumed that.

An article about IDs and style: https://css-tricks.com/a-line-in-the-sand/

#7

Oooohhhh that’s right, I forgot about that. lol Since I didn’t write my own JS, I completely forgot I had to add that there so the navbar would collapse. :slight_smile: Got it now! lol I’ll check out that link too, thanks!

#8

Looks good! Also here’s a link for posting and reviewing portfolios. For future projects, just search “Lets discuss X” where X is the name of the project. You’ll find a review thread for most of them.

#9

Awesome, thank you! Also, love the photo/title. :slight_smile: One of my favorite series and writers!

1 Like