Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 6 Comments

Sup folks, it’s Mike here again, your design guru and this is the third part of our Basic Web Design Video Course.

This time we are going to completely markup the HTML using the tags that we have learned in the previous videos. After that we are going to style it using CSS.

Also, we are going to cover CSS reset, Clearfix Hack and new CSS3 properties to solve the most common issues encountered when you are starting to learn web design.

Buckle up and let’s get started!


Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles

PSD Template Download - HTML/CSS File DownloadDemo


Final Product

1wd-basic-web-design-video-course

Complete HTML Markup

Applying CSS Styles Part 1

Applying CSS Styles Part 2

Finally, we’ve completed the markup and styled our very first layout. Always remember to reset your CSS before styling the whole layout and apply CSS3 box-sizing to all the elements. Also, if you encounter some issues with things like the wrapper and posts just apply the Clearfix Hack.

So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestions regarding the videos and for the next part to be covered feel free to mention it below. Thank you!

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

6 Comments Best Comments First
  • July

    Friday, March 22nd, 2013 14:22

    1

    great collection of help!! I find also information and I am really a newbee. Go on like that and you have many readers like me.

    +4
  • Sandra Dejesus

    Thursday, March 28th, 2013 09:36

    3

    Very interesting. Even the simplest topics about web designs intrigue me a lot which led me to believe that this is what I want to do for the next couple of years. I got to learn a lot first because it is very complex.

    +2
  • Umainnovation`

    Monday, March 25th, 2013 05:53

    2

    Nice Collection.As a web designer I am always looking for new tips, techniques, and styles to expand my range and stay up to date with the trends. The list you have provided will certainly prove useful.

    +1
  • Mike

    Monday, April 1st, 2013 10:49

    4

    Thanks for this Mike,

    Some really useful tips here that I know will help me a lot. I am just starting to catch up with HTML5 & CSS3, so I really appreciate this tutorial.

    0
  • Allan

    Monday, May 13th, 2013 07:49

    5

    Thanks Mike! Very helpful for beginners like me. More please!

    0
  • Peter

    Monday, June 3rd, 2013 18:13

    6

    Hey Mike! Nice article you got here. Thanks for providing these tips and information. The collection of video tutorials is very useful!

    -1
  • Peter

    Monday, June 3rd, 2013 18:13

    6

    Hey Mike! Nice article you got here. Thanks for providing these tips and information. The collection of video tutorials is very useful!

    -1
  • Allan

    Monday, May 13th, 2013 07:49

    5

    Thanks Mike! Very helpful for beginners like me. More please!

    0
  • Mike

    Monday, April 1st, 2013 10:49

    4

    Thanks for this Mike,

    Some really useful tips here that I know will help me a lot. I am just starting to catch up with HTML5 & CSS3, so I really appreciate this tutorial.

    0
  • Sandra Dejesus

    Thursday, March 28th, 2013 09:36

    3

    Very interesting. Even the simplest topics about web designs intrigue me a lot which led me to believe that this is what I want to do for the next couple of years. I got to learn a lot first because it is very complex.

    +2
  • Umainnovation`

    Monday, March 25th, 2013 05:53

    2

    Nice Collection.As a web designer I am always looking for new tips, techniques, and styles to expand my range and stay up to date with the trends. The list you have provided will certainly prove useful.

    +1
  • July

    Friday, March 22nd, 2013 14:22

    1

    great collection of help!! I find also information and I am really a newbee. Go on like that and you have many readers like me.

    +4

Comments are closed.

54.196.162.238 - unknown - unknown - US