Need Help Getting My Web Page Live

Hello,

I am an old school web page designer who has been out of the game for about 8 years now. Back in the day, we used to code our sites in HTML with programs such as Dreamweaver and then upload them to a server via FTP. There used to be a large list of companies that would host for free such as Geocities, Angel Fire, Tri Pod, etc.

Now days, it seems like if you want to build a web page from scratch and have it hosted for free by a company the designer has to use that companies "Template Editor" of software and build the page in your browser. I don't like this.

What I am still hoping to do is find someone who can host for free and allow me to upload my own HTML docs to the server without me having to use their templates or editing software. I have a very simple, 1 page HTML doc that I would like to publish. All text, no images. Can anyone tell me how I might be able to get this done?

Thanks in advance.

 

There are still a few out there, sometimes they will force ads onto your page, but typically not in a disastrous fashion...

000WebHost usually isn't too bad a place to start -- I've seen worse.

https://www.000webhost.com/

 

Check out the free web hosting offers at FreeWebHostingTalk

 

You can still do it with Tripod. However, their ads are a pain in the ass.

 

Well, well, well. Thank you ALL for your replies. I was however able to find free hosting with Geocites. Even though they are not the same company (owned by Yahoo!) that they were when they shut down in the 2009, the folks that took over have made it very simple for us old school coders who do not want any part of the grade 6 templates/clip arts/and other non professional fluff that goes along with using these services and in my opinion, designed with the 12 year old designer in mind.

You see, some of us are professionals. We know how to use Photoshop, Dreamweaver, Flash, PHP, Perl, and other languages that can not be fine tuned using these fluffy, way to user friendly programs. I mean, I want to design a site the way I WANT IT DONE. Not from some random template littered with kitty cats or flowers. People say it is no longer a reality? Check your knowledge at the door. YOU CAN STILL CODE IN HTML AND ULOAD FILES TO A SERVER VIA FTP. Just like the good old days.

Not saying there is anything wrong with Blogger or Wordpress. As a seasoned vet, I can honestly say I'd rather shit flies and sleep in the groud before using one of those ridiculous platforms.

Just my 2 pennies.

I whipped this up in about 2 hours. It's a simple mock design for a video game I like to play, just to get use to coding again. IMO this looks way cleaner and more professional than anything I have seen designed on a "drag, drop, and create in browser" type of application.

Web site: geocities.ws/epyclol (copy and paste link into browser)

-Just wait until I revisit my Photoshop and Flash skills. I'll show you kids how real web site developers create a web site.

 

Professionals.... Photoshop, Dreamweaver, Flash... same sentence...

beep beep beep beep beep -- Illogical, illogical. All units relate. All units. Norman, coordinate.

Of course with tables for layout, tags like <font> and <center> much less attributes like border and bgcolor that haven't EXISTED in 20 years, paragraphs around non-paragraph elements, and no headings to provide logical document structure... overstuffed keywords meta just BEGGING to be ignored if not pimp-slapped by search (it's called keyWORDS, not keyphrases or keysentences...)

You likely LEFT working on pages at the worst of times, and never really understood HTML 4 Strict, right? Well, you kind of said that when you said you use Dreamweaver. HTML should say what things ARE, NOT what you want them to look like.

Still, for ~8 years out of it, you could have done far worse... now if we can just get your skillset out of the 1990's... First step? Throw Dreamweaver in the trash. Second step? Light the trash on fire. Third step? Learn what HTML is actually for and stop using browser-wars style presentational markup!

 

I've always thought you should give your Dreamweaver to someone you don't like. Better yet, sell it to someone you really don't like.

gary

 

I thank you for the constructive criticism and I know there are new/simpler ways to add content to a page. Perhaps that is something I will revisit in the future. For now, Everything that worked 20 years ago is just a relevant today for the project I am working on. I'm not big into making things more complicated that they are. Thanks for the advice, sir.

 

would of just made a WordPress site, and just edited the pages with HTML, would of made it much easier and nicer for yourself

 

Assuming one considers that bloated steaming pile of how NOT to build a website "nicer"... which requires some heavy delusions and drinking a LOT of their kool-aid.

As primitive and out of date as his codebase is, and as tacky as his colours, he was better off with that than the TRAIN WRECK OF INEPTITUDE turdpress vomits up and has the unmitigated gall to call a website!

 

i like my colors! i'm working on my photoshop skills next. I'm 300% certain I can dominate anything a wordpress type of site can produce. Time will tell. I'm only like 3 days into this.

 

Your design/color-choice is... very 1995. Not that that necessarily matters, but for those of us not bitten by nostalgia (ie, most of the players of LoL), the site will not be attractive, at all. One thing to consider, apart from design and colors, is demographics. If you're trying to fetch the attention of 15-year olds, you should perhaps cater a bit to their taste.

I don't really care - the site is ugly as fuck, but it works fine on both desktop and phone, so I have no problems with it. What Photoshop has to do with anything I'm a little unsure of, though - for web-content, all you need to do is resize images to fit your design, and that can be done in any imaging-program (many way better at resizing than Photoshop), so I don't really know what you would need Photoshop for.

 

What would I use Photoshop for? How about designing the navigation menu on the left hand side, creating .gif image titles for each page, editing screen shots from the game, etc. While it is true I haven't coded in about a decade, there's nothing wrong with coding the way a guy used to code. Templates suck. Let me design an interface in Photoshop, slice the images and save them for the web, add the images to my HTML code, launch a site. I'm not taking anything away from Wordpress or Blogger, it just seems to me that that's where the people who do not know much about web design go for their little section of the internet. Meh, I could be wrong, but I know what still works for me.

 

Let me tell you buddy, I had a gander at your web site attached to the bottom of your post and if you think my site is ugly as fuck, then you should literally obliterate yours off the face of the earth.

 

In other words bloated inaccessible rubbish that is NOT design. You're talking about art, and BAD art that pisses on usability and accessibility.

Photoshop is NOT a design tool, never was no matter how many artists under the DELUSION they know what design is will try to pack you full of sand claiming otherwise.

