Introduction to HTML đź“–

HTML, or Hyper Text Markup Language, is the fundamental building block of the World Wide Web. In the early days of the internet, HTML files served as the backbone of web content, stored on centralized servers and accessed by browsers to display information.

Despite its importance, HTML is not a programming language; instead, it is a markup language structured using tags. When creating a basic HTML file, it is conventionally saved with the .html file extension.

In essence, an HTML file contains textual content, such as paragraphs or titles, organized with markup that instructs the browser on how to present the content to the user.

Simple example

<p>A paragraph of text</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

This HTML snippet says that A paragraph of text is a paragraph. And then we have a list of 3 items.

p stands for paragraphul stands for unordered list, and li stands for list item.

For each of them, we have an opening tag (like <p>), the content, and a closing tag (like </p>).

So <opening tag> â€¦content … </closing tag>.

Definition

Now I want to tell you something about HTML you should know.

HTML is not presentational. It’s not concerned with how things look.

Instead, it’s concerned with what things mean.

You don’t tell “make this paragraph red” in HTML.

That’s a presentational aspect.

Conclusion

HTML is just concerned with content.

It just adds some predefined styles here and there, like for example with the list. But that’s it. There’s no customization you can do on how it looks, in HTML.

This will be the job of CSS, but that’s a story for another lesson.

CSS Selectors: Class and ID basic filtering for HTML elements

We’ve seen the basics of selectors.CSS selectors offer versatile ways to target specific HTML elements for styling. While we’ve covered basic tag selectors, let’s delve into class and id selectors, showcasing their syntax and usage. Class Selectors To target elements with a specific class, use the class selector syntax: .class {}. Here’s an example: HTML: … Read more

JavaScript Basics: Literals, Identifiers, and Variables

Literals Definition: A literal is a value that is directly written in the source code. It can be a simple value like a number, string, boolean, or more complex constructs like Object Literals or Array Literals. Examples: Key Point: Literals are the fundamental units of JavaScript, representing simple or complex values directly within the code. … Read more

Introduction to DBMS and SQL

In the realm of information management, databases play a pivotal role. Let’s explore what a database is, its utility, and the diverse landscape of databases available. Additionally, we’ll introduce the concept of Database Management Systems (DBMS), with a spotlight on common software like Postgres. What is a Database? A database is a systematic collection of … Read more

Final steps to Deploy on Netlify

It looks like you’ve successfully deployed your site to Netlify, and you’re ready to make and deploy changes. That’s fantastic! The automated deployment process with Netlify indeed streamlines the workflow. Here’s a summary of the steps you’ve taken: Authorize Netlify on GitHub: Select Repository and Deploy: Monitor Deployment: View Live Site: Automatic Redeployment: Additional Tips: … Read more

Getting Started with Netlify Deployment

Introduction to Netlify

Netlify is a powerful deployment platform known for its speed, reliability, and seamless integration with version control systems like GitHub. It supports hosting static files, static site generators, and serverless functions.

Create a Netlify Account

  1. Visit Netlify.
  2. Click on “Sign Up” to create a new account.
  3. You can sign up using your GitHub account or provide the required information to create a new Netlify account.
Import from GIT

Connect GitHub to Netlify

  1. After creating an account, log in to your Netlify dashboard.
  2. Click on the “New site from Git” button.
  3. Choose GitHub as the continuous deployment source.

Deploy a GitHub Repo on Netlify

  1. Select the repository you want to deploy.
  2. Configure your build settings. For a simple HTML site, the default settings should work.
  3. Click on the “Deploy site” button.

Make a Local Change and Deploy

  1. Clone your GitHub repository to your local machine.
  2. Make changes to your HTML files or any other assets.
  3. Commit and push the changes to your GitHub repository.
  4. Netlify will automatically detect the changes and redeploy your site.
Allow Netlify Permissions

View the Deployment

  1. Go back to your Netlify dashboard.
  2. You’ll see a new deployment triggered by your recent push.
  3. Once the deployment is complete, you can visit the provided Netlify URL to view your live site.

Additional Tips

  • Netlify provides features like custom domains, serverless functions, and more. Explore the settings in your Netlify dashboard to customize your deployment.
  • For advanced projects, you can explore static site generators like Hugo or Gatsby and leverage Netlify’s features for a seamless deployment pipeline.

By following these steps, you’ll be able to deploy and update your website with ease using Netlify. Feel free to explore more features offered by Netlify to enhance your web development workflow. Happy coding!