Want to learn HTML and CSS for website Design

Hello friends, I am interested to website Design so please tell me where I can start..? I travelled over this forum but I want to start from basic and I know you will suggest me good and easy way..

 

Hello AzharSEO You need to start learning from w3school its very easiest way for web designing its very useful for beginners.

 

Agreed, w3school is the best place for beginners. Also check out codecademy - great HTML +CSS course for free. These are basics. Once you've got comfortable with HTML and CSS, skip straight to learning Javascript and jQuery.

 

1. Start-from-the-bottom approach
You should start from the very beginning if you're searching for robust understanding of what you're going to do.

• Learn some HTML

• • You're about start learning html, but how ?
    • (Banal Answer) Internet !
    • So let's select some sources to learn it :
      • Codecademy : https://www.codecademy.com/learn/web
        
      • W3Schools : http://www.w3schools.com/html/
      • Teamtrehouse : https://teamtreehouse.com/ (30 days trial)
      • Some random source :
      • And everything else you can find over the internet like tha last link, just go for it

• • Considerations to take :
    • HTML5 : Don't forget there are different html versions, starting learning the newest has a big importance.
      
    • W3C Validation : http://validator.w3.org/
      • What it does ? - checks the markup validity of Web documents in HTML, XHTML
        • Markup Validity ? - http://validator.w3.org/docs/help.html#validation_basics
• Learn some CSS

• • Now it's time to go for CSS
    • Which learning source is pretty similiar, if not equal to the html
      • Codecademy : https://www.codecademy.com/learn/web
        
      • W3Schools : http://www.w3schools.com/css/
      • Teamtrehouse : https://teamtreehouse.com/ (30 days trial)
      • Some random source :
      • Looks like the majority of tutorial/courses sources offers both of them, you know what to do.

• • Considerations to take :
    • CSS3 : Css has its versions as well, better start from the most recent, right ?
      
    • W3C Validation : http://jigsaw.w3.org/css-validator/

2. Pick everything you need !

• Time to discover new awesome tools that will allow you to reach your goals in web dev more easily and faster.

• • Bootstrap - http://getbootstrap.com/getting-started/
    • Bootstrap is a great framework for newbies, you can simply and quickly write a page with a nice design.
      With bootstrap you won't need to style each element and more than that it's responsive,
    • My advice would be downloading some basic bootstrap template from the web and make it unique and fancy .
      
    • Responsive : Your page would be available for mobile users. Otherwise, to make it responsive you'd to write media queries with css.

• • Colors - colorcombos.com
    • Colors are relevant. Pick some colors (not too many), to make a color scheme for your page. Test them and check how they look together.

• • Fonts - https://www.google.com/fonts
    • Choosing the right fonts for your page,would make a significant difference on its looking.

• • A Good Text Editor
    • Sublime Text - http://www.sublimetext.com/
    • Atom.io - https://atom.io/
    • Brackets - http://brackets.io/

• • Glyphicons -
    • http://getbootstrap.com/components/#glyphicons
    • https://fortawesome.github.io/Font-Awesome/
    • http://glyphsearch.com/?query=reddit
      • You may want to use symbology in your website, it's not that relevant, but, you need to know that they exist.

• • Explore the universe
    • Now you got few tools, and once you finished your main goal. You can go even further and make it even better.
    • Don't forget the tools you pick depend on your project, so don't overcharge your page with too many things :
      • Too many fonts
      • Too many colors
      • Too many libraries/frameworks (you will achieve them later)
      • Too many everything
    • Make it simple !

• • What can you explore ?
    • Take this list :
      • jQuery (javascript library) - https://code.jquery.com/
        
      • Ajax Get/Post Requests (in jQuery as well) - https://api.jquery.com/jquery.get/
      • jQuery plugins :
        • Once you get jQuery, you can start using jQuery plugins, they are a simple way to implement nice stuff to your website as sliders, file uploaders between thousands of fancy stuff that could improve your web page.

• • What can you do more ?
    • Analyze your pages :
      • https://www.site-analyzer.com/
      • https://gtmetrix.com/
      • http://www.webpagetest.org/
    • Research for SEO implentations.
    • Discover how to 'PSD to HTML' if you mind to design a page using photoshop (you can do it with brackets) - http://freebiesbug.com/psd-freebies/website-template/

3. Get inspired

• Surf over the internet in research for nice/creative/beautiful desings you can get inspired by.
• Select the elements/parts you most appreciated and wanting to make the same on your website.
• Draw a sketch of 'How do I want my page look like?'
• Structure it with html and style it with css.

4. Few considerations

• Html does not actually say what anything should look like!
  • You have CSS for that purpose.
• Html will describe your page.
  • Example: <h1>,<h2><h3>, etc. tags are used to describe the importance of the text and never to style it.

Sorry for the long post, all I mean is to help you most as I can.
Feel free to ask anything, I'll be here to answer.

 

Thanks for the feedback, it has a bad formatting but I hope you appreciated.
Can I ask you for a brief opinion about: http://vladimirlisovets.pancakeapps.com?
All the best

 

It isn't hard to appreciate your post. Those aren't new and incomplete, but I appreciated that you took time to write it down and make it as short as possible.

Still empty, but looks like a nice idea, though.

 

Totally agreed, this post quite trivial over the internet. Even considering I found many questions like this one recently.

Thanks for your opinion, that's important for me.

 

Buying a book on html and CSS might fasten your learning process, becuase you will know how much you have covered and how much more to go. Through internet its never ending as there are so many website and so many suggestions and tricks.

I started learning CSS from websites but after buying a book on CSS I felt my understanding got broader perspective and learning quickened.

It depends but book is one more method to learn.

 

Visit quick tutorials on our forum to gain some knowledge:
http://www.webcosmoforums.com/content/section/113-tutorials.html