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.

Where to start

Featured Replies

Hi

I'm new and in need of a little help please


I used to make websites a lot a few years ago but haven't done one in some time. However a friend has asked me to have a go at building a website for them and I've said I'd give it a go However what has sort of knocked me a little bit is where to start. I used to use HTML and CSS to build my websites however when i was speaking to someone the other day and i mentioned that they laughed and said no one does websites like that any more. Like i said i've been out of the web designing loop for a few years so don't know whether he was right or pretends to know more than he does.


I've drafted up a basic design template of what i'd, visually, like the site to resemble and divided it into different areas. Basically section one would be a title which i'd like to remain on all pages while section two would be where the content is to go. I toyed with the idea of making it in flash, but some of the content would require that middle section to be able to scroll without affecting the overall layout of the page.


Basically they showed me the website for Catching Fire the movie (the address to which i can't actually post up here yet) and said they'd like something similar just without the giant flaming bird (which is nice because that would be way beyond me lol) But the main idea is where the menu is at the base of the page, and then they'd want the content where the bird is, but with an added header to the page.


Basically what would you guys recommend as the best way to approach this? In the past i'd have probably used frames to create the site, but as i said, my confidence in my abilities has been shaken a little lol and i wondered if there was a better way to approach it? I'd really appreciate any help and apologies if this is a really dumb question lol

Thanks in advance
  • Author

I do have an image to go with this post so it makes a little more sense, but i can't seem to post images or links till i hit 25 posts :/

'ello. I guess everyone's a critic and your acquaintance stating that no one makes websites in HTML or CSS is quite amusing. Sure, things have changed since the 'good old days' of frames and tables, but the fundamentals are the same. If you're like me and have taken a hiatus for some time, you should be able to pick up the newer conventions in the HTML5 and CSS3 specifications.

 

The best bet is always to get stuck in. If you need to get the site done relatively soon, best stick with what you know and implement the new conventions over time. If it's a paying client, it's not always a good thing to try completely new things on their budget ;) I couldn't comment on Flash as I never use it. My stance though is to use HTML5 as your foundation and trying and adhere to making your site responsive across as many devices as you can feasibly do.

 

There are a lot of tutorials out there from webdesign.tutsplus.com to references such as http://www.htmldog.com/. Of course, your fellow members on the forum are a great resource. If you're not familiar enough with responsive web design, you can look at http://alistapart.com/article/responsive-web-design. It's an old article but still very valid.

 

These are only a few examples of whats out there, but might be a good start depending on how you work :)

  • Author

Thank you for your help :) As i said the site is just for a friend for one of their hobbies so there isn't really a time restriction and certainly no money involved lol :) Is HTML5 similar to the HTML of old or is it drastically different?

Personally, I find it easier (especially typing from scratch with the doctype!). It's a lot more semantic, therefore a lot cleaner too. It's still evolving so in many ways it gets better and better. As for older browsers, you can get polyfils to run HTML5 :)

 

With all that in mind, I'd start with HTML5 if I were you, followed by CSS3. From then, you can decide on what you want to do about the Flash element. A bit over my head, so best off someone else stepping in to give you their thoughts on that.

  • Author

Awesome :) Got any recommendations on tutorials that cover HTML5 or can they be found in your links above??

Awesome :) Got any recommendations on tutorials that cover HTML5 or can they be found in your links above??

 

I would do the htmldog site. When I first started looking at HTML5 I looked at a lot of stuff by Bucky Roberts http://thenewboston.org/. If you can put up with the amount of times he says "anyways...", then his site is very useful. He also covers loads of other stuff aside from HTML. I haven't looked at the site for months, other than to confirm the link so not sure if he still updates everything.

 

I also used w3schools as a reference point but there are negative comments about them and that they're inaccurate (just do a search). Personally, I never had any problems with their resources so occasionally still look there if I need to brush up. Unless someones says otherwise, I consider theirs a good site.

stay clear from flash, it has no future. Pretty much anything people used to do in flash can be done with html5 css3 and javascript nowadays. So in the long run you're way better off learning those properly. if you need to make animations with html css and js. but have no idea or know-how. you could look into adobe edge. the scrolling middle section is easily fixed without frames too. you can just make a div with a fixed height and make give it a scrollbar. you can do this by defining its overflow setting in css. Overflow tells the browser what to do with an element when the content would overflow the boundaries of the element. normally a div would expand with the content, but.

#yourmiddlesectionsdiv {
height:300px;
overflow:scroll;
}
this tells the browser that the div with the id "yourmiddlesectionsdiv" has an height of 300px, and if the content would be too much for that (so it would overflow, think of a bucket that has too much water in it, the bucket being the div. and the water being the content) it will get a scrollbar.

 

post any problems you run into there are plenty of helpfull people here ^^

goodluck!

 

 

However what has sort of knocked me a little bit is where to start. I used to use HTML and CSS to build my websites however when i was speaking to someone the other day and i mentioned that they laughed and said no one does websites like that any more. Like i said i've been out of the web designing loop for a few years so don't know whether he was right or pretends to know more than he does.

 

If we don't use HTML and CSS anymore what do we use? I think he pretends to know a lot more than he actually does. Unless he means HTML5 CSS3 which is still HTML and CSS anyway...

 

The only other thing he could mean is Wordpress or someother CMS but even still the code you still use is HTML and CSS.

 

Hope this helps.

  • Author

Thanks for the help guys :) I've made a start on something but am having major issues with a sticky footer. Found a dozen websites that all give different ways of doing it and i'm making a bit of a mess actually integrating it into my current layout. Any tips anyone?

Post your code and a link (hopefully you have it live on a testing server); I'm building mine from scratch so I'm just uploading it to the actual site and test as I go.

 

Sounds like a css problem, so post in css forum and helpful members will usually help out. I've had some great help on here, unfortunately I'm pretty useless at this stuff. :santa_shocked:

  • Author

No worries, i managed to sort it lol :D *feeling very proud atm* I have no doubt another issue will crop up soon though lol :D

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.