A LOT of the things you describe these days can be done directly in the CSS, and if they can't, doing them will often completely **** over accessibility and usability, driving users away. That whole BS of "drawing images for menus" went the way of the dodo for a reason; much less GIF files for doing so. Ever notice how ZERO successful mainstream websites use images for menu items anymore? Yeah, THAT!

Which is why I say Photoshop should be the LAST thing you brush up your skills on.

Now THAT on the other hand is something you would use Photoshop or some other paint program for.

Unless that coding technique was never proper in the first place, doesn't gracefully degrade, use HTML for what it is FOR, results in you writing more complex harder to maintain code... that by extension of the shortcomings tells large swaths of users to sod off and many search engines won't even bother listing you if you continue on that road.

Just be thankfuly you're not working for a government agency, bank, public utility, or other such place where using code like you did can get you fined by the government, sued for breach of contract, or even sued as a site owner by people with accessibility needs.

NO JOKE!

... and, yeah. NO! That is NOT "design"! That is artsy fartsy BS that's a small subset of ones design skillset -- and to be frank, putting the cart before the horse because websites are about MORE than what they happen to look like on the screen you're sitting in front of!

This is because what's your plan for people who block images due to being under bandwidth caps, low throughput areas, etc, etc? What's your plan for mobile? Remember, 50% or more of all web traffic comes from the mobile arena -- AND people are using 4k displays with non-standard default font metrics... how is your FIXED pixel layout slopped together in Photoshop going to handle re-arranging the layout to fix smaller displays, dynamically adjust to every conceivable resolution, etc, etc?

You know that whole thing of "768px" or "960px" for design widths? Yeah, that ignorant halfwit BS was curb-stomped out of existence for a reason. IF you are even asking "what width should I design for" -- a common PSD jockey question -- you've COMPLETELY missed the point of HTML, CSS, or web DESIGN.

This is because ACTUAL design means meeting specifications and guidelines -- like HTML and CSS, like the WCAG... That means you start out with your content in a flat text editor -- no goofy WYSIWYG or preview pane bullshit in the way -- and organize it so it makes sense as if HTML didn't even exist!

You then go through that HTML and mark it up semantically to provide logical document structure that provides hooks for your custom styling, guides for search engines, and guides for all non-screen media users. Again, HTML is about MORE than just people with eyes!

... and again I said semantic markup, which means at that point you don't put DIV or SPAN in since they mean NOTHING, they are 'semantically neutral' and only say "this may recieve style" without saying WHAT style.

... and if you choose ANY of your HTML tags based on what they look like by default, YOU'RE DOING IT ALL WRONG!

Only once you have that semantic base do you go through and add stylesheets for each media target you want to support (screen, print, etc) bending that existing markup to your will with CSS, adding DIV and span as, and only WHEN needed... such as to mark a block to receive a uniform style. Done properly the semantics inside that block can often mean you don't need to "throw classes at everything" like the OOCSS re-re's or idiotic halfwit bullshit like bootcrap would tell you to.

IMHO when you get to that styling phase you are best off working on your legacy "pre CSS3" desktop layout first, and then using this wonderful thing called "media queries" to further enhance the layout for techniques that do things like strip off columns and re-arrange certain bits of content (like your menus) for different screen sizes when the layout would break or fail to fit the screen at that smaller size.

Then and ONLY then do you have any business booting up the paint program of your choice to draw any goofy graphics you hang on the working layout -- aka a "paintover" -- and even then keep it in your pants as there's a lot of things you can do in Photoshop (like graphical menu buttons) that can piss all over the accessibility and usability of a website.

Which again is why the number of sites you'll find pulling that idiotic stunt can now be counted on one hand... and none of them are what you would call "successful".

The process is called progressive enhancement, and it makes sure that the site gracefully degrades to be useful to as many users as possible! You don't follow a process like that by using semantic markup -- that thing we were supposed to use prior to HTML 3.2 and were supposed to use any time after HTML 4 Strict -- then you are not DESIGNING.

No matter how pretty the result is. That's the difference between art and design. The difference between hiring Greg Hildebrant and Chip Foose. You want a kick-ass poster, you go to Hildebrant. You want a car that might have a chance at going down a road straight, the Foose is loose.

... I like to refer to it as "for people who know nothing about the Internet, BY people who know nothing about the Internet". The one size fits all that in fact fits nobody unless you're talking about sweatpants with a drawstring.

... and believe me, there's a LOT to insult when it comes to those "solutions"

His at least has tasteful colours, but the layout... and lack of content...

But really when it comes to colours you'll get a lot of shit from different people no matter what you do. I mean take my latest site -- where responses on the design? I've got 50% saying "it's too bright and colourful" and 50% saying "colour it up some, it's too bland"... 20% saying "There's too much content, you need to spread it out with some symbols and images", 20% saying "You need more content", and 60% praising it for getting down to brass tacks and just giving them the content.

With yours, that black background is going to alienate a lot of potential users. Again, look around the web, how many major successful sites do you see doing light text on dark colours? Studies have shown that for around 60% of the population (you can probably find articles relating to that on NNGroup) the light colours on dark causes eye strain -- it's why when I see the default text in some 'modern' editors like sublime the first thing I do is dive into the options to find some other colour scheme.

But really the part to focus on is what @PoPSiCLe said about "But it works fine on both desktop and phone". I don't like your colours, but they meet accessibility minimums which is far more than I can say for most people using a dark background like you did... it's just whenever people see that black background now, they go "wow, 1990's called!".

Honestly it reminds me of a late 1990's Emulation/bootleg ROM site. @PoPSiCLe's site reminds me of mid 1990's Geocities except it's not all in serif fonts.

But that's aesthetics, and trust me, NOBODY agrees on it unless you circle-jerk spank it like an artist so you can fit their special little echo chamber of "accessibility, who gives a ****!"

Thing is, once you get used to using HTML properly, it's easier... WAY easier... SO much easier as you'll get consistent results off one set of CSS instead of having to manually state your appearance every damned time in the HTML. Case in point where you've got around ~16k of HTML done properly you'd only need 12k... and it would be more accessible to people who aren't on the perfect mix of vision, browser, screen size, and resolution you are.

... probably coming close to post limit, gimme a few and I'll post up an example of what I mean.

 

Just to show you what I mean, written using the HTML 4 Strict structural rules (aka leaving HTML 5's idiotic dumbass pointlessly redundant SECTION, MAIN, ARTICLE, NAV, ASIDE, HEADER and FOOTER out of the equation) under a HTML 5 document your page would be coded something more like this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<meta
	name="description"
	content="A beginner's guide with resources to gain elo, LP, RP, IP, level up your account, boost, learn the game. ADC, marksman, jungle, mid, top strategies, blogs, articles, helps tips and tricks."
>
<meta
	name="keywords"
	content="riot,strategy,resources,jungle,guides,youtube,twitch"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<title>Epyc's Guide to League of Legends</title>
</head><body>

<div id="top">

	<div class="contentWrapper"><div id="content">

		<h1>
			<a href="/">
				Epyc's Guide to League of Legends
			</a>
		</h1>

		<h2>
			Introduction<br>
			<small>Created Thursday, February 23, 2017 @ 0217 hrs CST</small>
		</h2>
		<p>
			Hey everybody! Welcome to my little tribute to the greatest eSports game ever created, League of Legends! If you're looking for a game that can make you rage like a 5 year old, cause you to phone in sick to work/school at least once a month, make you wish you were from South Korea, or trains you to pee and poop only during loading screens, then you simply have to try Riot's League of Legends. A fair warning though, this game is not for the thin skinned. You <strong>will suck at times</strong>. People <strong>will scream at you</strong> and wish you dead. They <strong>will tell you to die</strong> in a fire or that your children should perish from the most horrific plague after you get crushed by a bus. You <strong>might</strong> cry. You <strong>will</strong> quit, uninstall,  reinstall and try again. It's O.K. This is <strong>normal</strong>, we've all been there. Allow me to show you some of the great resources available for you so you may rise from  pleb to power house in this super fast paced and ultra competitive world! Unlike in the actual game, noobs are welcome here.
		</p><p>
			<strong class="notice">
				Don't forget to book mark this site to remain connected to the LoL Community! New content added pretty much every day. Thanks for stopping by :)
			</strong>
		</p>

		<div class="subsection">
			<h2>
				Who Is Epyc & WTF Is This Site?<br>
				<small>Created Thursday, February 23, 2017 @ 0747 hrs CST</small>
			</h2>
			<p>
				I remember it like yesterday. It was the summer of 2009 and I was on a mission to become the world's greatest Dwarf Paladin to ever log into Blizzard Entertainment's World of Warcraft (also commonly known as WoW). I had come a long way in the 7+ years I had spent playing the game. I can honestly say I stared at a computer screen for about 30 straight days mining mithril ore in Tanaris to upgrade my blacksmithing skills. I had a deep passion for the game, however it was quickly fading. I simply felt that the most popular game on the planet had become boring. The never ending tedious tasks of completing daily quests, grinding for XP, or participating in 4 hour raids that quit often resulted in nothing but death and disappointment began to tire me.
			</p><p>
				One day my brother approached me and asked if I heard about this new League of Legends game that was being developed. At the time I had not and quickly signed up to be a closed Beta Tester. I can't remember how long it took before I was selected, but I can tell you I didn't create my account right away.
			</p><p>
				I watched my brother play a few games. I wasn't impressed initially. The graphics seemed very cartoony and I cringed every time he moved the character he was learning (Annie). Her voice annoyed me. I was sceptical about the future of the game because it seemed to me like its target audience was going to be 10 year old kids. After all, I was used to all the glory and attention that came with being a top geared Paladin in WoW.
			</p><p>
				Eventually I grew tired of trying to get four hour 10 man raids together and decided to give League of Legends a whirl. I think I played Rammus my first non-bot game. I remember buying boots for my first item and powerballing into minions over and over again to CS. Back in those days last hitting didn't exist. People would blow there mana on CSing to push a lane as fast as possible in an attempt to destroy the opponents turret faster. There wasn't a support role, there was no meta, there was really no strategy.
			</p><p>
				Well Heavens to Betsy, how times have changed.
			</p><p>
				Fast forward to 2017. I am still playing the game casually on a regular basis (if that makes sense). Although I play ranked games the most, I do not anticipate I will ever rise higher than my max rank of Gold 4. There are simply too many people out there who have the patience and drive to learn the game better than I ever can. However just because you may never reach Diamond rank or better, that should not deter you from trying to be the best player you can possibly be! This game is a lot of fun and once you know how to make kids rage it becomes even more addicting. Who knows, you may even become a 7 year vet like me!
			</p><p>
				With so much time and energy invested into the game, and after 7 years of experience, I have decided to start creating content for the game I love to play. Most of what you will find here on my web site will be links to valuable resources both new and experienced players may utilize, as well as articles and blogs written by me. My short term goal is to develop my skills as a writer and a blogger within the League of Legends community, and then branch out into developing additional content.
			</p><p>
				There is currently not much news here for the experienced player, however if you are new to the game and have stumbled across my web site I can tell you with the utmost in confidence that the links to the various resources found here will be paramount in your success as a League of Legends player. They are the most reliable and popular resources brought together for you to have in one simple page.
			</p><p>
				Thanks all for dropping by! I'm going to be working hard on creating entertaining content for you the viewer. Please check back in the near future for new blogs, articles, and other League of Legends info.
			</p>
		<!-- .subsection --></div>

		<div class="subsection">
			<h2>
				Jax Jungle is REALLY STRONG Right Now in Low Elo with Examples<br>
				<small>Created Thursday, February 24, 2017 @ 1041 hrs CST</small>
			</h2>
			<img
				src="images/jaxthumb.jpg"
				width="74" height="74"
				alt="Jax - Grandmaster at Arms"
				class="leadingPlate"
			>
			<p>
				Im going to be adding a lot of helpful information here for all the Jax mains out there. For a lack of better words, Jax can be a mother f*****g beast in the jungle late game. There are several different ways to shit on kids and make them rage.
			</p><p>
				One epic video I found last night between cooking food, gaming hard, and updating this web site made me rethink the viablity of AP Jax in Season 7 jungle. It's OP as f***. Albeit a slower clear at first with respect to a Fervor AD build, just check out the late game. I do not take credit for making the following video, but if you're a Jax main and want to upgrade your life on the rift, watch this. It's a new YouTube clip I found off Reddit. He start's moderately slow at first but has a very strong late game. This build is 300% fun! Enjoy! <a href="https://www.reddit.com/r/League_Of_Legends_/comments/5vdnus/ap_jax_in_jungle_how_to_win_a_losing_game/">Season 7 AP Jax Dominating the Rift - Feb 24, 2017</a>. Thank you to <a href="https://www.reddit.com/user/Liderex">Liderex</a> for posting this video.
			</p>

		<!-- .subsection --></div>

		<div class="subsection">
			<h2>
				Working at Pizza Hut this Weekend<br>
				<small>Created Thursday, February 25, 2017 @ 1101 hrs CST</small>
			</h2>
			<p>
				So this weekend I have to work at Pizza Hut all afternoon and evening therefore updates will be sparse. In between shifts you can find me on the rift or checking out some streams on Twitch.tv.
			</p><p>
				More updates to come in the next day or so. Please check back later to see what's new. Also, tell your friends about me too! I would love to get some feed back from you all! Thanks, have a great day.
			</p>
		<!-- .subsection --></div>

	<!-- #content, .contentWrapper --></div></div>

	<div id="extras">

		<h2>Resources</h2>

		<h3>Official Links</h3>
		<ul>
			<li>
				<a href="https://signup.na.leagueoflegends.com/en/signup/redownload">
					Download League of Legends
				</a>
			</li><li>
				<a href="http://www.riotgames.com/">
					Riot Games Official Site
				</a>
			</li><li>
				<a href="http://boards.na.leagueoflegends.com/en/">
					The Boards
				</a>
			</li><li>
				<a href="http://status.leagueoflegends.com/">
					Server Status
				</a>
			</li><li>
				<a href="http://euw.leagueoflegends.com/en/news/game-updates/patch">
					Patch Notes
				</a>
			</li>
		</ul>

		<h3>Learn How to Get Good</h3>
		<ul>
			<li>
				<a href="http://www.lolclass.com/">
					LolClass
				</a>
				(Educational Video Library)
			</li><li>
				<a href="http://www.riotgames.com/">
					LOLKing
				</a>
				(Useful Guides & Statistics)
			</li><li>
				<a href="http://www.mobafire.com/">
					Moba Fire
				</a>
				(Guides From Players of All Skill Levels)
			</li><li>
				<a href="http://www.probuilds.net/">
					Pro Builds
				</a>
				(Learn How the Pros Itemize)
			</li><li>
				<a href="http://www.mobafire.com/league-of-legends/build/lol-essentials-league-of-legends-new-player-beginner-guide-371292">
					LoL Essentials New Player/Beginner Guide
				</a>
				(Informative Guide for Noobs)
			</li>
		</ul>

		<h3>Tools For Succeeding</h3>
		<ul>
			<li>
				<a href="http://www.championcounter.com/">
					Champion Counter
				</a>
				(How To Counter Your Opponent)
			</li><li>
				<a href="http://champion.gg/">
					Champion.gg
				</a>
				(Champion Win Rates & Overall Performance)
			</li><li>
				<a href="http://www.elophant.com/">
					Elophant
				</a>
				(Champion Guides, Summoner Statistics & Trending Builds)
			</li><li>
				<a href="http://www.leagueofgraphs.com/">
					League of Graphs
				</a>
				(Detailed Statistics & Graphs)
			</li><li>
				<a href="http://leagueoflegends.wikia.com/wiki/League_of_Legends_Wiki">
					League of Legends Wiki
				</a>
				(Massive Wiki Site)
			</li><li>
				<a href="http://www.legendsmith.com/">
					Legend Smith
				</a>
				(Advanced App For Building Your Champ)
			</li><li>
				<a href="http://lolmasters.net">
					LoLMasters
				</a>
				(Analyzes Ranked Matches by Diamond+ Players)
			</li><li>
				<a href="http://www.lolcounter.com/">
					LoL Counter Picks
				</a>
				(Counter Pick Your Lane)
			</li><li>
				<a href="http://lolnexus.com/">
					LoLNexus
				</a>
				(Real Time Game/Summoner Search)
			</li><li>
				<a href="http://leaguereplays.com/">
					LoLReplay2
				</a>
				(Watch Replays of Games And Learn)
			</li><li>
				<a href="https://na.op.gg/">
					OP.GG
				</a>
				(The Mother of LoL Stats Sites)
			</li>
		</ul>

		<h3>Other Valuable Resources</h3>
		<ul>
			<li>
				<a href="http://www.newsoflegends.com/">
					News of Legends
				</a>
				(LoL News & Content)
			</li><li>
				<a href="https://www.reddit.com/r/leagueoflegends/">
					LoL Subreddit
				</a>
				(Resource Power House)
			</li><li>
				<a href="http://www.surrenderat20.net/">
					Surrender@20
				</a>
				(Latest on New Champs, Skins & More!)
			</li><li>
				<a href="https://www.twitch.tv/directory/game/League%20of%20Legends">
					Twitch.tv
				</a>
				(Watch Games In Real Time)
			</li><li>
				<a href="http://www.azubu.tv/games/league-of-legends">
					Azubu.tv
				</a>
				(An Alternative to Twitch.tv)
			</li>
		</ul>

	<!-- #extras --></div>

<!-- #top --></div>

<script type="text/javascript">

	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-26341965-1']);
	_gaq.push(['_setDomainName', '.geocities.ws']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

</script>

</body></html>

Code (markup):

I axed the hitcounter BS since you've got perfectly good transparent tracking with GA and this isn't 1997, though honestly I'd probably axe GA too if your hosting provides a decent internal tracking package based off the server logs... which you might not have on that free hosting.

Lemme break that down beginning to end for you so you can understand the how/what/why of the choices I made in the markup.

First I stuff the doctype, html opening, head and charset meta at the top as 1) the only thing that is valid between them is whitespace, 2) they MUST always appear in this order what with certain browsers refusing to see the charset unless it's in the first 1k AND with the charset declaration belonging before any content-bearing elements. You will see I do the same with </head><body> and </body></html> as a reminder that NOTHING should EVER be inserted between them, not even COMMENTS as that can trip rendering bugs. (though your free hosting might shove a comment before </html> screwing things up)

Next is the viewport META, which is basically there to tell mobile browsers we know what the **** we are doing, so don't lie to us about the screen width and height, and do not automagically try to apply any goofy zoom. MIND YOU Apple retina display and Android HDX devices WILL still lie to us, they just won't lie as much. :/

Your description meta wasn't too bad, just don't repeat the title in it, that's the title tag's job!

Keywords meta... argh. It's called keyWORDS. Not keyphrases, not keysentences, but keyWORDS. Seven or eight single words or proper names that exist as CDATA between <body> and </body> you want a slight uprank on, preferably not exceeding 96 characters. It is not a place to blindly stuff wtih terms, every concievable combination of terms, or any of the other halfwit nonsense you have likely seen other people blindly copy from others who just blindly copy from others. You don't follow those rules it WILL be ignored, which is why laughably most people -- even those working at Google -- are convinced it is ignored when it isn't! Or at least, it isn't if again it's seven or eight words that exist between <body> and </body> that totalls less than 96 characters.

The stylesheet link has a media target to say that it is for screen media, don't use it for print, aural, or any other type of device. ALL of the style would be placed in a single monolithic external stylesheet to keep the number of handshakes (separate files loaded at once) under control, and to pre-cache the appearance of subpages. I used "screen,projection,tv" because there are still plenty of screen media devices that will apply their own rules on top of yours if you don't say "projection,tv" -- the HTML 5 validation will issue a warning about those, ignore that. Really CSS media targets shouldn't be any of the damned HTML specifications business in the first place!

Nothing wrong with your title, so we skip right ahead to close out head and body... Closures in modern HTML are NOT optional as lacking them can screw up the application of style. So you know how you are used to omitting </head> or </p> from time to time? STOP DOING THAT! They are no longer optional, haven't been since 1997 unless you were sleazing out tranny documents.

On to the BODY contents. First up is a DIV#top that I put in place to apply a max-width to the layout from the CSS. Have you seen what your page does at 2560x1440? To prevent long paragraphs from becoming unweildy, it is often best to force a maximum width on your content to prevent a page from getting too big. I'm saying MAX-WIDTH since a good layout should remaing fluid -- adjusting to screen width -- until such an adjustment would break it. Declaring fixed widths (or fixed heights) in your design is always epic /FAIL/

Then I have a double-wrapping DIV as from experience I know that a content-first columnar approach is often best formed using two div and what's called the "100% zero float" approach. If I have time maybe I'll write the style to demonstrate that... but for now know that we're working in a content organized logical document manner, which means that 'sleazing out TD all over the place so the content doesn't make any sense" thing you were doing isn't how it's done.

First element is the H1. A level one heading, is THE heading that everything on every page of your site should be a subsection of. That's what it MEANS. It does not MEAN 'giant bold text'. It is a structural element with a very precise meaning. HTML 5 pisses on this slightly by saying "every time you open a SECTION or ARTICLE tag go back to H1 depth" -- but since no legitimate user agent leverages tags that way, I say skip 5's pointless new tags and use the document structure that screen readers, braille readers, search engines and other non-screen UA's can actually make sense out of.

I made it an anchor as people these days pretty much expect the site title or logo to be a link back to the home page.

Next is an H2. A second level heading means the start of a major subsection of the page, a subsection of the h1. (since it means the start of a section, WTF does the WhatWG think we need a section tag for again?!?). It does NOT mean "big bold text" any more than H1 does. It is a structural element saying "This contains information about what follows"

The SMALL inside the H1 doesn't mean "this text must be smaller" even "make this text smaller" -- it means "this text would be smaller for grammatical reasons, such as a subtext or supplemental information in a heading". THAT is what semantics is about. The created date/time information is supplemental information about the section being started by the H2. NOT rocket science.

From there you have your paragraphs. You don't waste time dicking around setting the colour or font-style, that's CSS' job! CSS that has NO business in your HTML whatsoever. 99% of the time you see a style="" attribute and 100% of the time you see a <style> tag, someone didn't know what the *** they were doing!

I also advise against making single words "strong", search engines will pimp slap you for that. If you're going to put "more emphasis" (the meaning of STRONG) on something, do it to at least a phrase.

To that end, with your strong text that was coloured, I used the class .notice as there was no grammatical reason for that to be coloured different. In that way I'd be tempted to make the <strong> in the paragraph beforehand be EM (emphasis) and style it as bold instead of italic, then make the <STRONG> be coloured different.

Remember:

B -- a proper name or legal entity.
I -- a book or document title not being quoted
CITE -- a book or document title being quoted or referenced
EM -- with emphasis
STRONG -- with more emphasis

Anyone telling you that B and I are "deprecated" or that you should "only" use EM and STRONG is full of shit and talking out their arse.

Your smaller sections I gave div.subsection to make them easier to target for width constraints. These subsections get identical heading and paragraph formatting.

Notice my closing comments such as:

<!-- .subsection --></div>

Uses CSS notation to tell me exactly what DIV I'm closing. I don't waste time saying "end" or "close" because HERPAFREAKINGDERP, that's what a </div> does! I put the comment before the closure as comments between sibling level tags around floats, inline-blocks, and other fancy positioning methods can trigger rendering errors in some builds of FF and IE. If you put the comment before the closure, you don't have to worry about it ever being between sibling level tags.

I also don't comment the opening, instead I use a class or ID that tells me what it is and NOT what I want it to look like. You will notice there are NO classes, id's, or tags chosen because of what they look like.

