- This topic is empty.
February 23, 2015 at 8:53 am #196598
I’ve just finished my header in html/css and would appreciate some feedback on my first attempt.
Thank you.February 23, 2015 at 9:45 am #196607Paulie_DMember
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.February 23, 2015 at 12:07 pm #196624
Thank you for the feedback, do you have any suggestion for my css?February 24, 2015 at 3:48 pm #196706
Thank you for the advice Sahneisme, I finally have a better understanding of the class and ID Attributes.February 26, 2015 at 2:58 pm #196901
So what type of situation would I be required to use an #ID?March 6, 2015 at 11:47 am #197488
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.
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’sMarch 7, 2015 at 2:41 am #197512
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:
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.March 7, 2015 at 11:19 am #197558
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:
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;
- 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:
You should just drop the span and add a class to the a and style it directly.
March 11, 2015 at 3:05 pm #197917
- lastly, just fix that UL we described above.
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.April 6, 2015 at 7:07 am #199829
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.
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 :)April 6, 2015 at 8:08 am #199837
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.April 8, 2015 at 8:33 am #199986
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 :)
Carlton.April 10, 2015 at 3:12 am #200129
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.
JohnApril 14, 2015 at 12:50 pm #200459genaParticipant
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.April 14, 2015 at 4:29 pm #200466
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.
- The forum ‘Design’ is closed to new topics and replies.