Tip 4: Use CSS Grid or Flexbox for Layouts
Control layouts easily with Grid or Flexbox for responsive designs
Traditional Method: – We use float: left to align the items horizontally. – We use width: 33.33% to distribute the items evenly across the container. – The container uses overflow: hidden to clear the floats.
Flexbox Method: – We use display: flex to activate Flexbox on the container. – justify-content: space-between evenly distributes space between the items. – Each item uses flex: 1 to grow equally within the container.
Tip 6: Minimize Inline Styles
Keep HTML clean seperate style logic with external CSS files
Inline Styles: - The <h1> element is styled directly using the style attribute with inline CSS. – The styles for color, font size, and text alignment are applied directly to the element.
External CSS - The <h1> element is given a class attribute class="header". – The styles are defined in an external CSS file (styles.css) and linked to the HTML document using the <link> tag in the <head> section. – The CSS file contains the styles for the .header class, which are applied to the <h1> element.
Tip 7: Use <meta> tags for SEO
Meta tag should be like below: – <meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 is the most common). – <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to ensure the webpage is responsive on different devices. – <meta name="description" content="A brief description of the webpage.">: Provides a description of the webpage, which is often used by search engines in search results. – <meta name="keywords" content="HTML, CSS, JavaScript, web development">: Lists keywords relevant to the content of the webpage, which can help with search engine optimization (SEO). – <meta name="author" content="Your Name">: Specifies the author of the webpage.
Improve your site's SEO with proper <meta> descriptions and keywords
Tip 8: Include Proper Heading Hierarchy
Use headings from <h1> to <h6> to structure content properly
– <h1>: The main heading for the entire webpage, used once per page to represent the primary topic. – <h2>: Subheadings under <h1>, used for major sections like Navigation, Introduction, Main Content, and Footer. – <h3>: Subheadings under <h2>, used for articles or related information sections within major sections. – <h4>: Subheadings under <h3>, used for subsections within articles. <h5>, and <h6>: Represent further sub-sections within the article.
Link sections of your page using anchor tags for easier navigations
Navigation with Anchor Tags: – Anchor Tags: <a> elements inside the <nav> element are used to link to different sections of the page using the href attribute with #id values. – Navigation Menu: Created using an unordered list (<ul>) with list items (<li>). – Sections: Each section has an id attribute corresponding to the href values of the anchor tags.