Overview

Description
This course is designed to help beginners to learn the basics of HTML & CSS.

No prior knowledge of HTML & CSS required. You will learn all that from scratch.

In this course, about HTML you will learn:

The definition of HTML and why it's a must learn.
How a HTML document works (structure).
About HTML Block Level & Inline Elements, such as:
Headings (

,

)
Formatting (, , , , , , ^{, _{)
Forms (Form Elements - , | Input Types - button, checkbox, color, date, datetime-local, email, file, hidden , image, month, number, password, radio, range, reset | Buttons)<br>More HTML Elements (<p>, <div>, <span>, <a>, <im>, <table>, <thead>, <tbody>, <tr>, <th>, <td>, <ul>, <ol>, <li>, <br>, <hr> )<br>About CSS, you will learn the definition of it and what is the purpose of using it. You then, will learn how the CSS structure parts work, such as:<br><br>Ruleset (or rule)<br>Selector<br>Declaration Block<br>Property<br>Property Value<br>To put everything you've learned into practice, you'll build a project called Lander (static landing page). You'll learn how to setup the project structure. This includes:<br><br>How to organize the HTML, CSS & Image files into folders<br>How to create the HTML Document<br>How to create the header, main content, after content, and footer.<br>How to style all sections using: background colors, text colors, fonts, background images & elements positioning.<br>By the end of this course, you will have a complete knowledge and the required skills you need to be able to start your programming career that you've always wished for.<br><br>Basic knowledge<br>The ability to download and install a free code editor<br>The usage of Google browser or any other similar web browser<br>Basic computer skills</div></div></div><h2 class="mt-5"><span class="txt-study">Course Information</span></h2><div class=" is-accordion study " ><div class="accordion mt-5" id="accordion0"><div class="card " ><div class="card-header" id="heading0"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse0" aria-expanded="true" aria-controls="collapse0">Entry Requirements</button></h2></div><div id="collapse0" class="collapse" aria-labelledby="heading0" data-parent="#accordion0"><div class="card-body">The ability to download and install a free code editor<br>The usage of Google browser or any other similar web browser<br>Basic computer skills</div></div></div><div class="card " ><div class="card-header" id="heading1"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">Course Relevance</button></h2></div><div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion0"><div class="card-body">Build beautiful world-class and high-performance web design or websites that will grab the attention of anybody<br>Understand the concepts behind HMTL5 & CSS3<br>Understand and write HMTL5 & CSS3 code</div></div></div><div class="card " ><div class="card-header" id="heading2"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">Learning Outcomes</button></h2></div><div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion0"><div class="card-body">Newbies in programming.<br>Those who want to learn web development from scratch.<br>Anyone who wants to learn HTML & CSS basics.<br>Those who want to start building a career as a Web Developer.</div></div></div><div class="card " ><div class="card-header" id="heading3"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">Course Benefits</button></h2></div><div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion0"><div class="card-body">• Lifetime Access to Each Course<br>• Certificate on Completion of Course<br>• No Extra Charges Or Admin Fees<br>• Easy Access to Courses<br>• High Priority Support After Sales.<br>• Big Discounts on Individual Courses</div></div></div></div></div><h2 class="mt-5"><span class="txt-study">Course Specifications</span></h2><div class="accordion study mt-5 " id="accordionSpecification"><div class="card"><div class="card-header study" id="heading0"><h2 class="mb-0"><button class="btn btn-link link-study btn-block text-left" type="button" data-toggle="collapse" data-target="#specification-collapse0" aria-expanded="true" aria-controls="specification-collapse0">Course Category - IT & Computing</button></h2></div><div id="specification-collapse0" class="collapse" aria-labelledby="heading0" data-parent="#accordionSpecification"><div class="card-body"><p>IT and Computing courses are available to study on our learning platform. </p>
<p><a href="https://www.studylearngrow.com/course-category/it-and-computing/">See All Courses</a></p></div></div></div><div class="card"><div class="card-header study" id="heading1"><h2 class="mb-0"><button class="btn btn-link link-study btn-block text-left" type="button" data-toggle="collapse" data-target="#specification-collapse1" aria-expanded="true" aria-controls="specification-collapse1">Course Level - Adult Education</button></h2></div><div id="specification-collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionSpecification"><div class="card-body"><p>Adult education is the non-credential activity of gaining skills and improved education. </p>
<p><a href="https://www.studylearngrow.com/course-level/adult-education/">See All Courses</a></p></div></div></div><div class="card"><div class="card-header study" id="heading2"><h2 class="mb-0"><button class="btn btn-link link-study btn-block text-left" type="button" data-toggle="collapse" data-target="#specification-collapse2" aria-expanded="true" aria-controls="specification-collapse2">Course Study Mode - Online</button></h2></div><div id="specification-collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionSpecification"><div class="card-body"><p>Online education is electronically supported learning that relies on the Internet for teacher/student interaction. </p>
<p><a href="https://www.studylearngrow.com/course-study-mode/online/">See All Courses</a></p></div></div></div><div class="card"><div class="card-header study" id="heading3"><h2 class="mb-0"><button class="btn btn-link link-study btn-block text-left" type="button" data-toggle="collapse" data-target="#specification-collapse3" aria-expanded="true" aria-controls="specification-collapse3">Course Type - Short Courses</button></h2></div><div id="specification-collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionSpecification"><div class="card-body"><p>A short course is a learning programme that gives you combined content or specific skills training in a short period of time. Short courses often lean towards the more practical side of things and have less theory than a university course – this gives you a more hands-on experience within your field of interest.</p>
<p><a href="https://www.studylearngrow.com/course-type/short-courses/">See All Courses</a></p></div></div></div><div class="card"><div class="card-header study" id="heading4"><h2 class="mb-0"><button class="btn btn-link link-study btn-block text-left" type="button" data-toggle="collapse" data-target="#specification-collapse4" aria-expanded="true" aria-controls="specification-collapse4">Course Duration - Up to 24 hours</button></h2></div><div id="specification-collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionSpecification"><div class="card-body"><p>Course duration is 24 hours.</p>
<p><a href="https://www.studylearngrow.com/course-duration/up-to-24-hrs/">See All Courses</a></p></div></div></div></div></div></div></div></section>
<section class="bg-grow pb-5 pt-5 position-relative overflow-hidden text-white">
<div class="slg-particles"></div><div class="slg-particles2"></div><div class="slg-particles3"></div> <img src="https://www.studylearngrow.com/core/images/blank.gif" data-src="https://www.studylearngrow.com/core/images/logo-icon-whiteout.svg" class="lazy top-right-logo-bg ghost" alt="Study Learn Grow"/>
<div class="container">
<div class="row justify-content-center">
<div class="col text-center">
<h2 class="small-hero-title">Related Jobs</h2>

</div>
</div>

<div class="row justify-content-center mb-5">
<div class="col-12 col-lg-8 text-center ">
<ul class="list-group list-group-horizontal-lg list-group-ghost mb-3 mt-3">
<li class="list-group-item flex-fill"><a href="https://www.studylearngrow.com/industry-sector/it/">IT</a></li><li class="list-group-item flex-fill"><a href="https://www.studylearngrow.com/job-category/web-development/">Web Development</a></li>
</ul>

</div>
</div>

</div>
<div class="container text-center my-3 ">
<div class="row mx-auto my-auto" id="related_pages">

</div>
</div>

</section>
<footer class="pt-5 pb-0 position-relative overflow-hidden text-center text-md-left">
<div class="container">
<div class="row">
<div class="col-8 offset-2 offset-md-0 col-md-4 col-lg-2">
<div class="footer-logo position-relative">
<img src="https://www.studylearngrow.com/core/images/blank.gif" data-src="/core/images/logo-icon-footer.svg" class="lazy " alt="Study Learn Grow" width="160" height="197" />
<div id="gdprVerifier" class="mt-3">
<script>
(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'gdprBadge', 'https://cdn.gdprlocal.com/static/widget.js'));
gdprBadge('init',{element: document.getElementById('gdprVerifier'), verificationId: '8W9VQBG'});
</script>
</div>
</div>

</div>
<div class="col col-lg-7 col-md-8">
<h2 class="hero-title"><span class="txt-study">Study</span><span class="txt-learn">Learn</span><span class="txt-grow">Grow</span></h2>
<p>We believe in the future. Your future. Our mission is to transform lives by offering a unique platform that connects students with world-leading courses and exciting job opportunities with reputable companies around the globe.<br />Let StudyLearnGrow help you achieve your full potential by making a winning decision!</p>
<div class="row">
<div class="col-12 col-lg-6">
<div class="search-cta search-cta-partners mt-0">

<div class=" text-center"><a href="/become-a-partner/">Become a Partner Now!</a></div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-12 col-lg-6">

<div class="search-cta search-cta-grow mt-0" >

<div class=" text-center"><a href="/become-a-member/" class="scroll-to-signup-form">Become a Member Now!</a></div>
<div class="clearfix"></div>
</div>
</div>
</div> </div>

<div class="col-12 col-lg-2 offset-lg-1">
<div class="mt-5 text-center text-lg-left">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/about-us/">About Us</a></li><li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/blog/">Blog</a></li><li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/partners/">Partners</a></li><li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/faq-sections/">FAQs</a></li><li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/support/">Support</a></li><li class="nav-item"><a class="nav-link" href="https://www.studylearngrow.com/contact-us/">Connect</a></li> </ul>
</div>
</div>

</div>
</div>
<div class="bg-light pb-5 pt-5 base-footer">
<div class="container">
<div class="row">

<div class="col-12 col-lg-9 text-lg-left text-center">
<p>
©2024 <span class="txt-study">Study</span><span class="txt-learn">Learn</span><span class="txt-grow">Grow</span>
<a class="disclaimer-links pl-lg-3" href="https://www.studylearngrow.com/legal-documents/">Legal Documents</a><a class="disclaimer-links pl-lg-3" href="https://www.studylearngrow.com/legal-documents/privacy-policy/">Privacy Policy</a><a class="disclaimer-links pl-lg-3" href="https://www.studylearngrow.com/legal-documents/portal-terms-of-use/">Portal Terms of Use</a><a class="disclaimer-links pl-lg-3" href="https://www.studylearngrow.com/legal-documents/cookie-policy/">Cookie Policy</a><a class="disclaimer-links pl-lg-3" href="https://www.studylearngrow.com/sitemap.xml">Sitemap</a> </p>
</div>
<div class="col-12 col-lg-3 text-center text-lg-right">
<p>
Created by <a href="https://www.webosaurus.co.uk/"><img src="https://www.studylearngrow.com/core/images/blank.gif" data-src="/core/images/webosaurus.svg" class="lazy webosaurus-footer-logo" alt="Webosaurus" width="102" height="15"/></a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-lg-left text-center">
<p>
<a href="https://www.facebook.com/studylearngrow/" class="disclaimer-links footer-social"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg></a>
<a href="https://twitter.com/StudyLearnGrow" class="disclaimer-links pl-lg-3 footer-social"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg></a>
<a href="https://www.linkedin.com/company/studylearngrow/" class="disclaimer-links pl-lg-3 footer-social"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg></a>
</p>

</div>

</div>
</div>
</div>
</footer>
<script src="/core/js/jquery-3.5.1.min.js" ></script>
<script src="/core/js/bootstrap.bundle.min.js" ></script>
<script src="/core/js/yall.min.js" ></script>

<script>
document.addEventListener("DOMContentLoaded", yall);

document.addEventListener('DOMContentLoaded', function() {
function load_related_pages(){

var RelatedPageHolder = $('#related_pages');
var RelatedPagesParameters='TLDID=MTA=&startRow=0&endRow=4&CMSSID=MTE=&TVIDArr={"MjI=":{"ODMz":"ODMz"},"NDE=":{"MTAwMg==":"MTAwMg=="}}&excludeExpired=true&implicit=true';
RelatedPageHolder.html('<div class="text-center w-100"><svg class="learn" version="1.1" id="loader-1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/> </path> </svg> </div>');

$.ajax({
type: "POST",
url: "https://webolytics.webosaurus.co.uk/inbound/listFilterGroups",
data: RelatedPagesParameters,
dataType: 'json',
success: function(relatedResponse) {
if(relatedResponse.status == "201"){
var RelatedList=relatedResponse.record_data;
var RelatedPages = '';
Object.keys(RelatedList).forEach(function (k){
var RelatedData = RelatedList[k];
var RelatedPageValue = '<div class="col-12 col-lg-3">'+
'<div class="card grow mr-3 ml-3 h-100">'+
'<div class="card-body">';

if (typeof RelatedData.schema !== 'undefined') {

Object.keys(RelatedData.schema).forEach(function (sk){
var RelatedSchema = RelatedData.schema[sk]
if( (RelatedSchema.schema_type == "1") &&
(RelatedSchema.schema_sub_type=="4") ){
RelatedPageValue += '<div class="col-6 offset-3 mb-3">'+
'<img class="lazy related-carousel-img-sml" src="'+RelatedSchema.schema_value+'" alt="'+RelatedSchema.cms_group_name+'">'+
'</div>';
}
});
}

RelatedPageValue += '<h5 class="card-title txt-grow">'+RelatedData.cms_group_name+'</h5>'+
'</div>'+
'<a href="'+RelatedData.cms_group_path+'" class="card-footer btn btn-block btn-grow">Read More</a>'+
'</div> '+
'</div>';
RelatedPages += RelatedPageValue;
});
RelatedPageHolder.html(RelatedPages);
} else {
RelatedPageHolder.html('<div class="text-center w-100">'+relatedResponse.message+'</div>');
}

}
});
}

load_related_pages();
$('.scroll-to-form').click(function() {
$("html, body").animate({
scrollTop: 0
}, 1000);
return false;
});

$('.scroll-to-market').click(function() {
$("html, body").animate({
scrollTop: 0
}, 1000);
return false;
});

$(function () {
$('[data-toggle="tooltip"]').tooltip();
});

$('.slgForm').on('submit', function (e) {
var frm = this;
e.preventDefault();
$('button[type="submit"]').attr('disabled','disabled');
$('.form-loader').removeClass('d-none');
$('.btn-prompt-text').addClass('d-none');
frm.submit();
});
}, false);

function webolytics_site_tag() {
var AQID = 0;
var CGID = '';
var FSID = '';
var params = window.location.search.substring(1).split('&');

for (var i=0; i<params.length; i++) {
var pair = params[i].split(/=(.+)/);

if ((pair[0] == 'AQID') && pair[1]) {
AQID = pair[1];
}
if ((pair[0] == 'CGID') && pair[1]) {
CGID = pair[1];
}
if ((pair[0] == 'FSID') && pair[1]) {
FSID = pair[1];
}
}
if (AQID || CGID) {
var d = new Date();
d.setTime(d.getTime() + (302460601000));
var expires = 'max-age=' + d.toUTCString() + '; expires=' + d.toUTCString() + '; ';
var hostnameParts = window.location.hostname.split('.').reverse();
var domain = hostnameParts[0];
for (var j=1; j<hostnameParts.length; j++) {
domain = hostnameParts[j] + '.' + domain;
document.cookie = 'webolytics_cd=1; ' + expires + 'domain=' + domain + '; path=/; samesite=none; secure; ';
if (document.cookie.indexOf('webolytics_cd=1') > -1)
break;
}
var cookieEnd = '; ' + expires + 'domain=' + domain + '; path=/; samesite=none; secure;';
document.cookie = 'webolytics_cd=' + domain + cookieEnd;
document.cookie = 'webolytics_lp=https://www.studylearngrow.com/study/basic-html5-css3-for-beginners-build-one-project-534/' + cookieEnd;
webolytics_webhook_call('/core/webhooks/set-session.php?session_name=webolytics___lp&session_value=https://www.studylearngrow.com/study/basic-html5-css3-for-beginners-build-one-project-534/', function(xhr) {
});
if (AQID) {
document.cookie = 'webolytics___aqid=' + AQID + cookieEnd;
webolytics_webhook_call('/core/webhooks/set-session.php?session_name=webolytics___aqid&session_value='+AQID, function(xhr) {
});
}
if (FSID) {
document.cookie = 'webolytics___fsid=' + FSID + cookieEnd;
webolytics_webhook_call('/core/webhooks/set-session.php?session_name=webolytics___fsid&session_value='+FSID, function(xhr) {
});
}
if (CGID) {
document.cookie = 'webolytics___cgid=' + CGID + cookieEnd;
webolytics_webhook_call('/core/webhooks/set-session.php?session_name=webolytics___cgid&session_value='+CGID, function(xhr) {
});
}
}
}
webolytics_site_tag();

function webolytics_webhook_call(url, callback) {
var xhr;

if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
else {
var versions = ["MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"]

for(var i = 0, len = versions.length; i < len; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
}
catch(e){}
}
}

xhr.onreadystatechange = ensureReadiness;

function ensureReadiness() {
if(xhr.readyState < 4) {
return;
}

if(xhr.status !== 200) {
return;
}

if(xhr.readyState === 4) {
callback(xhr);
}
}

xhr.open('GET', url, true);
xhr.send('');
}
</script>

<script type="text/javascript" src="//www.cookieconsent.com/releases/4.0.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"light","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"website_name":"https://www.studylearngrow.com","website_privacy_policy_url":"https://www.studylearngrow.com/legal-documents/privacy-policy/"});
});
</script>

<script type="text/plain" cookie-consent="tracking">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NM6NZNN');</script>

<noscript>ePrivacy and GPDR Cookie Consent by <a href="https://www.CookieConsent.com/" rel="nofollow noopener">Cookie Consent</a></noscript>
</body>
</html>}}

Basic HTML5 & CSS3 For Beginners (Build One Project)

Enquire Now

Overview

,

,

,

,

,