Some feed back on my mark-up.

[Takeaim]

Hey,

I’ve just finished my header in html/css and would appreciate some feedback on my first attempt.

http://codepen.io/Takeaim/pen/gboBax/

Thank you.

[Paulie_D]

The HTML markup is basic and semantic so nothing wrong there.

The CSS isn’t quite finished I guess are the bg image is a little funky at larger screen sizes.

[Takeaim]

Thank you for the feedback, do you have any suggestion for my css?

[Takeaim]

Thank you for the advice Sahneisme, I finally have a better understanding of the class and ID Attributes.

http://codepen.io/Takeaim/pen/gboBax/

[Takeaim]

So what type of situation would I be required to use an #ID?

[Robby]

I’m gonna disagree with shane. I always put id’s on my root level elements and only use classes if its something I know will be repeated across the page (stuff like widths/padding/colors/etc). I try to write my css in a way where i could take out any element on the page and plug it in somewhere else. For instance on your <header> element I’d dump all the classes and just place an ID on the main tag.

#masterHeader
p
h1

Everyone has their own convention and it really doesn’t matter though.

I’d just use strong and a instead of <spans> everywhere.

I’m not into the new html5 h1’s everywhere. I really don’t think your page above needs sections for every paragraph, they all seem related and under “Hi I’m Carlton”. I’d remove all the <sections> and make the headings h2’s.

Your unordered list at the bottom is backwards. The immediate children of the ul should be li’s. You should swap yours a’s and li’s

[Robby]

All I’m trying to say is 90% of websites I look at have so many classes you can’t tell whats going on.

You guys can disagree with me, but I’ll only use classes for stuff I know I’m going to reuse across a page or multiple pages. Otherwise I try to use as few IDs/classes as possible. For instance if I was going to recreate that page above my markup would look like this:

<header id="masterHeader">
    <h1>
      HI, I'm
      <span>Carlton!</span>
    </h1>
</header>

<article id="introduction">
  <h2>Introduction</h2>
  <p>I studied to become a <a href='http://www.silversmith.com'>silversmith</a> at <strong>university</strong> for many years but half way through switched to jewellery as I found it to be more <strong>interesting</strong>.</p> 

  <p>I've worked independently since 2007 in a <span>cooperative</span> studio which meant doing nearly everything related to the business by myself.</p>

  <h2>Where I'm From</h2>
  <p>I'm was born and raised in the UK, London to be more precise.</p>

  <h2>More About ME.</h2>

  <h3>My hobbies</h3>
  <p>I do like to induldge in the odd <strong>rts</strong> game whenever I have the spare time, but I've always found chess more enjoyable (there's nothing more satisfying then out thinking & crushing your opponent) so I've recently joined a chess club to horne my spartial intelligence and inprove my strategical thinking to better plan ahead</p>

  <h3>Career aspriations</h3>
  <p>I'm hoping to obtain a place on a <a href='http://www.foundersandcoders.org'>Javascript course</a> in September to furhter my knowledge.</p>

   <h3>My background.</h3>
   <p>I've dabbled with computers over the years but nothing to specific, but I feel I've hit the ground running learning Html, Css and then on to Javascript!</p>

   <h3>My taste in music</h3>
   <p>My tatse in <strong>music</strong> is quite varied, from jazz to reggae and most recently I've taken a liking to modern classical music from movies when coding, I found the music claims my mood, espicially during frustrating moments when I become stuck.</p>
</article>

<footer id='masterFooter'>
  <p>Say hello to me on these social networks:</p>
  <ul>
    <li><a href='http://www.Github.com'>Github</a></li>
    <li><a href='http://www.Twitter.com'>Twitter</a></li>
    <li><a href='http://www.plus.Google.com'>Google+</a></li>
  </ul>

  <p>cover image via <a class="largeLink" href='http://www.unsplas.com'>Unsplash</a></p>
</footer>

It just my style, I find my markup and css are far more readable and maintainable this way. Again its just MY preference and what works best for me.

[Robby]

Alright, maybe I’ll recode it as a demonstration. I’d be curious to see your convention as well.

To bring this thread back around, here’s some way I think you could improve Takeaim:

• You have multiple classes do the same thing, stuff like:

`.masthead-intro,
.masthead-heading{
text-align: center;
}

.masthead-heading{
text-align: center;
}
`

You can just use one of those.

• You should start learning the short hand for CSS elements, for instance you can declare the borders in one line:

border-top: 10px solid black;

or

margin: .5em;

• Try to use the same measurements everywhere (PX/EMs/etc).

Pixels will stay fixed no matter what, with em’s everything will grow if I raise my dpi. The way it is now some stuff will grow and others will remain fixed if I change my setting to %125.

• Dont overide yourself. In your css you set the body font to arial, then overwrite it at the bottom of your stylesheet.
• I wouldn’t use a section tag for every paragraph. They all should be part of the same section. I’d probably just use an article tag and have everything a subheading to “Hi, I’m carlton”. Someone else join in here and tell me if you agree.
• Try not to use as many spans. Spans hold no semantic value, so whenever there’s a chance to use a more meaningful tag do it.

For example I see you using spans a lot to make text bold. I’d urge towards using strong or em.

Another example is this:

<a href='http://www.foundersandcoders.org'><span>Javascript course</span></a>

You should just drop the span and add a class to the a and style it directly.

• lastly, just fix that UL we described above.

[Takeaim]

Hi Robby,

Thank you for your comments I’ve found them very useful.

I just started the Thinkful! frontend course and I was using their templates and following their instructions set out in their curriculum, hence why I made so many changes on my css.

[Johannes]

Re: Classes vs ID’s

The general consensus on the topic is: When working on small projects it doesn’t really make a difference, work the way you are comfortable, using ID’s for unique content is fine as long as you are 100% sure you couldn’t use the styles somewhere else.

However, when working as a team or on larger projects you should start thinking about the various types of CSS systems out there and pick one, I personally use SASS along with elements of OOCSS, saving ID’s for JavaScript purposes. I change all the time. Looking into BEM (thanks to the recent article here on CSS tricks).

Of course, coding is largely personal preference but these systems were created for a reason and don’t let your own code prejudices blind you, take some time to research, experiment and grow :)

[Johannes]

@Takeaim

You’re definitely on the right track, just needs tightening up (aka: practice, practice, practice) :)

As far as general nit-picks, I wouldn’t recommend having text (the spans in your case) colors/styles so similar to links as it is confusing.

Also, for a “cover” image in the background up the top, needs to be far higher resolution.

Now for the code: here is how I re-factored it quickly for you to take a look at, this isn’t exactly how I would personally code it from scratch but it’s a step in that direction.

http://codepen.io/sliver37/pen/XJwMaM

[Takeaim]

Hi John,

Thank you for the feedback it’s helped in a variety of ways especially the overall feel and look to a website, I was never sure what sort of convention to use but it seems it’s mostly up to the person working on the site.

I can see why you changed the header name, makes it much easier to understand, but class=masthead to class=rows was that for the @media sections or was it just your preference?

I agree with you on the image, but it seems there’s a lack of quality when it comes to free images online.

I also prefer the colour you’ve applied to the social links :)

Regards,

Carlton.

[Johannes]

Hi Carton,

For the class=row, yeah pretty much just personal preference/habit. To make things faster, I usually have a grid-system in place for most of the websites I create which uses row/column classes.

I usually also add the name of the section just like you originally had (e.g masthead, banner, main-content) so I can target them if I need to for unique styles and to keep things easier to read.

Cheers! :)

John

[gena]

I am with John/Johannes- that is all good advice. You will get there, just keep reading and practicing and you will learn something new everyday (ok, 12 time a day lately). This field changes so quickly that it’s really hard to keep up with what ‘best practices’ means day to day. Find a few blogs written by the people at the top of the field (ie experts, who actually know what they are saying- and take anything from a forum with a grain of salt. I see bad advice daily on forums.

Everything is easier if you only have to learn (it right) once.

[Takeaim]

Hi gena,

Thanks for the feedback, I’ve signed up to Treehouse and Tutsplus for the extra practise, help and info.

As a newbie to all this html/css could you recommend a few blogging sites that might add me in my quest to html/css mastery as there’s so much information out there good and not so good.

Regards,

Carlton.

[Author]

Posts