Getting into HTML5 and CSS3?

DezUk · 3 Apr 2013 at 20:51

Following on from my thread here I want to start and learn the basics of HTML5 and CSS3.

I have been designing websites on and off for years and know the basics of putting a page together using HTML and CSS using divs and style sheets etc. Problem is its been a good few years since I properly sat down and coded a site from scratch and I feel very much behind the times.

Ideally want to build up a small portfolio of sites that I can use as a basis to start and apply for web design/development jobs. So my question is where to begin learning HTML5/CSS3 and ideally some jQuery though I would assume most of that is done via plugins?

I used to be on a few dedicated design/coding forums but have lost touch and just looking for some pointers in the right direction.

Cheers

Hyburnate · 3 Apr 2013 at 20:59

I had the book from Remy Sharp and Bruce Lawson on HTML5, that's not bad.

I can't really recommend many sites, but if I were you, get an idea in your head and do that, don't try to cram as many new features into a site as possible because from experience it doesn't work.

DezUk · 3 Apr 2013 at 21:11

Well I do have this very old and basic design that I would like to elaborate on with a little video added

http://cruitme.com/projects/cv/

and another version I never finished

http://cruitme.com/projects/v2/

Hyburnate · 3 Apr 2013 at 21:30

I definitely suggest you have a google around at the different features of CSS3 and HTML5 and look how you may wish to implement them, like I said, don't try to put everything in our it'll look awful and wont function well and if you encounter a bug you will struggle to find what caused it

BahBah · 3 Apr 2013 at 21:48

http://www.html5rocks.com/en/ is good

SpaghettiOs · 4 Apr 2013 at 12:07

As far as I see it, for a normal website developer, the largest developments in HTML5 are in semantic coding. The real stuff of interest for design is in CSS3, and learning a bit about that will stand you in better stead than investing too much time in jQuery, where I think the future is limited.

fez · 4 Apr 2013 at 13:26

Html5 / css3 won't revolutionise what you can do in web development honestly. The advances in javascript engines and the capabilities of browsers in that area have been the biggest shift.

CSS3 is really all about making common tasks easier and removing some of the burden on javascript. Things like border-radius to give rounded corners save loads of time and allow the entire site to have rounded corners in seconds instead of days. Transitions and keyframe animations make simple animations that would usually have been farmed out to jquery a cinch.

There has been a bit of a paradigm change lately which places more emphasis on giving the best experience to those on modern browsers whilst maintaining usability for older ones. A panel fading in nicely is not vital to a site when it can simple be shown without the fade on older browsers.

DezUk · 4 Apr 2013 at 15:29

Thanks for the thoughts. I just wnat to have a good go at updating my online CV/portfolio so:

1. I can remind myself how to code a website from scratch and not rely on Wordpress
2. Maybe learn some new techniques and skills
3. Get inspired about web design again

Number_25 · 4 Apr 2013 at 17:11

Hey Dez,

If you're looking for a few ways to get back into front-end web development I have a few helpful tips for you.

Enjoy yourself. If you're not enjoying it then you'll end up not doing it.
Don't be afraid to ask questions. I've been in situations where I need help - but refuse to ask for it. It makes the experience a lot less enjoyable and will hinder your development.
Don't be afraid to 'borrow' markup. Just reading markup alone will make you a better web developer, there's nobody in the business that doesn't do it - don't worry. (as long as it's not for a commercial website and/or blatantly obvious.)
Find a IDE that suits your needs. Notepad/gedit on it's own is pretty great, but if you're looking for something different then look around. There's a great text editor out there called Sublime Text - but vim/emacs are a lot more customisable and fun to use.
Always do your research. It's a fast moving business. Things are changing constantly, especially with HTML5 and CSS3. You don't want to be left behind.
Stick to standards. Use the W3C validator to check that your markup is up-to-scratch. If it validates, then it's going to work on 99.999% of browsers.

ilcp · 4 Apr 2013 at 17:58

i actually dont like HTML 5.. for years they have been making us be "strict" and now they are going back to "anything is accepted" mantra..

ilcp · 4 Apr 2013 at 17:59

Number_25 said:
Hey Dez,

If you're looking for a few ways to get back into front-end web development I have a few helpful tips for you.

Enjoy yourself. If you're not enjoying it then you'll end up not doing it.

Don't be afraid to ask questions. I've been in situations where I need help - but refuse to ask for it. It makes the experience a lot less enjoyable and will hinder your development.

Don't be afraid to 'borrow' markup. Just reading markup alone will make you a better web developer, there's nobody in the business that doesn't do it - don't worry. (as long as it's not for a commercial website and/or blatantly obvious.)

Find a IDE that suits your needs. Notepad/gedit on it's own is pretty great, but if you're looking for something different then look around. There's a great text editor out there called Sublime Text - but vim/emacs are a lot more customisable and fun to use.

Always do your research. It's a fast moving business. Things are changing constantly, especially with HTML5 and CSS3. You don't want to be left behind.

Stick to standards. Use the W3C validator to check that your markup is up-to-scratch. If it validates, then it's going to work on 99.999% of browsers.

i also want to add dont test in IE first... IE is horrible

and dont EXPECT your site to look 100% same in ALL browser and this is OK