www.webdeveloper.com
Results 1 to 8 of 8

Thread: My First HTML CSS Page!

  1. #1
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    81

    Post My First HTML CSS Page!

    Ok ok ok... when you all get done with the "dont give up your day job, jokes!".. ... and if it even runs in your browsers?.. Yes, its an absolute tragedy!... but you gotta start somewhere, right...

    If anyone could spare a sec.. I'd be so grateful if someone could check its code and let me know if you see any "red flags"...

    Theirs a lot of small flags.. no semantics, inefficient use of css etc etc.. I believe I'll understand these things more.. by just making pages over and over again.. so wont bother you guys with questions that should be answered with time...

    Making this page was tempted by JS & jQuery a few times but was determined to keep it 5 & CSS only for now.. and css always provided a work around if I kept at it...

    All hand coded with Notepad++.. Was a little scary to have to stand on my own 2 feet.. but what a great program!.. Why didnt you guys tell me?.. hehehe... "Big Boom in a little box!".. its the little things beyond fast.. someone had the lights switched on the day they made that...

    So I guess my questions are..

    1. Red Flags

    eg. Dude dont make another page until.........

    2. Snow Ball

    Ive written this page so many times from errors & stuff ups etc etc... but still thinking ABCD, instead of grouping tasks more efficiently.. I welcome suggestions/planting the seed to more efficient coding...

    eg. Dude if you took that part and that part you could have...... (just to get the thought pattern, ball rolling)

    3. Height 100%

    Is their anyway?.. I had no luck.. With a sticky header & footer I was really hoping to scale the inner content, 80%ish of page.. Fail!... The best I could do was EM.. Completely inaccurate of course, but at least some level of scaling... So did everything width % and height EM.. and px as a last resort... (why did they have to take table height 100% away?)

    For better or worse?.. welcome any newbies to view source code as a very basic example of html5 & css/3... The layouts very basic and clear, basicly so I could see what the hell I was doing?... any questions welcomed!

    As to the old boys.. as always, so grateful for any wisdom!

    Ty guys CT

    Index.html - (original)[/COLOR]

    Index.html - (updated)

    ps - have just uploaded so checked the html & css (w3c) "bummer!".. have just worked out how to use IE 11s inspector.. Deviated..

  2. #2
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    81
    Devastated!*

  3. #3
    Join Date
    May 2014
    Posts
    936
    Well, for a first outing it's not horrendously bad, though you REALLY have a lot to learn about the HTML tags and things like logical document structure. The sheer volume of DIV you are throwing at this really showing that you aren't leveraging semantics at all.

    Laughably you also have that garbage HTML 5 shiv nonsense when you didn't even use any HTML 5 tags.

    Logical document structure and semantics means using tags to say what things ARE. The MOST important of these is numbered headings. All pages should at LEAST have a H1 as that's the heading under which EVERYTHING on the page is a subsection. If everything on the page is a subsection of the H1, guess what? You should have no more than one H1. (HTML 5 rules when you start using crap like SECTION and ARTICLE pisses on this, my advice: Ignore those even if writing 5!)

    An H2 means the start of a subsection of the h1, a h3 means the start of a subsection of the H2 and so forth. That's why skipping over numbers (h4 without a h3 or h2 before it) is gibberish, and why chosing numbered headings based on their appearance is even bigger gibberish.

    I'd also suggest that you save as tabs and use two-space width tabs. It's cleaner and easier to deal with -- that way you could also indent more since to be frank, you aren't doing it enough. TAB is your friend. Remember Zardoz? "Use the gun" -- Use the tab. The tab is good.

    Ok, most people try to forget that movie, an hour and a half of Sean Connery running around in a diaper...

    Pretty much your whole layout is one width, so why the double wrapping DIV on EVERYTHING. One outer div to set the width is far easier to deal with.

    That's why for example where you have:
    Code:
    </head>
    
    <body>
    
         <!-- Header Content & Containers -->
          	
         <div id="header-container">
         <div id="header">
    
             <img id="location" src="images/heading.png" width="369px" height="73px" alt=""/>
    
         </div>
         </div>
    	 
    	
    	 
         <!-- Main Content & Containers -->
    	 
         <div id="content-container-main">
         <div id="content-container-inside">
    	 
    	 
         <!-- Left Side Content & Containers -->
    	 
         <div id="content-container-leftside">
    	 	 
         <div id="newbie-container">
    	 
         <div id="newbie-text">
             A Newbies advice to fellow Newbies!
             <a href="html/newbies.html" id="newbie-enter">ENTER</a>
         </div>
    	 
         </div>
    I would have:

    Code:
    </head><body>
    
    <div id="top" class="widthWrapper">
    	
    	<h1>
    		My Sandbox
    		<span><!-- image replacement sandbag --></span>
    	</h1>
    	
    	<div class="navSection">
    
    		<div id="newbieText" class="subSection">
    			A Newbies advice to fellow Newbies!
    			<a href="html/newbies.html" id="newbie-enter">ENTER</a>
    		<!-- #newbieText.subSection --></div>

    As you can see, far, FAR less DIV in there... though I would likely be using some more advanced CSS techniques like gilder-levin image replacement (hence the empty span), and so forth.

    I would not be bothering keeping those CSS files separate -- it's an extra handshake to the server for nothing. Despite what some nutters in the industry seem to be packing people full of sand with right now, a monolithic CSS (aka single file per media target) usually doesn't take enough extra time to transfer if you've written it even close to right compared to the extra handshakes of separate files, and you can leverage it to pre-cache the appearance of sub-pages for a minor not even worth mentioning penalty on first-load. (a penalty usually offset by the extra handshakes anyways).

    Your CSS isn't too bad, though a smallish reset might help make things better. One big faux-pas I see is that you seem to be declaring heights all over the place -- do yourself a favor, and let padding and flow set the height instead of trying to explicitly set it. You'll end up with a more dynamic page as a result.

    You also seem to be using every form of linear gradient EXCEPT the actual prefix-less CSS3 version. I'd skip the silly dx-transforms. I'm actually a bit leery of linear-gradient as the performance is horrible, the memory footprint is a pain in the backside, and it can result in slow hovers, slow scrolling, content pop-in while scrolling, and a host of other issues. Increasingly I'm either faking the same general appearance with an inset box-shadow, or sucking it up and using a image... though background-size can be used to fix a lot of the issues as well by setting it to 1px wide and then tiling it. See, funky thing --linear-gradient MAKES an image that's used as a background-image. Said image is the size of the element. Forcing it to 1px wide makes a narrow image that can then be tiled without the massive memory issues.

    I highly suggest that when you use :hover you also target :focus -- that way you aren't leaving people navigating with keyboards, blow-sticks, and so forth out in the cold.

    I'm also seeing some alignment issues, not sure what's causing that though it's probably inline-block without vertical-align. That's an advanced detail.

    You seem to have a pretty simple page overall -- if I have time later I'll toss together a quick rewrite "my way" to show you many of the things I just mentioned and how to address them -- with a breakdown/section-by-section explanation of the how/what/why of it.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    936
    Oh, also you did a few things I HIGHLY advise against doing in a design -- like sucking down valueable top/bottom real-estate with the fixed position footer and header, and the goofy internal scrollbar (which is resulting in a double scrollbar here making navigation painful) -- that's what you'll often hear me call "gee ain't it neat" nonsense that I wouldn't put on a website in the first place. Instead of fixing the height and playing those games, if I REALLY wanted it to fill the screen regardless of height, I'd use what's called a "100% min-height" layout. (which is "easier" now that we have flex-box).

    ... and lands sake, placeholders are NOT substitutes for labels.
    http://baymard.com/blog/false-simplicity
    http://www.pardot.com/faqs/best-prac...rs-and-labels/
    http://www.nngroup.com/articles/form...-placeholders/
    http://www.webaxe.org/placeholder-at...s-not-a-label/

    ... or even the actual specification:
    http://www.w3.org/html/wg/drafts/htm...lder-attribute

    ... and I quote:
    The placeholder attribute should not be used as a replacement for a label.
    Of course with half the people out there vomiting up HTML any old way, most of them either don't know how or can't be bothered to use LABEL's properly in the first place -- just like the rest of HTML. Then they wonder why their sites are inaccessible train wrecks.

    -- edit --

    Also, don't use double-breaks to do paragraph's job.
    Last edited by deathshadow; 08-23-2014 at 04:23 PM.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    81
    As always... a huge thank you for taking the time for such a detailed review/feedback!... Greatly appreciated mate..

    Will reply as I read.....

    "logical document structure".. I know, I couldnt see past doing Item-A.. wrap it up.. Start Item-B etc etc...

    Shiv and no 5.. thats so funny!

    Thanks for the code demo.. even without the tweaked css got the idea "Snow Ball".. ty

    For this little project 1 handshake for all.. ok..


    Gradient "insert box-shadow" Cheeky method.. I'll dump the whole gradient idea didnt know IE had so little support for it.. thanks for the extra info.. To switch the 6 buttons to images sprites feels to heavy.. thinking slim image tiled & 20% alpha or something...

    "when you use :hover you also target :focus".. of course will look into ty

    "100% min-height" flex-box.. Awesome I'll find answers.. ty

    Yeah the whole placeholders/labels is new to me.. will read up on the links.. ty...

    What I was trying to achieve was a nicely scaled page with no scrollbars?...

    I fully support your ideas on the second post.. In fact whenever you guys drop a big one, I save them...

    From my back notes.. I completely understand it now, would have been nice if I had before I started making the damn page! lol...

    -deathshadow-
    DIV and SPAN are great for grouping like elements or application of style once you've used up your semantic markup -- that is why they shouldn't be added to your HTML until AFTER you've written your semantic markup and only when you NEED them.
    again thanks for the amazing feedback dude...

  6. #6
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    18
    Hi Code-tard. Being a newbie as well as a fellow Aussie (7 months on the job) I thought that I would say hello and congratulate you on a fine first effort. If you are interested in having a look at my first attempt, my web-baby resides here http://www.pedroduino.com/index.php. Deathshadow is certainly a god send within these pages and always goes above and beyond the call of duty to help newcomers. All the best Pedro

  7. #7
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    81
    LOL.. Dude Ive just said that to him in a post!.. to funny...

    Awesome to here from another newbie.. and totally welcome others to do the same.... can get a bit daunting in the company of all these geniuses....

    Your project/babie rocks dude.. Well done!... I think we get points for effort, dont know if we get points for pretty ....

    But I assume you're like me.. and I dont care .. I wrote every line myself!.. and I have no doubt it will continue to be a tragedy for sometime yet.. lol... but your's is a lot more polished than mine and your a lot further down the road than me...

    Still, I know Im new to forums and hanging here.. but I already dream of the day I see "please review my website" and find yet another new website designer start up.. with yet again 90% template 100% bootstrap... God forbid a webdesign company dare write there own code for there wibsite?!... I reckon 20 reviews and all the same.. Switch the pic's and icons.. Done!.. awesome??!... I'll keep dreaming

    Dude if you ever see something in my babie you want to know about, just sing out... and if ok I could ask the same of you.. eg. Your sticky header shrinks when scrolling.. Ive been wanting to know about that...

    Not now, my poor brians way to fried with a ton of other things right now.. but 1 day down the road if ok?...

    Anyways awesome to meet ya mate...

    Brian

  8. #8
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    18
    Sure Brian, you are welcome to any limited advice I may be able to offer

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles