HTML & CSS Helpful Tips and Tricks

It really doesn’t matter if you are new to using HTML and CSS or are a master, it is always nice to hear about some tips and tricks. And while you may already be familiar with them, a refresher is always helpful. So here are some unique and useful hacks that I hope can help developers of all levels. 

HTML Tips or Tricks

• Lazy Loading Attribute: Adding lazy loading attributes on media elements helps identify resources that are not critical and can be loaded when needed. This will enhance page performance by having the media elements load only when the user scrolls to them

• Accept Attribute: Allows us to specify which types of files the user can upload. 

• Spellcheck Attribute: Used to check for spelling errors in the code, which can be very useful and help prevent errors from typos. 
• Meta Description: Adding meta descriptions into the head of the HTML document will have an indirect impact on search engine optimization. Meta description represents the text that appears beneath the site name on search engine result pages.
• The <figure> tag: This can be confusing, but it’s different from the image tag. The image tag is embedded in the HTML document, while the figure tag is used to semantically organize the content of an image in the document. This can also be used to mark up a photo and can contain a <figcaption>.

CSS Tips and Tricks

• :nth-child () & :nth-last-child (): Using these selectors help specify a single element in a group of elements that do not have specific classes. 

• Percentages or Viewport Units (Viewport Height / Viewport Width): When defining spaces or element size, it is best practice to use percentages instead of absolute numbers. This helps with the site responsiveness on different size screens. 
• ::before and  ::after pseudo elements: Allows you to insert content onto a page without it needing to be in the HTML. This content is still part of the element; it has been added to and will receive all the same formatting items.

• Position Absolute: This is great for positioning the elements on your page. It has multiple options like static, sticky, and fixed to name a few. This gives more control over the elements and takes them out of the document’s normal flow.
• Testing Browser Compatibility: Most older versions of Internet Explorer do not support many CSS functionalities. Therefore it is necessary to test the compatibility on real browsers. 

Some of these tips may seem very simple but can actually have a huge impact. As web developers, we will never know all the tricks for building websites, but having a couple is better than none. I hope these are helpful to anyone who may not have known them before and a nice reminder to people who have not used these items recently.