1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

My first html/css project

Discussion in 'HTML & Website Design' started by Aslam_, Oct 19, 2017.

  1. #1
    This is my first project of html/css after learning both languages on codecademy and some other tutorials. I would like if someone could rate it, btw ive been learning both languages since 1month and 1 week but not every day like 1 hour or 3 hours every 2-4 days. anyways rate it from 0 to 10 and give me some tips to improve my coding (if possible) and say what you liked most and what you hated most about my project. Thanks in advance and sorry if i have bad english,,,


    project: http://jsbin.com/wugukat/edit?html,css,output
    SEMrush
     
    Aslam_, Oct 19, 2017 IP
    SEMrush
  2. PASnow

    PASnow Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Depends on the class, but it seems alright for an HTML (ie. beginner) class. Tables are meticulous lol, so you got that outta the way.

    One thing to focus on with this stuff, is color theory. Your Heading/H1 & table color, the turquoise is a clash. I know your probably more interested in the coding & HTML/CSS portion, but when it was showed to me I took a liking to it. A designer instructor suggested I color pick a color in the photo (the orange tablecloth or the churches reddish rooftop) and use that as your tables color. Also, check out http://colorschemedesigner.com/csd-3.5/ and enter the colors hexidecimal code in and search for alternate or corresponding colors to use. (ie Brown might suggest tan, orange might suggest light yellow or light blue etc).

    Just feedback, I'm not master coder but I definitely didn't have an eye for color before he taught me that. Also, capitalize the first letter of the words in your heading. You could shorten it too, "Real Estate Rentals Pricing"
     
    PASnow, Oct 19, 2017 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    23,636
    Likes Received:
    3,190
    Best Answers:
    89
    Trophy Points:
    615
    #3
    It is really hard when you're starting out because there is so much to learn. Before you delve into design spend some time looking at other sites in the niche that you are targetting (in this case rentals) to see what they're doing and get design inspiration. And when the time comes get someone who knows how to write sales copy to help you with the text.

    When you name your classes use a consistent naming convention so that contenttableArea becomes contentTableArea

    http://jsbin.com/morukovomi/edit?html,css,output

    @PASnow & have different opinions on how you did tables. I'd prefer to see it like this with simpler classes and less html.

    
    <table id='priceTable'>
                <tr>
                    <th>Room Description</th>
                    <th>Price Range</th>
                    <th>Including</th>
                </tr>
                <tr>
                    <td>Room facing to the main entrance</td>
                    <td>$119.99-249.99/day</td>
                    <td>Breakfast, swimming pool, gym**, spa*</td>
                </tr>
                <tr>
                    <td>Room Facing to the forest</td>
                    <td>$199.99-399.99/day</td>
                    <td>Breakfast, swimming pool, gym, spa***</td>
                </tr>
                <tr>
                    <td>Room facing to the swimming pools and the beach</td>
                    <td>$349.99-699.99/day</td>
                    <td>Breakfast, lunch, dinner, swimming pool, gym, spa****, library</td>
                </tr>
                <tr>
                    <td>Suite (facing to the beach and forest)</td>
                    <td>$599.99-1499.99/day</td>
                    <td>Breakfast, lunch, dinner, swimming pool, access to vip area, gym, spa, library</td>
                </tr>
            </table>
    HTML:
    
    #priceTable {
        border: 4px solid lightblue;
        border-radius: .3em;
    }
    #priceTable td {
        font-family: Helvetica;
        background-color: #00f2cd;
        padding: .5em;
    }
    #priceTable td:nth-child(2) {
        font-weight: bold;
        background-color: #00f2cd;
    }
    
    Code (markup):
     
    sarahk, Oct 19, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,440
    Likes Received:
    1,511
    Best Answers:
    221
    Trophy Points:
    515
    #4
    Ease up on all the "classes for nothing" and "div for nothing". When you have perfectly good block level containers don't slap a extra div around each one "just because" -- DIV are best reserved for grouping MULTIPLE tags, not just one.

    Since you're not using HTML 5's (Idiotic halfwit ignorant redundant dumbass) SECTION tags even the H1 doesn't need a class on it since a well written page NOT using SECTION should only ever have ONE H1.

    You might want to learn a bit more about table structures, in particular CAPTION, TH, and SCOPE. Realistically what you have as a H2 before the table I'd have as a CAPTION inside it since it's the header for the table. Likewise your first TR are the heading, meaning it should be in a THEAD with scope="col" on them, the rest of them belonging in a TBODY. Since the latter two TD in the data rows are information about the first TD, that first TD should in fact be TH with scope="row" on them to form that semantic association.

    This is 2017 not 2007, you can lose the type="text/css" on the stylesheet link, and you should really have a MEDIA attribute on there to say WHAT devices your layout is for -- such as "screen". (typically we include projection and TV for legacy devices even if HTML 5 throws a warning about that -- again 5 is a bit backwards/stupid about some things). I also suggest a more meaningful name than just "style.css" since you're basically saying "style cascading style sheet" -- I usually use the name of the media target (screen.css, print.css, etc) so as to better tell each device's style apart.

    Your charset meta should also be IMMEDIATELY after <head> so that it is BEFORE any content-bearing tags -- like the TITLE tag since it has, you know... text inside it that the charset may effect! To that end I personally always condense the doctype through to the charset META to a single line to 1) make sure they are always in the right order, and 2) a gentle reminder NOTHING should ever be between those tags but whitespace.

    Later on you're going to get into something called media queries and responsive layout -- as part of your baseline markup just to be ready for this you should have something called a "viewport meta" to tell mobile browsers that we know what we are doing and not to override our style with their own wild guesses.

    There is also no such thing as <bold>, it's just <b>, and <b> should be used for the names of legal entities, corporations and the like, you appear to be adding MORE emphasis, which is <strong>'s job. Likewise that massive <p> filled with <br> separated notes looks like a list -- use a list! It looks like an ordered list at that. To that end I'd consider giving each "item" in such a list a unique ID, so that you could put anchors where you had the asterisks to scroll down or even mark them as appropriate. I'd then use <sup>1</sup> for example instead of asterisks to mark that association.

    Also I think you mean "Turkish Bath" -- since a turkey bath is brining a bird in saltwater. I don't think the site is about Thanksgiving Day prep.:D

    So if I was writing that same thing, the markup would be more like this:

    
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    <title>	A beautiful real estate!</title>
    </head><body>
    
    <div id="top">
    	<h1>Our real estate have rooms that are waiting to get rented</h1>
    	<p>
    		Our rooms are comfortable, well-decorated which will get you involved with the real estate environment! You can enjoy your time there having everything included starting from $119.99/day
    	</p>
    	<table id="prices">
    		<caption>Price Table</caption>
    		<thead>
    			<tr>
    				<th scope="col">Room Description</th>
    				<th scope="col">Price Range</th>
    				<th scope="col">Including</th>
    			</tr>
    		</thead><tbody>
    			<tr>
    				<th scope="row">Room facing to the main entrance</th>
    				<td>$119.99-249.99/day</td>
    				<td>Breakfast, swimming pool, gym<a href="#priceNote_2"><sup>2</sup></a>, spa<a href="#priceNote_1"><sup>1</sup></a></td>
    			</tr><tr>
    				<th scope="row">Room Facing to the forest</th>
    				<td>$199.99-399.99/day</td>
    				<td>Breakfast, swimming pool, gym, spa<a href="#priceNote_3"><sup>3</sup></a></td>
    			</tr><tr>
    				<th scope="row">Room facing to the swimming pools and the beach</th>
    				<td>$349.99-699.99/day</td>
    				<td>Breakfast, lunch, dinner, swimming pool, gym, spa<a href="priceNote_4"><sup>4</sup></a>, library</td> 
    			</tr><tr>
    				<th scope="row">Suite (facing to the beach and forest)</th>
    				<td>$599.99-1499.99/day</td>
    				<td>Breakfast, lunch, dinner, swimming pool, access to vip area, gym, spa, library</td> 
    			</tr>
    		</tbody>
    	</table>
    	<ol class="notes">
    		<li id="priceNote_1">
    			Access to Sauna for 1 hour maximum a day, other things such as turkish bath and massage will need to be payed.
    		</li>
    		<li id="priceNote_2">
    			Limited to 15 minutes a day.
    		</li>
    		<li id="priceNote_3">
    			Sauna, turkish bath and swirling pool for free.
    		</li>
    		<li id="priceNote_4">
    			Sauna, turkish bath and swirling pool for free + 1 hour of massage for free for <strong>ONE</strong> person.
    		</li>
    	</ol>
    <!-- #top --></div>
    
    </body></html>
    
    Code (markup):
    Which provides MORE than enough hooks to style it if you know how to use CSS selectors.

    You should probably also research what are known as "resets" -- not all browsers start out with the same default padding/margins/borders on all elements. The one I use in my CSS (written by Dan Schulz, RIP):

    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dl,dt,dd,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img, fieldset {
    	border:none;
    }
    Code (markup):
    Is small and targets JUST what needs to be reset. There are smaller resets but those can wreak havoc with styling form elements. There are larger resets but they're such bloated messes bordering upon being frameworks, they give resets a bad name. to the point that many of them, like "reset reloaded" makes many purists swear off them entirely!. The truth is as always somewhere in the middle, which is what this one is.

    Digging into your CSS the first thing I see is you aren't declaring fallback font-families. It's not enough to just say "font-family:helvetica" because what about Windows and Linux where helvetica doesn't exist? It will fall back on the SERIF default font for said OS (Times for Windows, **** knows what for linux) which is why you should at LEAST say a common sans-serif windows font FIRST, then your mac font, then the fallback family. So that's:

    
    font-family:arial,helvetica,sans-serif;
    
    Code (markup):
    Likewise you're not loading any webfonts, so custom installed fonts like forte won't exist for most users -- why I'm seeing Times New Roman here. You are also using the 'long-form' of CSS with individual properties for fonts when the condensed equivalent might be easier. Likewise if you're setting the background MOST of the time you can just say 'background' and not 'background-color'.

    As such this:
    
    .mainHeading {
    	font-size: 320%;
    	text-align: center;
    	font-family: Forte;
    	color: #0affa5;
        line-height: 1.25;
    }
    
    Code (markup):
    I'd probably be writing more like:
    
    .mainHeading {
    	font:normal 320%/125% "Forte",arial,helvetica,sans-serif;
    	text-align:center;
    	color:#0affa5;
    }
    
    Code (markup):
    Oh and that "line-height:1.25" without saying 1.25 WHAT?!? Broken nonsense that YES, I realize the dipshits over at Sitepoint and several other sites CLAIM makes it "inherit properly" across child font-size changes. That's 100% grade A farm fresh BULL as every site that does that is broken when the default font metric is changed -- aka the target audience for declaring font sizes in EM or % in the first place! I actually lost ALL respect for anyone over on that site over this issue as they were talking out their ass and no matter how many screencaps I sent them of it being broken, they stuck their heads in the sand going "wah wah, IS NOT!!!" like a bunch of petulant five year olds!!!

    The only time it's ok to omit a metric in CSS is when there's zero -- since zero is zero regardless of WHAT -- with ONE exception. If/when you get to CSS transitions Gecko based browsers like Firefox are too STUPID to realize that 0 might mean you want zero seconds, so you HAVE to say "0s" ... DERP. (and literally it's just that one browser engine!)

    Also avoid using percentages for margins, I'd base it on font-size (em) instead... usually you're better off padding instead of margin when you can so as to avoid a NASTY headache called "margin collapse" -- and really your outermost container (#top in my rewrite) should probably have a EM based "max-width" on it so that long lines of text do not become unwieldy on really big displays. Using max-width (along with possibly min-width) is called semi-fluid layout -- which along with elastic layout (declaring those widths, padding, and margins in EM) is the on-ramp to accessible design getting you ready for the next step -- responsive layout.
     
    deathshadow, Oct 19, 2017 IP
    sarahk likes this.
  5. David Morrison

    David Morrison Banned

    Messages:
    241
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    1
    #5
    The colors are terrible.
     
    David Morrison, Nov 5, 2017 IP
  6. israinsolutions

    israinsolutions Greenhorn

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    As you are a beginner, this will be lesson for you that the colors combinations are not good, layout adjustments also has some issues.
     
    israinsolutions, Nov 7, 2017 IP
  7. rebuildwebsite

    rebuildwebsite Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    for beginner who learn (not everyday) for a month, thats prove that u have passion to learn this language, great job mate :)
    all you have to do now just improve ur instinct about the coloring and keep learn and focus, and hear what other said above.
    my rate 6.5/10 :) keep it good work
     
    rebuildwebsite, Nov 10, 2017 IP
  8. dragoshs

    dragoshs Active Member

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #8
    looks like you're passionate about it. just stick with it and invest more time to get better. good job
     
    dragoshs, Nov 10, 2017 IP