: Need help with first website ever! This is the first website i am making with HTML and CSS. Truly i am learning as I go but I need some questions answered before I write to much incorrect
This is the first website i am making with HTML and CSS. Truly i am learning as I go but I need some questions answered before I write to much incorrect code.
First a a little intro about the design i planned for the site so we are on the same page. This is a content heavy website ment for ALOT of reading and will contain about 52 articles. The design will have a fixed navigation on top. The home page will start off with an introduction and below that will be the gird like collection of article modules that will contain a heading, main quote, and a read more link, below that same concept for videos and then my main fooeter. This is for the home page.
Question #1 : How in the world can I get my articles that I have written on my computer to keep the same formatting once inside of my markup, otherwise I have to mark up each of the 52 articles I have written by hand with p tags, strong tags, ect.. and I cant image doing such a thing considering how long the articles are. Is there a better way?
Question #2 : I have decided to use percents for layout and ems for
fonts and such. I am trying to create some margin space(white space) in between each article module block but I am confused on how to do that because I am using percents and not actual numbers.
Question #3 : At this point please review my html and css so far and advise me on any changes to make before my code grows to large.
Finally the code:
HTML:
<!doctype html>
<html>
<head>
<!--[if lt IE 9]>
<script src="html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>The Sea Of Glass | A Biblical Understanding of Life</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
</head>
<body>
<div class="wrapper">
<header>
<h1>The Sea Of Glass, <span class="sub-title">a biblical understanding of life</span></h1>
<nav>
<ul>
<li><a href="#home-page" class="current-link">Home</a> </li>
<li><a href="#articles">Articles</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header><!-- end header -->
<div id="main-content-wrapper">
<div id="modules-wrapper">
<h3>On God</h3>
<section class="article-module">
<h4>Statement of Beliefs</h4>
<blockquote cite="articles/statements-of-beliefs.html">
<p>
<em>There is NOTHING that a man can do to open anyone’s mind to truth That is Yah’s job!</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/statements-of-beliefs.html">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<h3>On Man</h3>
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<h3>Consitutional Awareness</h3>
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<h4>Article Name</h4>
<blockquote cite="articles/name">
<p>
<em>Main Quote Will Go Here</em>
</p>
</blockquote>
<footer class="article-module-footer">
<a href="articles/name">Read More</a>
</footer>
</section><!-- end .article-module -->
<h3>Videos</h3>
<section class="video-module">
<h4>Name of video</h4>
<p>My embeded video will go here</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>Name of video</h4>
<p>My embeded video will go here</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>Name of video</h4>
<p>My embeded video will go here</p>
</section><!-- end .video-module -->
</div><!-- end #modules-wrapper -->
<footer class="main-footer">
Here lies the footer of the website
</footer>
</div><!-- end #main-content-wrapper -->
</div><!-- end .wrapper -->
</body>
</html>
All my css is in reset.css right now:
/* meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/********************************* end of css reset ***************************************/
.wrapper {
width: 90%;
margin: 0 auto;
margin-top: 2em;
background-color: #c3c3c3;
font: 100% Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif; /* 16px base */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
header h1 {
float: left;
font-size: 1.5em;
margin-top: 8px;
padding-left: 1em;
}
header h1, header li { border: 1px solid black; }
nav {
float: right;
}
nav li {
padding: 1em;
margin: auto inherit;
}
nav li {
display: inline-block;
}
#main-content-wrapper {
margin-top: 3.5em;
}
.intro {
background-color: blue;
width: 80%;
padding: 1em;
line-height: 1.5em;
margin: 0 auto;
}
h3 {
clear: left;
text-align: center;
}
#modules-wrapper {
background-color: green;
width: 100%;
}
.article-module {
float: left;
width: 33.3333333333%;
margin: ;
background-color: black;
color: white;
}
More posts by @Megan663
2 Comments
Sorted by latest first Latest Oldest Best
word2cleanhtml.com Here is a site that will convert your articles into html from the word documents. I haven't tested it extensively, but it did well in the small tests that I did. That should save you some time on that front.
Q1.) For your 52 articles that you have written, you can just link a PDF copy of the article and be done with it. This can cause design and compatibility issues for mobile devices and I would not recommend it though. There might be a better way but I would just bite the bullet and do the coding. Once the first article is done, the rest will be using that as a template and go by much faster.
Q2.) As for your questions regarding sizing, you will just need to do a little bit of research. You can use percent values as the margins. There are also plenty of guides to design and spacing. www.adamkaplan.me/grid/ this is a pretty good tutorial into responsive design techniques that I found a couple days ago.
Q3.) If you have a problem with a specific piece of code, post it and someone will take a look at it. Asking someone to review a whole page without any notes can be difficult. Just keep coding and the more you code, the more you will find small mistakes that you can fix. Its tedious but part of the process.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.