9 Tips to Start Learning HTML/CSS

Tina Huynh - Mar 19 '22 - - Dev Community

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

HTML breakdown

  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

CSS

CSS breakdown

  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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .