Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Basic Web Site

Featured Replies

Hey guys, Ive recently decided to pick up web design again and Im just creating basic web pages at the moment. Can some of you guys please review my coding and maybe give me some suggestions on where to go next to learn how to make better, more stylish pages ?

 

 

<html>
<head>

<style type="text/css">

body {background: black;} 

#eader {background: darkred; width: 70%; margin:auto; border: 1px solid orange; min-height: 75px; padding-top: 10px;}

#eader h1 {color: white; text-align: center; font-size:64px; padding:0; margin:0;}

#nav {width: 70%; margin: auto; border: 1px solid orange; background: darkred;}

#nav a:link,a:visited {text-decoration: none; text-transform: uppercase; display:block; width:70%; font-weight:bold; color:white; margin: 4px; padding-left: 145px; background:dark red;}

#nav a:hover,a:active {text-decoration:underline;}

#nav ul {list-style-type: none; margin:0; padding:0; overflow: hidden;}

#nav li {float:left;}

#content {background: darkred; width: 70%; margin: auto; border: 1px solid orange; min-height: 600px; margin-top:10px;}

#content h1 {text-align: center; color:white; border-bottom: solid black 1px;}

#footer {background: darkred; width: 70%; margin: auto; border: 1px solid orange; margin-top:10px;}

#footer p {text-align: center;}
</style>

</head>
<body>

<div id="eader">
<h1>WEBSITE</h1>
</div>

<div id="nav">
<ul>
<li><a href="http://www.karlcowell.co.uk/">Home</a></li>
<li><a href="http://www.karlcowell.co.uk/services/">Services</a></li>
<li><a href="http://www.karlcowell.co.uk/portfolio/">Portfolio</a></li>
<li><a href="http://www.karlcowell.co.uk/contact/">Contact</a></li>
</ul>
</div>

<div id="content">
<h1>Welcome!</h1>
</div>

<div id="footer">
<p>Copyright karlcowell.co.uk</p>
</div>
</body>
</html>

I Suggest Getting A Strong Understanding In GIMP/Photoshop To Help You Implement Some Nice Looking Images Into Your Designs. I Reccommend GIMP - Seeing How It's Free Of Charge And The Exact Same Thing As Photoshop, The Only Difference Is The GUI. Their Are Many Tutorials Online. If I Were You I'd Play Around With The Program First Before Watching Any Tuts To Become Comfortable With It And Allow Yourself To Use Some Creativity ;)

Hey guys, Ive recently decided to pick up web design again and Im just creating basic web pages at the moment. Can some of you guys please review my coding and maybe give me some suggestions on where to go next to learn how to make better, more stylish pages ?

 

Overall its not bad, but theres a few things missing.

 

For example, your missing whats called the Document Type Declaration.

It lets the users web browser know what version of HTML you're using so the browser can render it on the screen properly.

 

Document Type Declarations - http://htmlhelp.com/tools/validator/doctype.html

 

Also, within the head (between <head> & </head>) section of your code you're missing the title element.

The title element contains the text that is shown in the web browser title bar (right at the very top) and also for the main result link in google search results.

 

Somewhere in between <head> & </head> add:

 

<title>put anything you want here</title>

 

 

You're missing one or two other things to but you're only a beginner so i'll go easy on you lol :)

 

I recommend you check out W3Schools they have some great HTML 4 tutorials.

http://www.w3schools.com/html/default.asp

 

There is a newer version of HTML (HTML 5) but not all browsers support its features yet so stick with HTML 4 for the time being.

Edited by PHP Monkey

  • Author

Thanks mate, I knew about the declaration (not completely sure about them, but I'll get my head round them when I get a proper website up), and the title thing is noted too, I usually do that for good practice but meh, it's fine.

 

Thanks for the advice guys, I downloaded the trial of photoshop, used it many years ago so I'm still comfortable with it now, I guess I should start using it to get a more creative site, I just don't know how to do psd to html yet, I guess I should learn that soon :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.