Simple HTML Website (followup)
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
Followup to this
I have created a simple HTML5/CSS3/JS website with a navbar and no content.
index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>SigmaCubes - Home</title>
<meta name="author" content="Julian Lachniet,Simon Kwilinski,Jacob Wysko" />
<meta name="description" content="SigmaCubes is the best website on the internet." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans|Nunito:600|Material+Icons" rel="stylesheet" type="text/css" />
<link href="/lib/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/lib/css/sigmacubes.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" />
<script src="/lib/js/main.js"></script>
</head>
<body>
<div>
<noscript>
<div class="error">
<h1>Error:</h1>
<h2>JavaScript</h2>
</div>
</noscript>
<!--[if IE]>
<div class="error">
<h1>Error:</h1>
<h2>Old Internet Explorer</h2>
</div>
<![endif]-->
<div id="nav-stupid" class="error">
<h1>Error:</h1>
<h2>Resolution</h2>
</div>
</div>
<div id="wrapper">
<div id="nav-large">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<div id="nav-large-links">
<a class="link-large" href="#">About Us</a>
<a class="link-large" href="#">Projects</a>
<a class="link-large" href="#">Contact</a>
<a class="link-large" href="#">Donate</a>
</div>
</div>
<div id="nav-small">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<a class="link-nav" onclick="toggleNav()" href="javascript:void(0);">
<img height="28" src="/img/menu.svg" />
</a>
</div>
<div id="nav-small-links">
<a class="link-small" href="#">About Us</a>
<a class="link-small" href="#">Projects</a>
<a class="link-small" href="#">Contact</a>
<a class="link-small" href="#">Donate</a>
</div>
</div>
</body>
</html>
reset.css:
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;
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;
main.js:
var navEnabled = false;
document.addEventListener('DOMContentLoaded', main);
function main()
setDisplay("wrapper", "block");
function toggleNav()
if (navEnabled)
setDisplay("nav-small-links", "none");
else
setDisplay("nav-small-links", "block");
navEnabled = !navEnabled;
function setDisplay(id, state)
document.getElementById(id).style.display = state;
What can I try to improve?
javascript html css html5
asked May 1 at 0:01
Julian Lachniet
12710
add a comment |
up vote
2
down vote
favorite
Followup to this
I have created a simple HTML5/CSS3/JS website with a navbar and no content.
index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>SigmaCubes - Home</title>
<meta name="author" content="Julian Lachniet,Simon Kwilinski,Jacob Wysko" />
<meta name="description" content="SigmaCubes is the best website on the internet." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans|Nunito:600|Material+Icons" rel="stylesheet" type="text/css" />
<link href="/lib/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/lib/css/sigmacubes.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" />
<script src="/lib/js/main.js"></script>
</head>
<body>
<div>
<noscript>
<div class="error">
<h1>Error:</h1>
<h2>JavaScript</h2>
</div>
</noscript>
<!--[if IE]>
<div class="error">
<h1>Error:</h1>
<h2>Old Internet Explorer</h2>
</div>
<![endif]-->
<div id="nav-stupid" class="error">
<h1>Error:</h1>
<h2>Resolution</h2>
</div>
</div>
<div id="wrapper">
<div id="nav-large">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<div id="nav-large-links">
<a class="link-large" href="#">About Us</a>
<a class="link-large" href="#">Projects</a>
<a class="link-large" href="#">Contact</a>
<a class="link-large" href="#">Donate</a>
</div>
</div>
<div id="nav-small">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<a class="link-nav" onclick="toggleNav()" href="javascript:void(0);">
<img height="28" src="/img/menu.svg" />
</a>
</div>
<div id="nav-small-links">
<a class="link-small" href="#">About Us</a>
<a class="link-small" href="#">Projects</a>
<a class="link-small" href="#">Contact</a>
<a class="link-small" href="#">Donate</a>
</div>
</div>
</body>
</html>
reset.css:
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;
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;
main.js:
var navEnabled = false;
document.addEventListener('DOMContentLoaded', main);
function main()
setDisplay("wrapper", "block");
function toggleNav()
if (navEnabled)
setDisplay("nav-small-links", "none");
else
setDisplay("nav-small-links", "block");
navEnabled = !navEnabled;
function setDisplay(id, state)
document.getElementById(id).style.display = state;
What can I try to improve?
javascript html css html5
asked May 1 at 0:01
Julian Lachniet
12710
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Followup to this
I have created a simple HTML5/CSS3/JS website with a navbar and no content.
index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>SigmaCubes - Home</title>
<meta name="author" content="Julian Lachniet,Simon Kwilinski,Jacob Wysko" />
<meta name="description" content="SigmaCubes is the best website on the internet." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans|Nunito:600|Material+Icons" rel="stylesheet" type="text/css" />
<link href="/lib/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/lib/css/sigmacubes.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" />
<script src="/lib/js/main.js"></script>
</head>
<body>
<div>
<noscript>
<div class="error">
<h1>Error:</h1>
<h2>JavaScript</h2>
</div>
</noscript>
<!--[if IE]>
<div class="error">
<h1>Error:</h1>
<h2>Old Internet Explorer</h2>
</div>
<![endif]-->
<div id="nav-stupid" class="error">
<h1>Error:</h1>
<h2>Resolution</h2>
</div>
</div>
<div id="wrapper">
<div id="nav-large">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<div id="nav-large-links">
<a class="link-large" href="#">About Us</a>
<a class="link-large" href="#">Projects</a>
<a class="link-large" href="#">Contact</a>
<a class="link-large" href="#">Donate</a>
</div>
</div>
<div id="nav-small">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<a class="link-nav" onclick="toggleNav()" href="javascript:void(0);">
<img height="28" src="/img/menu.svg" />
</a>
</div>
<div id="nav-small-links">
<a class="link-small" href="#">About Us</a>
<a class="link-small" href="#">Projects</a>
<a class="link-small" href="#">Contact</a>
<a class="link-small" href="#">Donate</a>
</div>
</div>
</body>
</html>
reset.css:
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;
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;
main.js:
var navEnabled = false;
document.addEventListener('DOMContentLoaded', main);
function main()
setDisplay("wrapper", "block");
function toggleNav()
if (navEnabled)
setDisplay("nav-small-links", "none");
else
setDisplay("nav-small-links", "block");
navEnabled = !navEnabled;
function setDisplay(id, state)
document.getElementById(id).style.display = state;
What can I try to improve?
javascript html css html5
asked May 1 at 0:01
Julian Lachniet
12710
Followup to this
I have created a simple HTML5/CSS3/JS website with a navbar and no content.
index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>SigmaCubes - Home</title>
<meta name="author" content="Julian Lachniet,Simon Kwilinski,Jacob Wysko" />
<meta name="description" content="SigmaCubes is the best website on the internet." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans|Nunito:600|Material+Icons" rel="stylesheet" type="text/css" />
<link href="/lib/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/lib/css/sigmacubes.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" />
<script src="/lib/js/main.js"></script>
</head>
<body>
<div>
<noscript>
<div class="error">
<h1>Error:</h1>
<h2>JavaScript</h2>
</div>
</noscript>
<!--[if IE]>
<div class="error">
<h1>Error:</h1>
<h2>Old Internet Explorer</h2>
</div>
<![endif]-->
<div id="nav-stupid" class="error">
<h1>Error:</h1>
<h2>Resolution</h2>
</div>
</div>
<div id="wrapper">
<div id="nav-large">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<div id="nav-large-links">
<a class="link-large" href="#">About Us</a>
<a class="link-large" href="#">Projects</a>
<a class="link-large" href="#">Contact</a>
<a class="link-large" href="#">Donate</a>
</div>
</div>
<div id="nav-small">
<img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
<a class="link-nav" onclick="toggleNav()" href="javascript:void(0);">
<img height="28" src="/img/menu.svg" />
</a>
</div>
<div id="nav-small-links">
<a class="link-small" href="#">About Us</a>
<a class="link-small" href="#">Projects</a>
<a class="link-small" href="#">Contact</a>
<a class="link-small" href="#">Donate</a>
</div>
</div>
</body>
</html>
reset.css:
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;
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;
main.js:
var navEnabled = false;
document.addEventListener('DOMContentLoaded', main);
function main()
setDisplay("wrapper", "block");
function toggleNav()
if (navEnabled)
setDisplay("nav-small-links", "none");
else
setDisplay("nav-small-links", "block");
navEnabled = !navEnabled;
function setDisplay(id, state)
document.getElementById(id).style.display = state;
What can I try to improve?
javascript html css html5
asked May 1 at 0:01
Julian Lachniet
12710
asked May 1 at 0:01
Julian Lachniet
12710
asked May 1 at 0:01
Julian Lachniet
12710
asked May 1 at 0:01
Julian Lachniet
12710
12710
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
title
It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".
But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.
<title>SigmaCubes</title>
Error messages
You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.
<div class="error">
<h1>Error</h1>
<p><strong>Old Internet Explorer is not supported</strong></p>
</div>
You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).
<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>
(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)
alt for logo
The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.
alt="SigmaCubes"
Navigation
Use the nav element for the navigation.
Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).
answered May 2 at 10:26
unor
2,285721
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
title
It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".
But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.
<title>SigmaCubes</title>
Error messages
You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.
<div class="error">
<h1>Error</h1>
<p><strong>Old Internet Explorer is not supported</strong></p>
</div>
You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).
<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>
(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)
alt for logo
The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.
alt="SigmaCubes"
Navigation
Use the nav element for the navigation.
Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).
answered May 2 at 10:26
unor
2,285721
add a comment |
up vote
1
down vote
title
It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".
But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.
<title>SigmaCubes</title>
Error messages
You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.
<div class="error">
<h1>Error</h1>
<p><strong>Old Internet Explorer is not supported</strong></p>
</div>
You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).
<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>
(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)
alt for logo
The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.
alt="SigmaCubes"
Navigation
Use the nav element for the navigation.
Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).
answered May 2 at 10:26
unor
2,285721
add a comment |
up vote
1
down vote
up vote
1
down vote
title
It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".
But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.
<title>SigmaCubes</title>
Error messages
You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.
<div class="error">
<h1>Error</h1>
<p><strong>Old Internet Explorer is not supported</strong></p>
</div>
You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).
<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>
(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)
alt for logo
The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.
alt="SigmaCubes"
Navigation
Use the nav element for the navigation.
Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).
answered May 2 at 10:26
unor
2,285721
title
It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".
But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.
<title>SigmaCubes</title>
Error messages
You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.
<div class="error">
<h1>Error</h1>
<p><strong>Old Internet Explorer is not supported</strong></p>
</div>
You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).
<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>
(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)
alt for logo
The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.
alt="SigmaCubes"
Navigation
Use the nav element for the navigation.
Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).
answered May 2 at 10:26
unor
2,285721
answered May 2 at 10:26
unor
2,285721
answered May 2 at 10:26
unor
2,285721
answered May 2 at 10:26
unor
2,285721
2,285721
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f193313%2fsimple-html-website-followup%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password