Again, notice that the heading for each section is with each section. One of the biggest problems with how you wrote your page is that the headings for many of your sections were nowhere huffing near thier content! That's GIBBERISH NONSENSE, EVEN by twenty year old standards! Well, unless you leveraged TH with scope, which you did not...

Closing out the primary content area we have the 'extras' section containing your various off-site links. The H2 says this is the start of the 'Resources' section, the H3 says it's the start of a subsection of that h2 before it.

You do NOT slop anchors in willy-nilly like that. What you have there are lists of choices -- that's a LIST's job, not a bunch of anchors with BR. Say what things ARE, so if you have a list of choices, use a list... You don't want the bullets, that's CSS' job to fix!

There is also no such thing as a target attribute in 4 Strict, and whilst it's allowed in 5 it was removed for a reason. DO NOT just SHOVE a new window down user's gullets! That is NOT accessible design and is just going to piss off visitors by breaking forward/back navigation. Besides someone wants it in a new window, that's what middle-click or ctrl-click is huffing for! Again, keep it in your pants!!!

I may have gone a little over-aggressive on the formatting, but it makes you less prone to missing a closure (you were missing several) and easier to copy/paste a section then insert the new content when/if you are adding or removing stuff.

After the extras section we close out #top, put the tracking script in, and close out the rest of the document.

WAY simpler, EVERYTHING else you were doing going in the CSS. If I have time later I might toss together an example of that just to show you what I mean, and the tricks/techniques commonplace to such a design in today's way of doing things including making it properly "responsive".

I mean, what's easier to do every time you use the same heading style on the page? This:

		<div class="subsection">
			<h2>
				Who Is Epyc & WTF Is This Site?<br>
				<small>Created Thursday, February 23, 2017 @ 0747 hrs CST</small>
			</h2>

Code (markup):

Actually saying "hey, this is the start of a section",,, or this:

<table width="100%" border="0" cellspacing="1" cellpadding="1" border=1>
  <tbody>
    <tr>
      <td><tr>
				  <td valign="top" bgcolor="#1e1e1e"><font face="tahoma" size="2" color="yellow"><strong>Who Is Epyc & WTF Is This Site?</strong></font><br><font face="tahoma" size="1">Created Thursday, February 23, 2017 @ 0747 hrs CST</font></td>

Code (markup):

"table for nothing" where the bloody heading isn't even next to the text it's supposed to be FOR?!? (since the heading for an entirely DIFFERENT section is after it. You should hear what JAWS does with that mess)

Even if it was tabular data worthy of a table tag, this:

<td valign="top" bgcolor="#1e1e1e"><font face="tahoma" size="2" color="yellow"><strong>

Code (markup):

Should probably have just been:

<th scope="col">

Code (markup):

EVEN 7 years ago, hell even 14 years ago!

 

you can search online and get enough resource .hope changing host company you will fix this.

 

In fact, here we are; total rewrite:

http://www.cutcodedown.com/for_others/cpalaniuk1980/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/cpalaniuk1980/

Is wide open for access to the gooey bits. In the markup the only changes were the addition of a span in the h1 to allow me to force "LoL" to it's own line when the screen would force the title to wrap, and a div#footer since you should have a disclaimer blob.

Nodding off, but if I have time tomorrow I'll explain the CSS -- for now, try it at different font metrics, and try resizing the window down to see what it does on mobile. Also note the max-width since the widths your table was being allowed to grow to made following your content paragraphs in that first section absurd. the increase in paddings in certain areas clean it up and make it look way less haphazard... I also desaturated the colours so as to reduce eyestrain whilst staying within WCAG minimums, used box-shadow with a smaller body background so it's not crapping itself with a 1.2 megabyte background image, etc, etc...

... and I now know why it feels so familiar. It's hackaday's old theme.

 

Ooh, ten minutes sleep before bolting awake... you'd think I had non-24 or something. Alright, let's use this insomnia to at least be semi-productive.

To break down the CSS, follow along with:
http://www.cutcodedown.com/for_others/cpalaniuk1980/screen.css

