Menu
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 : [url]http://jsbin.com/wugukat/edit?html,css,output
And what can i use instead of it?[/QUOTE]
Congrats on your first project.
Just one thing you need to know is <table> are used for displaying data, for layout is better to use <div>.
Good luck,[/QUOTE]
[code=html]
<!DOCTYPE html>
<html>
<head>
<title>Math blog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-106936738-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-106936738-2');
</script>
</head>
<body>
<div class="backgroundimage">
<header class="header">
<div class="headerContent">
<!--<image src="images/logo.png" width="250px" height="63px" />--> <!--REM OUT by Douglas_William 13mar2018-->
<img src="images/logo.png" width="250px" height="63px"> <!--correctively added by Douglas_William 13mar2018-->
<nav>
<ul>
<li class="Home"><a href="">Home</a></li>
<li class="Categories"><a href="">Categories</a></li>
<li class="About"><a href="">About</a></li>
<li class="Sign-Up"><a href="">Sign Up</a></li>
</ul>
</nav>
</div>
</header>
<!--<section>--> <!--REM OUT by Douglas_William 13mar2018-->
<div class="mainHeadings">
<h1>Welcome to MathAlgebra.</h1>
<h3>Learn math. For everyone. For free.</h3>
<div class="buttons">
<a href=""><button type="button" class="button button3">Learners start here.</button></a>
<br>
<a href=""><button type="button" class="button1">Teachers start here.</button></a>
<br>
<a href=""><button type="button" class="button1 button2">Parents start here.</button></a>
</div>
</div>
</div>
<section> <!--correctively placed by Douglas_William 13mar2018-->
<div class="categories">
<a href="">Math by Grade</a>
<a href="">Math by Subject</a>
<a href="">Real-world Math</a>
<div class="hr">
</div>
</div>
<div class="wrapper">
<div class="mathbygrade-content">
<div class="mathbygrade">
<h2>
<a href=""><img src="https://cdn.kastatic.org/genfiles/topic-icons/icons/arithmetic.png-a485a9-128c.png" height="64px" width="64px"/>
<div>
Math by Grade
</div>
</a>
</h2>
</div>
<div class="ul-mathbygrade">
<ul>
<li><a href="">Kindergarten</a></li>
<li><a href="">1st</a></li>
<li><a href="">2nd</a></li>
<li><a href="">3rd</a></li>
<li><a href="">4th</a></li>
<li><a href="">5th</a></li>
<li><a href="">6th</a></li>
<li><a href="">7th</a></li>
<li><a href="">8th</a></li>
<li><a href="">High School</a></li>
</ul>
</div>
</div>
<div class="hr">
</div>
<div class="mathbysubject-content">
<div class="mathbysubject">
<h2>
<a href=""><img src="https://cdn.kastatic.org/genfiles/topic-icons/icons/arithmetic.png-a485a9-128c.png" height="64px" width="64px"/>
<div>
Math by Subject
</div>
</a>
</h2>
</div>
</div> <!--added by Douglas_William 13mar2018-->
<div class="ul-mathbysubject">
<ul>
<li><a href="">Early Math</a></li>
<li><a href="">Arithmetic</a></li>
<li><a href="">Early Geometry</a></li>
<li><a href="">Pre-algebra</a></li>
<li><a href="">Algebra 1</a></li>
<li><a href="">Geometry</a></li>
<li><a href="">Algebra 2</a></li>
<li><a href="">Pre-calculus</a></li>
<li><a href="">AP Calculus AB</a></li>
<li><a href="">AP Calculus BC</a></li>
</ul>
</div>
</div>
<div style="margin-bottom: 90px;">
</div>
</section>
</body>
</html>
[/code]<i>
</i>body {
margin: 0 auto;
}
/* Header content */
.header {
background-color: transparent;
height: 64px;
border-bottom: 0.25px solid lightblue;
}
.backgroundimage {
background-image: url(https://cdn.kastatic.org/images/homepage/blue-mountains.svg);
}
nav {
float: right;
height: 64px;
}
nav ul li {
list-style: none;
display: inline;
}
nav ul {
padding-left: 0;
margin: 22.5px 0;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
font-family: Helvetica;
color: ;
}
nav ul li a:visited {
color: white;
}
nav ul li a:hover {
color: #48ba50;
}
.Home {
padding: 0 20px 0 0;
}
.Categories {
padding: 0 20px 0 0;
}
.About {
padding: 0 760px 0 0;
}
.Sign-Up {
padding: 0 40px 0 0; <br/>
}
/* End of header content*/
/* Section content */
section { /* "Section" CSS Definition added by Douglas_William 13mar2018 */
background-color: #ffffff;
}
.mainHeadings {
}
.mainHeadings h1 {
text-align: center;
padding: 17px 0px 10px 0px;
font-size: 260%;
font-family: Helvetica;
color: white;
}
.mainHeadings h3 {
text-align: center;
padding: 7px 0px 10px 0px;
font-size: 150%;
font-family: Helvetica;
color: white;
}
.buttons {
overflow: hidden;
}
.button {
background-color: rgb(0, 42, 74);
border: 0px;
color: white;
padding: 16px 73px 16px 73px;
font-weight: bold;
font-size: 15px;
border-radius: 3px;
margin: 0px 39% 10px 39%;
}
.button1 {
background-color: white;
border: 0px;
color: rgb(0, 42, 74);
padding: 16px 73px;
font-weight: bold;
font-size: 15px;
border-radius: 3px;
margin: 10px 39%;
}
.button2 {
padding-right: 84px;
margin-bottom: 35px;
}
.button3 {
padding-right: 75px;
}
.button:hover {
background-color: #15344c;
}
.button1:hover {
color: #0861a5;
}
.mainHeadings a:hover {
color: #15344c;
}
.categories {
margin: 39px 0px;
}
.categories a {
text-decoration: none;
color: #777777;
font-family: Verdana;
font-size: 120%;
margin: 20px 145px 20px 145px;
}
.categories a:visited {
color: #777777;
}
.categories a:hover {
color: #13c3ef;
text-decoration: underline;
}
.hr {
border-top: 1px solid #cecece;
margin-top: 39px;
}
.mathbygrade {
margin: 60px 0px 0px 19px;
}
.mathbygrade h2 {
color: black;
margin-left: 2%;
font-size: 180%;
font-family: Verdana;
}
.mathbygrade h2 a {
text-decoration: none;
color: #161616;
display: flex;
}
.mathbygrade h2 a:visited {
color: #161616;
}
.mathbygrade h2 a:hover {
text-decoration: underline;
color: #13c3ef;
}
.mathbygrade h2 a img {
border-radius: 50%;
}
.mathbygrade h2 div {
margin: 10px 0px 0px 10px;
}
.ul-mathbygrade ul {
list-style: none;
padding: 0;
columns: 2;
margin-left: 133px;
}
.ul-mathbygrade ul li {
}
.ul-mathbygrade ul li a {
text-decoration: none;
color: #13c3ef;
font-family: Helvetica;
font-size: 133%;
}
.ul-mathbygrade ul li a:visited {
color: #13c3ef;
}
.ul-mathbygrade ul li a:hover {
text-decoration: underline;
}
.mathbysubject {
margin: 60px 0px 0px 19px;
}
.mathbysubject h2 {
color: black;
margin-left: 2%;
font-size: 180%;
font-family: Verdana;
}
.mathbysubject h2 a {
text-decoration: none;
color: #161616;
display: flex;
}
.mathbysubject h2 img {
border-radius: 50%;
}
.mathbysubject h2 a:visited {
color: #161616;
}
.mathbysubject h2 a:hover {
text-decoration: underline;
color: #13c3ef;
}
.mathbysubject h2 div {
margin: 10px 0px 0px 10px;
}
.ul-mathbysubject ul {
list-style: none;
padding: 0;
columns: 2;
margin-left: 133px;
}
.ul-mathbysubject ul li a {
text-decoration: none;
color: #13c3ef;
font-family: Helvetica;
font-size: 133%;
}
.ul-mathbysubject ul li a:visited {
color: #13c3ef;
}
.ul-mathbysubject ul li a:hover {
text-decoration: underline;
}
0.1.9 — BETA 6.16