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.

My first attempt at Web Design

Featured Replies

I have just signed up to this forum after just being told about and it looks to be a good place to have joined so far.

 

Anyway, i have teaching myself about css/html by viewing source codes of other websites (not sure if this is how is should have learned) for a few weeks now and for the past few days i have put together a homepage for a website i wish to run properly once completed.......could you please give me some constructive criticism regarding what i have so far.

 

Temporary URL: http://danielcook.host22.com/

 

Thank you for reading and for the comments in advance

 

Daniel

On larger screens your images (bg, and header bg) cut off, and the header looks a bit out of character with the site.

The our friends links being centered i don't think is that great.

 

If you've just started out, then honestly, i think you've done a damn good job. This is near the quality of quite a few commercial (minimalist) wordpress theme's i've seen available.

 

Code wise, my only beef is you've got a major case of divitus, but you're definitely on the right track.

 

Just my $0.02

  • Author
On larger screens your images (bg, and header bg) cut off, and the header looks a bit out of character with the site.

The our friends links being centered i don't think is that great.

 

If you've just started out, then honestly, i think you've done a damn good job. This is near the quality of quite a few commercial (minimalist) wordpress theme's i've seen available.

 

Code wise, my only beef is you've got a major case of divitus, but you're definitely on the right track.

 

Just my $0.02

 

The reason that the images cut off is that they are only 1005px in width, how would you suggest i get around this, should i align the site to the left maybe?

 

I agree with the "our friends" bit not being that great, i was originally going to have just one column which i think i will go back to now.

 

Yeah i have just started out, just been looking at sites and started putting this one together maybe tuesday of this week.

 

I understand what you mean about all the divs in the code, what would be the best way of reducing all of them, if possible?

Just repeat your background images along the x axis, theirs nothing stopping them being repeatable.

 

I prefer the 'our friends' bit now, albeit a little too much space on one side, however when adding links, they're realistically going to be longer than the lorum ipsum text that's their atm, or you could always have two left aligned columns.

 

Yeah, divs can be kept minimal.

 

Take for example

 

			   <div id="nav"> 
				<div class="nav"><a href="#">Home</a> </div> 
				<div class="nav"><a href="#">News</a> </div> 
				<div class="nav"><a href="#">Reviews</a> </div> 
				<div class="nav"><a href="#">Blogs</a> </div> 
				<div class="nav"><a href="#">Artists</a> </div> 
				<div class="nav"><a href="#">Gig Guide</a> </div> 
				<div class="nav"><a href="#">Media</a> </div> 
				<div class="nav"><a href="#">Playlist</a> </div> 
				<div class="nav"><a href="#">Contact</a> </div> 
			 </div>

 

Really, what that is is a list of links, like so

 

<ul id="nav">
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ul>

 

Then replace the .nav{} in your css with ul#nav li{} and that's it, easy peasy. Depending on your css, you may need to fiddle a few properties, but nothing too difficult.

 

You don't even need to wrap a div around that, because divs and lists are both block level elements.

  • Author
Just repeat your background images along the x axis, theirs nothing stopping them being repeatable.

 

Could you let me know if its fixed now...ive done what you said but my laptop isnt letting me change screen resolution for some reason.

Could you let me know if its fixed now...ive done what you said but my laptop isnt letting me change screen resolution for some reason.

 

Yeah, if using google chrome hold control and roll the wheel on the mouse backwards :-)

Also works on Firefox!

 

The site looks great if you just started out so good job. Very clean and simple.

  • Author
Also works on Firefox!

 

The site looks great if you just started out so good job. Very clean and simple.

 

Is Firefox usually a problem in getting sites to work correctly on?

 

 

 

Is there anything anyone could reccomend in either adding to or changing on the site so far?

Firefox is my main testing browser then i branch off to other browsers to see if they appear right in them.

 

Most people say that firefox is one of the most compliant browsers out, which i agree, but usualy down to personal preferance.

  • Author
Firefox is my main testing browser then i branch off to other browsers to see if they appear right in them.

 

Most people say that firefox is one of the most compliant browsers out, which i agree, but usualy down to personal preferance.

 

I only know of 2 browsers (firefox and Internet Explorer), what other browsers do you test your sites on? Are different browser testing essential in webdesign?

Different browser testing is essential as not every browser uses the same engine in the background to render pages.

 

As you have mention there is Internet explorer, which can range from version 6 to 7 to 8.

When devloping a site, internet explorer will be the one that cause's you problems most of the time.

 

There is also Firefox, which has loads of useful add-ons, one you might be interested in is firebug, it's a debugging tool for web developers it has helped me out quiet a bit.

 

there is also Safari which is default for MAC OS, and can be downloaded for windows as well, this is apples web browser, Which is a pretty good web browser this and firefox are my favorites at the current time.

 

Then there is google Chrome, which is google's own web browser, also pretty good browser, gotten a lot faster over the new versions being released.

 

Then there is opera, not used this one that much, but the new version being released is meant to be very good so keep an eye out on that.

 

There are plenty of others but these are the main ones out there.

 

I test on all of these except opera.

 

Guess i should download opera and start using it.

 

And your site has a nice feel to it. I like it!

 

Ben

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.