I always start with a "reset" -- resets are sections of code that set the margins, padding, and border of certain elements the same because across different browsers they aren't. This stems from HTML's history of the POINT being to say what things are, NOT what they look like -- the original idea being the "user agent" (a browser is UA but a UA isn't always a browser) would then determine the best way to convey that message within the capabilities of the user's device. To that end appearance of the tag was ENTIRELY up to the whims of every browser maker.

Hardly a shock CSS feels "hard" to many people starting out.

There are smaller resets like the so called "universal reset" that uses * to target everything. This is a bad idea as it can make styling form elements a pain in the ass across browsers thanks to some bits in FF and IE that we lack control over. There are larger resets like Eric Meyer's "reset reloaded" but that fat bloated pig is what gives resets a bad name. It wastes time setting values that don't need to be "reset" and borders on being a framework. ... don't even get me STARTED about frameworks. Quite literally resets like his are why you'll find developers who badmouth the concept of a reset and would rather either risk their site being broken, or manually declare padding:0; margin:0; border:0; every time they use one of the offending elements.

The reset I use is the Goldilocks zone. At a quarter of a K nobody can complain about it being a waste of code, and it hits just the elements that NEED to be hit!

I then kill off HR. A horizontal rule indicates a change in section or topic where heading text is unwanted or unwarranted. As we can convey that meaning by other more versatile means in the visual layout, we hide it from the visual layout, leaving it in the markup for non-screen media users.

AGAIN, HTML is for saying what things ARE, NOT WHAT THEY LOOK LIKE -- to that end HR does NOT mean "draw a line across the screen"!

Next is something if you've been out of it for a few years you've probably not seen before -- a media query. Basically this one says that if the screen is narrower or equal to 480 pixels, apply those to text-size-adjust properties. This is a bugfix for some early windows mobile and iOS devices that are too old to know what a viewport meta is. Without it, well, the text basically doubles in size or more and won't zoom out. Whilst said devices are circulating out of common use, remember the orange cheeto fingered twittering TLDR mouth breather who cannot tell a truth is still using a Samsung that they haven't made security updates for in three years. Old devices will stay in the stream with users who don't know any better or are too stupid to care.

Now we're on to the page specific code.

body -- the min-width is for legacy IE (7 and 8) who cannot handle media queries. This prevents the layout from ending up so small they can't actually even use the page. I pad the sides just so a sliver of the background will show at intermediate resolutions.

The text align is for REALLY old versions of IE to center #top... you could probably lose that since only a handful of mobile users will still come in on versions of IE that rely on it, but it's two lines in total by the time we get inside #top, so i say what the hell, leave it in.

I always set the font most commonly used across most of the document ONCE on body. I declare the font-size in % or EM (same thing) so that it scales off the user's browser preferences. The WCAG -- Web Content Accessibility Guidelines -- says to use EM, so use 'em. 100% == 1EM always, so same thing. I declare a much taller line-height than the 120% the CSS specification suggests as I find it aids in legibility greatly. Same reason high school English teachers always demanded if you typed out your document it be double-spaced. When declaring your font ALWAYS remember not everyone is going to have your magical first-choice since, well, Tahoma, arial, segoe ui, whatever -- don't exist on most Linux or Apple systems. Hence the helvetica fallback for crApple and generic sans-serif family if all else fails.

Whenever I change the font size I EXPLICITLY re-declare the line-height as you CANNOT rely on it inheriting properly. Some of the mouth-breathers over at Sitepoint might try to tell you that if you "omit the metric" and just say "1.5" it will magically work -- it only does so for users who have that magical perfect 16px default. As someone who regularly uses the 8514/125%/120dpi/20px/Windows XP- Large/Win Vista+ Medium/PickAHonkingNameAlready size, and who's media center is set to 32px, I can tell you that 'metricless line-height' thing is 100% grade A Farm Fresh BULLSHIT!

I always use the full condensed 'font' property for clarity sake -- and another reason we'll get to when we get to the H1.

Finally the body background colour for images off appearance, background-image, and default text colour. I desaturated the colour but kept the luminance level mostly the same. Subtle change that reduces eye-strain. "pure" hues of red, green, or blue are known to have... issues when used as text. Not the least of which being that with how subpixel hinting works, you lose subpixel hinting if you only declare green!

A LOT of why people might call what you had 'ugly' is a combination of pure green on black feeling 'harsh', the loss of subpixel hinting, and the lack of padding running things right up to the edges of their containers.

body:before -- For some jacktarded reason CSS 3 won't let us declare box-shadow -- even an inset one -- on BODY. :before lets us use 'generated content' to create an element to which we can apply it. Making it position:fixed gives it a 'display edge' behavior so that our shadow remains fixed even as the background on body scrolls, an effect I'm just kind of fond of. It would be NICE to be able to declare a larger shadow, but the buffer used for shadow generation in most browsers tops out at 256x256 total for each corner, so 128px blur + 128px spread is our limit.

Basically this is how I replaced your massive 1.2 megabyte image that had a shadow effect with this much smaller image that has no shadow/fade:
http://www.cutcodedown.com/for_others/cpalaniuk1980/images/bodyBackground.jpg

But still managed to end up with a shadow/fade at the corners.

a -- the default for all anchors on the page[/a]

a:active,
a:focus,
a:hover -- these three states nab mouse hover, and keyboard. TECHNICALLY :focus is supposed to be for keyboard and :active is supposed to be "this was the last thing clicked on", but in practice, well... a lot of older browser will use :active instead of :focus. Also some older puffer sticks other alternative input methods use :active as well. Good rule of thumb is if you're gonna :hover, nab all three if it's an anchor, input, or button.

#top -- as we have that position:fixed generated content we need to make sure our content depth sorts over that. Normal elements depth sort by the painters algorythm... whatever's coded first is on the 'bottom'. Positioning other than static -- aka fixed, absolute, relative -- will depth sort over static (the default) elements. Elements with positioning painters algo to other elements with positioning, so by adding position:relative to #top, it will depth sort over the position:fixed :before element.

The overflow and zoom makes the element wrap/grow to contain any floats or margins inside it. NORMALLY a container ignores the height of floats and any margins inside it collapse over its own margins. If you don't care about IE6/earlier, you can lose the zoom as overflow was made a 'haslayout' trigger in those browsers.

I keep it just because I still get the occasional stray user stuck on Windows mobile 6/earlier or 98/XP at their workplace. (I can point you at an entire medical center where the most recent machine in their office runs Server 2k3)

The max-width prevents the layout from getting too wide. Pretty simple that.

Margin:0 auto; is the preferred way to center an element in modern browsers. I set the text-align back to the defaul left after the legacy IE fix centering on body.

The 100% min-height will (we hope) make the #top stretch to full height. Should you have pages with shorter content than a practical screen height we should revisit this, probably introducing a new concept called "flex-box" into the mix.

Finally a legacy background-color, and a modern RGBA transparency one. This is how the body background shows through the sidebar but appears darker.

* html #top -- * HTML is a hack to target IE6/earlier. Completely safe, just addresses that legacy IE knows neither min-width or max-width. If you don't care about IE6/earlier, you can get rid of this.

.contentWrapper -- This is where the 'magic' of the layout begins. First it's position:relative again to maintain any depth-sorting, then we set it to full with but floated left... that might look strange, but what that does is float it full width of the parent container, leaving 0 pixels free for anything to be floated next to it. REMEMBER THAT, there's 0 pixels left to fit anything!

#content -- again overflow and zoom to contain any floats and margins. It then has a left margin of 20em, this makes a blank space over which we will be placing our #extras section. Finally I give the whole content area a black background.

#extras -- and heres the other half of that magic. Remember that 0px I told you to remember? We float this the same direction, and set it to the 20em of width we made space for with the margin on #content. Finally we set a NEGATIVE margin of that same 20em.

Margins do something interesting in that they increase - or in the case of negative decrease -- the area reserved in the layout for the element, without changing how big it is drawn. As such if you put a negative margin equal to the width of an element in place, that element is treated by the layout engine as being 0px wide. As such with it having zero width, it now FITS next to .contentWrapper! Boom, it hops up into place. Because we put the margin on the right, it overlaps to the right ... right on top of that margin we put on #contents.

... and of course this too needs position:relative so it depth sorts over #content.

Boom, that's the primary columnar layout with an elastic (em) measured sidebar and a fully fluid (within the semi-fluid limits of #top) content column... without having to chance the source order into something that would be a pain in the ass / pointless for someone not using screen media.

Since without screen media you'd really want the CONTENT area of things like recent news BEFORE your off-site links.

h1 -- pad it, align it, font it, colour it. YAWN.

But notice I declare the full font line again. As mentioned before when you change the font-size you redeclare your line-height, by the time you end up doing something like:

font-weight:bold; font-size:200%; line-height:120%;

You're at damned near the same number of characters as:

font:bold 200%/120% tahoma,helvetica,sans-serif;

So screw it, say the whole thing for clarity sake!

h1 a I killed off the text underline even though it's a link, as it looked confusing/inconsistent on the heading like that. Nowhere NEAR as confusing as your "resources" text, but it just looks more professional without it. From there it's just colour. I didn't give it a hover state as it is not primary navigation.

h2 -- The default size was a bit large, so I customize.

p -- rather than margins I prefer to use padding when possible just so I don't have to think about that "margin collapse" issue I mentioned earlier. Even though I use margin-wrapping a lot, it's better to not have to think about it. Only padding the bottom and not the top makes it easier to handle too as you can just margin-bottom your OL, UL, and headings, without having to worry about padding-bottom on any parent container.

You'll notice a lot of 1EM to 1.5EM paddings, running your text right up to the edges feels ugly to the majority of users, and can also make text harder to read. One of those things that before CSS we didn't have much meaningful control over.

strong -- I lightened the colour on them as with tahoma in green on black it doesn't always stand out as much as it does in a dark colour on light.

.notice -- I set this to display:block so I could set the text alignment. Colour, yawn.

#content h2 the content area H2 are different from the "resources" one in the sidebar, so use the parent to select it. I pad them, margin bottom to push the paragraphs off, and colour them. The black side borders helps make things not look like they "run together" as much when your inner columns are in place, and the box-shadow helps give it a little texture. I also used a small border-radius to clip the corners as I felt the square edges were a bit harsh.

All the -webkit prefixed versions are to deal with the fact that Safari is aging like milk, and a lot of iOS devices aren't getting pushed new versions. Pretty much every other mainstream browser doesn't need that crap anymore just to use a CSS 3 property.

#content h2 small -- the subdata. If we don't display:block it will use the CALCULATED line-height of the H2 no matter what we declare in our font declaration, and some browsers will double-up the <br> for *** knows what reason. Again, change the font-size, change the line-height, in this case I made it a little taller. Note that the 80% font size would return us to the body size, since 80% of 125% is 100%. Always remember EM multiplies that way based on the parent element. You could use a newer measurement called REM instead which is always based on the browser default, but browser support remains spotty and often unpredictable even in browsers that claim to support it.

#content .subsection -- the subsections of the comment are floated and half-width. When they are shorter than the first they will ride up into place just how you had them. No tables needed.

#extras h2 -- just adjust the padding to be consistent with the rest of #extras.

#extras h3 -- H3 are usually larger, we just want them bold and coloured. 1em is a good standard padding to help keep the text clear.

#extras ul -- turn off the bullets, pad them. I gave them a little boot in the patoot on the left side just to make the sections clearer.

#extras li -- I also padded the bottom of these to make it clearer where each one ends. Just looks nicer particularly when they are long enough to word-wrap.

#footer -- position:relative just makes sure if a content section were to overlap (which it might if we go more robust on height control) it stays where we can use it. The clear:both makes sure it is pushed past both floats, some simple padding, colour... and I gave it a subtle 1px top border as it felt like it ran into the content a bit too much.

.leadingPlate -- that one plate image you had. Float it, marign it, nothing too fancy.

... and that is the default screen media layout with most of the legacy support in place. I would probably test and dial it in more if this were something I was putting my own effort into. (or if someone were paying me for).

Which just leaves our media queries to make it alternative screen size friendly!

media (min-width:1px) -- I added your little images using generated content, so they could easily be removed and don't sit there mucking up the markup since they are more presentation than content. Because this would require background-size to look decent, a CSS3 only property, I hide it behind a 1px media query so only modern browsers will apply those images.

I did this more as a demo of how to do that...

media (max-width:65em) -- I do NOT use predetermined breakpoints for my media queries. To me saying "well this device is this px" is a BS means of doing so particularly since I design in accessible %/em and not pixels. I make a test window smaller and smaller until it breaks, then create a query for that width.

In this case at that size, I strip the padding off body to free up a little room to show more content, and lower the min-width as we now know we can target smaller screens with CSS3.

I then strip the floats and widths off those subsections as the screen is just too damned tiny at that point to have those as separate subcolumns... boom where once was two inner columns, now there is but one.

media (max-width:55em) -- get down this small the title wordwraps, making those images look silly, so kill them off!

media (max-width:50em) -- this small we don't even really have room for two columns, so we strip the columnar behavior clean off the layout. That means nulling the margin on #content so it takes up the whole width, and killing off the float, width, and negative margin on #extras.

media (max-width:34em) -- this tiny it just looks nicer to force the word-break on the heading.. then due to the diminishing screen space we lower the side paddings so that things can use a bit more screen. I still don't like running text right up to the screen edge as a LOT of users seem to complain about that being hard to read/follow.

... and that my good fellow is how we do that NOW; and frankly, everything but the media queries is how it should have been done from about 2003 onward. Despite the significant increases in functionality, it's 16.6k in two files to your original's 15.7k ... and it will load faster on revisits by leveraging cache, when/if you create subpages they can re-use the same appearance off the semantics resulting in simpler HTML, and that drop from 1.28 megabytes of images to 30k probably wouldn't hurt matters either.