OneBite.Dev - Coding blog in a bite size

learn css and html

Code snippet for how to learn css and html with sample and detail explanation

Learn CSS and HTML

CSS and HTML are the foundational languages of web design and coding. They are essential tools for creating functional and aesthetically pleasing websites.

Code snippet ‘Creating a Basic HTML Document Structure’

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Code Explanation for ‘Creating a Basic HTML Document Structure’

This simple code snippet is the basis for any HTML document. Let’s discuss what each part does:

  • <!DOCTYPE html>: This line is the document type declaration and it’s used to tell the browser that this is an HTML5 document.

  • <html>: This is the root element of an HTML page.

  • <head>: The head element contains information about the document that isn’t displayed on the web page itself. This can include links to CSS files, character set declarations, and the page title as shown above.

  • <title>: The title element specifies the title of the document, which is displayed in the browser’s title bar or tab.

  • <body>: The body element contains the content that is visible to web users when they visit your page. This includes text, images, links, and other forms of media.

  • <h1>: The h1 element is a heading tag. Text enclosed in this tag is displayed as a large heading. The number in the tag can range from 1 to 6, with 1 being the largest.

  • <p>: This is a paragraph tag. Text enclosed in this tag is displayed as a standard paragraph.

By understanding these basic HTML elements, you can start to build the structure of your own web page. CSS then works in conjunction to style this HTML content, addressing elements such as color, font, layouts and much more, which you will learn in the advanced lessons.

css