Pahelp po for verification kung tama po HTML/CSS

noturtypicalgirl · Jan 30, 2017

Hello po, need ko lang po pacheck itong HTML and CSS code ko po, beginner lang po ako and nag start mag aral nito, Sana po matulungan nyo po ako at mag suggest po kayo kung ano po dapat. Salamat po HTML header pa lang po ako.

HTML

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>sample html </title>
	<meta name="description" content="A basic template using HTML5" />
	<meta name="keywords" content="basic, template, HTML5" />
	<meta name="author" content="Simple Website" />

	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="wrapper">

		<header class="head-mast"> <!--header logo with nav -->
			 <div class="site-head">
			 <h1>Logo name</h1>
			 <h2>Site tagname</h2>
			 </div>
			<nav>
			
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
					<li><a href="#">Link 5</a></li>
				</ul>
			</nav>
		</header>

		<div> <!--main content-->

			<div class="banner">
			<img src="https://www.odesk.com/blog/wp-content/uploads/2014/03/BulletJournal-1024x563.png" alt="image_header" >

			</div>

			<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>

			<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>

<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>
			
			<section>
			<h1>Article 2</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>


			<section>
			<h1>Article 3</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>



		</div>


		<footer>
			<p>Copyright Allrights reserverd</p> <!--- Sub links and sitemap -->
		</footer>
	</div>
</body>
</html>

CSS

Code:

*{
	margin:0;
}
.head-mast{
	margin:0;
	height:90px;
	background:rgb(3, 149, 193)


}
.site-head{
	
	padding:1px;
	float: left;
	display: block;



}
.site-head h1{
	color:rgba(242, 243, 244,0.9);
	font-size:2em;
	padding:20px;
	margin:1px 0  0 25px;
	max-height:10px;
	max-width:180px;


}
.site-head h2{
	color:rgba(242, 243, 244, 0.9);
	font-size:15px;
	margin:0 0  0 48px;
	padding:2px;
	max-width:140px;


}

nav ul{

	position: absolute;
	margin: 17px 0 0 570px;	
}
nav li{
	
	display:inline-block;
	padding:20px;

}
li a {
	text-decoration:none;
	color:#fff;
	font-family:Tahoma;
	font-size:17px;
	font-weight:bold;
	text-transform:uppercase;


}
ul li a:active, ul li a:hover {

	color:#211e1e;


}

raymundpogi · Jan 30, 2017

tinignan ko lng yung code mo TS, ok naman yung code mo. ang linis nga ng structure

noturtypicalgirl · Jan 31, 2017

raymundpogi said:
tinignan ko lng yung code mo TS, ok naman yung code mo. ang linis nga ng structure

salamat po wala pa po sya masyadong design sa ngayon nag sisimula pa lang kasi ako sa header part, but about po dun sa css sa mga declarations ko ng mga box models okay naman po?? mejo nalilito pa po kasi ako, ayoko naman po kase mag jump agad sa bootstrap for easy design, gusto ko din po kase mamaster tong css, anyways any tips po

superprogrammer05 · Jan 31, 2017

Hi. Welcome to the world of creators. Here's some tips for you (for web designing / CSS).

#1: Magdownload ka ng lahat ng commonly used browsers: Firefox / Chrome / Safari / Opera / IE / Edge
- Importante sa isang designer na tinetest ang stylesheet nya kung anong behavior sa iba't ibang browser. Minsan kasi (or most of the time) may mga layout na maganda sa firefox o chrome tapos di pala ok sa isa especially IE and Safari.

#2: It is always a good practice (atleast para sakin) to use a CSS resetter at the beginning of your main css file.
- May kinalaman ito sa browser din na gamit ng viewer mo, ang mga browser may default style na gamit yan when rendering a page so using a resetter makes sure na iisa ang itsura ng layout mo. Naexperience ko dati may layout akong ginawa na ok sa chrome tapos ang pangit sa firefoxat di ko malaman ang problema until naresearch ko na magkaiba sila ng default style na rinerender sa line-height, margin etc.

Sample css resetter:
(You can use this but I advise na iedit mo sya based on your preference kung ano sa tingin mo ang 'default' na style for your layout.)

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#3 Its good na inaaral mo ang basics before jumping into using CSS frameworks like bootstrap.
- Syempre hindi naman as is na gagamitin mo ang mga frameworks na yan kaya dapat kaya mong imodify at magalis ng mga components based sa panlasa mo. BUT walang masama sa paggamit ng mga yan, dahil personally, I prefer to use codes that are ready-made such as bootstrap because you are sure they are tested, and follows web standards instead of making your own (which is also great but you have to go through all those browser compatibility tests etc.)

#4 Since youre focus in web design / css, after you learn the basic, read about SASS and LESS.

#5 Use HTML semantics. It helps most browser especially mobile browsers to know kung anong proper display para sa isang part ng website mo. For example in your <div> na may comment na "main-content", use html5 semantic <main> instead. Nakikita mo ba yung feature sa safari na "READ MODE" ata yun, it trims out unnecessary sections of your website and focuses on the main content, so by using HTML5 semantics, it is your responsibility as a coder na ipaalam kay browser na "Hoy eto yung main content ko dito mo ifocus."

Yun lang muna.

leosterb · Jan 31, 2017

ayun oh...

galing

wakokohekhek · Jan 31, 2017

noturtypicalgirl said:

Hello po, need ko lang po pacheck itong HTML and CSS code ko po, beginner lang po ako and nag start mag aral nito, Sana po matulungan nyo po ako at mag suggest po kayo kung ano po dapat. Salamat po HTML header pa lang po ako.

