Coding a Mock in HTML & CSS (Hand-Coding Tutorial)

http://www.mlwebco.com - In this video I talk about the importance of knowing and learning the basics of html/css. I also demonstrate how I take my mocks in Adobe Fireworks and code them in HTML and CSS.

Category:

Education

Tags:

• html
• web design
• css
• html basics
• web designer basics
• web design html
• html & css
• hand-coding
• how to code html

[wwl777]

I would like to see a video about what design principles to apply to make your design look good/better. Like adding drop shadow, gradients, designing out of the box, consistency, balance, using a grid.. Would be nice.

[mlwebco]

@wwl777 Thanks for the video idea. Adding it to my list. ;)

[Gankerftw]

Since I'm fairly new to webdesign this helped me alot! Thank you so much.

[mlwebco]

@Gankerftw You're welcome!

[wellslowly22]

@bayercs2k exactly. copy pasting each div will take forever

[wellslowly22]

Why not just use css instead of copyin and pasting each div you can just select all in one command.

[hayk7]

thanx dude , more such as tutorials ;)

[bayercs2k]

Instead of going back and forth between design and code and manipulating the style attribute and refreshing to see the changes, for me, I find it infinitely easier to put in a class attribute and a blank css selector up in the head, then use Firebug to manipulate all the CSS Styles at once in the browser. After it's perfect, I can copy the styles into the style section under the css selector i created in the head

[HaloYorkPostman]

Great tutorial now i can understand CSS Thank you very much for sharing it.

[rybekdesign]

Excellent stuff. Very informative :)

[arcastrillo]

This is a great video. It would be nice if you can create a video that uses PhP to send that information to an eMail also the javascript that you mentioned would be helpful as well.

Cheers.

[coolreem]

Great videos! You have helped me so much.

[mlwebco]

@salv2000vids Nice, glad you like it. ;)