Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]

Posted in Tips, Tools, Tutorials, Web Design • Posted on 16 Comments

Howdy, guys, it’s Mike here again and this is the second part of our “Basic Web Design Video Course”. This time we will talk about the tools needed before starting out with HTML and CSS,  then we will learn the most commonly used HTML tags.

For this tutorial, we will only cover the tags that are very useful to beginners, we will cover more tags at a later time. Then, we will style the tags using basic CSS properties. No worries guys, in the next videos we will go more in-depth and learn together.

Have you seen the first part?

If you missed out the first chapter make sure to watch it!


Download: PSD Template

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

Final Product

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

Preparation

Text Editor

Windows

Mac

HTML Basic Tags and Structure

We will talk about the most commonly used tags that you’ll see on a website. We will cover headings, paragraphs, links, images, list items and divisions. Also we will familiarize ourselves with the basic structure of HTML markup and how to open and close a tag.

Basic CSS Properties

In this video we will learn to style a certain element or tag using CSS properties by changing width, height, colors, floats, etc. Using these basic properties we can turn our HTML markup into a well presented website.

Now that we have finished positioning our layout structure we can now proceed to the next part, which is marking up the HTML of our very basic design template and completely style it using CSS.

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, or how I presented them, please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.

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.

16 Comments Best Comments First
  • Tim Carpenter

    Monday, March 11th, 2013 02:24

    11

    Thanks for sharing, these are some great tutorials I will be sharing with my beginner friends!

    Thanks,

    Tim

    +2
  • Stephan Lück

    Sunday, March 10th, 2013 15:26

    10

    here is a really good editor http://www.sublimetext.com/2 too, because i missing it in your list.
    But thanks for your tutorial

    +1
  • Mike

    Thursday, March 7th, 2013 08:21

    6

    Hi Michael,
    Thanks once again for taking the time and effort to present these videos. Although they are basics, I have (still) to catch up and learn HTML5, so it was good to see the new tags. Also thanks for introducing me to Intype. I have been using Dreamweaver/Notepad++ but I think I will give Intype a go, it seems really useful and more designer/developer friendly than Notepad++

    Look forward to next part.
    Will you be doing more advanced tutorials in HTML5?

    Cheers,
    Mike

    0
    • Michael John Burns

      Friday, March 8th, 2013 09:56

      8

      Hello Mike,

      Cool Name same as mine. Glad this to hear that this video makes you catch up with the basics of HTML 5.
      Yeah! Intype for me is so good. I’ve been using this for about 2 years and I have no problem with it.

      I still don’t know yet Mike, hopefully soon.

      Thanks,
      Michael

      0
  • Faisal

    Thursday, March 7th, 2013 01:31

    5

    Such a nice tutorial, thanks for sharing it. HTML5 is way better than other programming languages.

    0
  • Fahim

    Wednesday, March 6th, 2013 10:21

    2

    Thanks for the tutorial…It’s really helped me so much.

    0
  • lawrence77

    Wednesday, March 6th, 2013 11:34

    3

    Why the first part don’t have 720p?? :( I can’t see that clearly..

    Eager to see this part ;) Thanks for this

    0
    • Michael John Burns

      Wednesday, March 6th, 2013 23:35

      4

      Hello Lawrence,

      I apologize for the first part I’ve mistakenly recorded it you can still view it on 420p.

      0
  • David

    Wednesday, March 6th, 2013 09:58

    1

    Thank you Michael, I needed this tool before to use HTML. I come back soon to tell you if it works.

    Best regards

    0
  • John

    Thursday, March 21st, 2013 17:14

    15

    Thank you so much for this post and these videos, this has actually been incredibly helpful.

    And Stephan Luck, thanks very much for the link.

    0
  • cynthia mcardle

    Friday, March 22nd, 2013 09:42

    16

    Great blog! This is indeed so informative and useful as well especially in web designing. Thanks for sharing this awesome article!

    0
  • ashish

    Tuesday, March 19th, 2013 02:43

    14

    great video for beginners and first time i m learn about these html tag i m getting something new thing from this tutorial.

    0
  • Charissa Vaughn

    Friday, March 15th, 2013 11:50

    13

    Simply desire to say your article is as surprising. The clearness for your put up is
    simply excellent and i could suppose you’re a professional in this subject. Well along with your permission allow me to seize your RSS feed to keep updated with drawing close post. Thank you one million and please keep up the rewarding work.

    0
  • djavan

    Tuesday, March 12th, 2013 20:20

    12

    Never thought I could find a site webdesign talking about CSS, I will always be here! \ o /
    that other issues already discussed here?

    0
  • Evaclay

    Friday, March 8th, 2013 05:03

    7

    It is really an awesome tutorial. It is great for the new learners. Thanks for sharing this awesome blog.

    -1
    • Michael John Burns

      Friday, March 8th, 2013 09:57

      9

      You’re welcome Evaclay :) Watch out to the 3rd Part.

      +1
  • cynthia mcardle

    Friday, March 22nd, 2013 09:42

    16

    Great blog! This is indeed so informative and useful as well especially in web designing. Thanks for sharing this awesome article!

    0
  • John

    Thursday, March 21st, 2013 17:14

    15

    Thank you so much for this post and these videos, this has actually been incredibly helpful.

    And Stephan Luck, thanks very much for the link.

    0
  • ashish

    Tuesday, March 19th, 2013 02:43

    14

    great video for beginners and first time i m learn about these html tag i m getting something new thing from this tutorial.

    0
  • Charissa Vaughn

    Friday, March 15th, 2013 11:50

    13

    Simply desire to say your article is as surprising. The clearness for your put up is
    simply excellent and i could suppose you’re a professional in this subject. Well along with your permission allow me to seize your RSS feed to keep updated with drawing close post. Thank you one million and please keep up the rewarding work.

    0
  • djavan

    Tuesday, March 12th, 2013 20:20

    12

    Never thought I could find a site webdesign talking about CSS, I will always be here! \ o /
    that other issues already discussed here?

    0
  • Tim Carpenter

    Monday, March 11th, 2013 02:24

    11

    Thanks for sharing, these are some great tutorials I will be sharing with my beginner friends!

    Thanks,

    Tim

    +2
  • Stephan Lück

    Sunday, March 10th, 2013 15:26

    10

    here is a really good editor http://www.sublimetext.com/2 too, because i missing it in your list.
    But thanks for your tutorial

    +1
  • Evaclay

    Friday, March 8th, 2013 05:03

    7

    It is really an awesome tutorial. It is great for the new learners. Thanks for sharing this awesome blog.

    -1
    • Michael John Burns

      Friday, March 8th, 2013 09:57

      9

      You’re welcome Evaclay :) Watch out to the 3rd Part.

      +1
  • Mike

    Thursday, March 7th, 2013 08:21

    6

    Hi Michael,
    Thanks once again for taking the time and effort to present these videos. Although they are basics, I have (still) to catch up and learn HTML5, so it was good to see the new tags. Also thanks for introducing me to Intype. I have been using Dreamweaver/Notepad++ but I think I will give Intype a go, it seems really useful and more designer/developer friendly than Notepad++

    Look forward to next part.
    Will you be doing more advanced tutorials in HTML5?

    Cheers,
    Mike

    0
    • Michael John Burns

      Friday, March 8th, 2013 09:56

      8

      Hello Mike,

      Cool Name same as mine. Glad this to hear that this video makes you catch up with the basics of HTML 5.
      Yeah! Intype for me is so good. I’ve been using this for about 2 years and I have no problem with it.

      I still don’t know yet Mike, hopefully soon.

      Thanks,
      Michael

      0
  • Faisal

    Thursday, March 7th, 2013 01:31

    5

    Such a nice tutorial, thanks for sharing it. HTML5 is way better than other programming languages.

    0
  • lawrence77

    Wednesday, March 6th, 2013 11:34

    3

    Why the first part don’t have 720p?? :( I can’t see that clearly..

    Eager to see this part ;) Thanks for this

    0
    • Michael John Burns

      Wednesday, March 6th, 2013 23:35

      4

      Hello Lawrence,

      I apologize for the first part I’ve mistakenly recorded it you can still view it on 420p.

      0
  • Fahim

    Wednesday, March 6th, 2013 10:21

    2

    Thanks for the tutorial…It’s really helped me so much.

    0
  • David

    Wednesday, March 6th, 2013 09:58

    1

    Thank you Michael, I needed this tool before to use HTML. I come back soon to tell you if it works.

    Best regards

    0

Comments are closed.

54.87.47.251 - unknown - unknown - US