HTML

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>sample html </title>
	<meta name="description" content="A basic template using HTML5" />
	<meta name="keywords" content="basic, template, HTML5" />
	<meta name="author" content="Simple Website" />

	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="wrapper">

		<header class="head-mast"> <!--header logo with nav -->
			 <div class="site-head">
			 <h1>Logo name</h1>
			 <h2>Site tagname</h2>
			 </div>
			<nav>
			
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
					<li><a href="#">Link 5</a></li>
				</ul>
			</nav>
		</header>

		<div> <!--main content-->

			<div class="banner">
			<img src="https://www.odesk.com/blog/wp-content/uploads/2014/03/BulletJournal-1024x563.png" alt="image_header" >

			</div>

			<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>

			<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>

<section>
			<h1>Article 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>
			
			<section>
			<h1>Article 2</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>


			<section>
			<h1>Article 3</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis eu turpis ac suscipit. Donec dapibus velit vitae nunc auctor pulvinar. Nulla consequat purus nec aliquam euismod. Nam sit amet augue tincidunt, convallis lectus vel, convallis augue. Proin eget odio rutrum lacus tristique iaculis. Integer vehicula faucibus mi, vel tempus sem pretium vitae. Proin lacinia purus quis feugiat aliquet. Nulla facilisi. Etiam pellentesque congue porttitor. Donec eget sem ac urna viverra fringilla vel nec turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			<button>Click Me!</button>
			</section>



		</div>


		<footer>
			<p>Copyright Allrights reserverd</p> <!--- Sub links and sitemap -->
		</footer>
	</div>
</body>
</html>

CSS

Code:

*{
	margin:0;
}
.head-mast{
	margin:0;
	height:90px;
	background:rgb(3, 149, 193)


}
.site-head{
	
	padding:1px;
	float: left;
	display: block;



}
.site-head h1{
	color:rgba(242, 243, 244,0.9);
	font-size:2em;
	padding:20px;
	margin:1px 0  0 25px;
	max-height:10px;
	max-width:180px;


}
.site-head h2{
	color:rgba(242, 243, 244, 0.9);
	font-size:15px;
	margin:0 0  0 48px;
	padding:2px;
	max-width:140px;


}

nav ul{

	position: absolute;
	margin: 17px 0 0 570px;	
}
nav li{
	
	display:inline-block;
	padding:20px;

}
li a {
	text-decoration:none;
	color:#fff;
	font-family:Tahoma;
	font-size:17px;
	font-weight:bold;
	text-transform:uppercase;


}
ul li a:active, ul li a:hover {

	color:#211e1e;


}

ang linis mo mag code idol. di ko binasa code mo.
pero clap clap para sa coding.

noturtypicalgirl · Feb 2, 2017

superprogrammer05 said:
Hi. Welcome to the world of creators. Here's some tips for you (for web designing / CSS).

#1: Magdownload ka ng lahat ng commonly used browsers: Firefox / Chrome / Safari / Opera / IE / Edge
- Importante sa isang designer na tinetest ang stylesheet nya kung anong behavior sa iba't ibang browser. Minsan kasi (or most of the time) may mga layout na maganda sa firefox o chrome tapos di pala ok sa isa especially IE and Safari.

#2: It is always a good practice (atleast para sakin) to use a CSS resetter at the beginning of your main css file.
- May kinalaman ito sa browser din na gamit ng viewer mo, ang mga browser may default style na gamit yan when rendering a page so using a resetter makes sure na iisa ang itsura ng layout mo. Naexperience ko dati may layout akong ginawa na ok sa chrome tapos ang pangit sa firefoxat di ko malaman ang problema until naresearch ko na magkaiba sila ng default style na rinerender sa line-height, margin etc.

Sample css resetter:
(You can use this but I advise na iedit mo sya based on your preference kung ano sa tingin mo ang 'default' na style for your layout.)

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

#3 Its good na inaaral mo ang basics before jumping into using CSS frameworks like bootstrap.
- Syempre hindi naman as is na gagamitin mo ang mga frameworks na yan kaya dapat kaya mong imodify at magalis ng mga components based sa panlasa mo. BUT walang masama sa paggamit ng mga yan, dahil personally, I prefer to use codes that are ready-made such as bootstrap because you are sure they are tested, and follows web standards instead of making your own (which is also great but you have to go through all those browser compatibility tests etc.)

#4 Since youre focus in web design / css, after you learn the basic, read about SASS and LESS.

#5 Use HTML semantics. It helps most browser especially mobile browsers to know kung anong proper display para sa isang part ng website mo. For example in your <div> na may comment na "main-content", use html5 semantic <main> instead. Nakikita mo ba yung feature sa safari na "READ MODE" ata yun, it trims out unnecessary sections of your website and focuses on the main content, so by using HTML5 semantics, it is your responsibility as a coder na ipaalam kay browser na "Hoy eto yung main content ko dito mo ifocus."

Yun lang muna.

Thanks po sa reply, sa ngayon ang main problem is nahihirapan pa ako sa mga box models, pero kaya pa naman hehe. i will use html5 semantics when i have a confidence on naming on it, problem ko po din kasi ang naming hehe, naiingit kasi ako sa mga wordpress templates na magaganda ang naming and usually pinapractice ko na din po ang pag code ng malinis para masanay na din hehe thanks po

Pahelp po for verification kung tama po HTML/CSS

More options

noturtypicalgirl

Recruit

raymundpogi

Symbianize Shaman

noturtypicalgirl

Recruit

superprogrammer05

Recruit

leosterb

Proficient

wakokohekhek

Proficient

noturtypicalgirl

Recruit

Similar threads