9 Tips to Start Learning HTML/CSS

If you're just starting out with your very first web page, congrats! This is your first step. I hope this list will be helpful for you. If you are an experienced developer, feel free to add your own tricks in the comments. I always love learning from you all.

HTML

1. Style HTML using style sheets wherever possible.
   No more tags or inline style code anymore! You'll have more control over your pages' look and feel by editing one style sheet file.

2. Use an HTML validator
   These will pick up potential problems. HTML validators are a good way to learn about the correct way to use HTML tags. W3C Markup Validation Service and WDG HTML Validator are free.

3. Don't forget to document your code
   This shouldn't have to be said but everyone needs some reminding from time to time.

4. Set widths and heights for images
   Images can often be distorted when the size is not specified. Web browsers can format the page more quickly since you have specified how to display the images before download.

Helpful Links

• html.com
• w3schools html
• learn-html
• W3cubDocs

CSS

1. Use reset.css
   This resets all fundamental styles. That way you will start with a real blank new style sheet. Eric Meyer's CSS Reset is commonly used.

2. Use shorthand CSS
   It not only gives you a shorter way to write your CSS but it makes your files cleaner, clearer, and easier to understand.

3. Understand class vs id
class is represented by a dot "." and id is presented by a hash "#". id's are unique to that single element but class can be re-used.

4. Use the developer tools for your browser
   Right click -> Inspect
   This will give you a preview while giving you the ability to change the CSS and see live changes.

5. Learn about how elements are positioned
   What does `position: absolute' do? How does flexbox or grid work? By knowing the fundamentals of how things work, you'll be able to modify them to your own needs. Learn the rules to break the rules.

Helpful Links

• Secret weapon to learning css
• A complete guide to flexbox
• Build Bootstrap
• CSS Layout
• Type Scale