Starting with HTML

Introduction

Learning HTML is often the starting point for everyone's web development journey. From the initial steps of understanding tags and elements to exploring more advanced areas such as forms, I've come to appreciate the incredible capabilities of HTML in building web pages. Like any new language, we begin with "Hello World" as a foundational example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Getting Started: Embracing the Basics

When I began my learning HTML I familiarised myself with the fundamental tags, elements, and attributes, realising how they work together to structure and define the content of web pages. As I experimented with various tags like <h1>, <p>, and <img>, using the live server extension I could see the page change as I edited my code which was a rewarding experience.

Building Blocks of Structure: Semantics and Organization

One aspect that stood out to me was the significance of semantic HTML. I realised that using semantic tags like <header>, <nav>, and <footer> not only enhanced the structure of my web pages but also improved accessibility and search engine optimisation. By embracing semantic HTML, I could express the purpose and meaning of different sections within my content, making it more meaningful to the browser and more understandable to me when editing my code.

Conclusion

Learning HTML has provided me with a solid foundation for web development. From understanding the basics of tags and elements to exploring semantic HTML, I've gained invaluable insights. HTML has taught me the importance of clean well structed code.

March 20, 2023 • 5 min read

Styling with CSS

Introduction

CSS (Cascading Style Sheets) allows us to enhance the visual appeal of our web pages. Understanding CSS is essential for creating stylish and engaging user interfaces.

Getting Started with CSS

CSS utilises selectors to target specific HTML elements and apply styles to them. Here's an example of how we link a CSS file to an HTML document:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Blog!</h1>
    <p>This is a sample paragraph.</p>
  </body>
</html>

In the above HTML code, we have a basic structure with a heading <h1> and a paragraph <p>. To style these elements, we link an external CSS file styles.css to our HTML document. This is how we style those elements using CSS:

/* styles.css */
h1 {
  color: red;
  font-size: 24px;
}

p {
  color: blue;
  font-size: 16px;
}

In the CSS code above, we have defined styles for the h1 and p elements. We set the color and font size properties to achieve the desired visual appearance. In the browser when viewing the page the colour of the heading text will be red and large and the text below will be blue and slighly smaller.

Exploring Selectors and Properties

CSS offers a wide range of selectors and properties to select and style elements.

Class Selectors

Class selectors allow us to style multiple elements with the same class name. We define a class using the .class-name syntax in CSS and apply it to HTML elements using the class attribute. For example:

<p class="highlight">This is a highlighted paragraph.</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

The above code applies a yellow background color and bold font weight to any element with the highlight class.

ID Selectors

ID selectors target a specific element with a unique ID. We define an ID using the #id-name syntax in CSS and apply it to HTML elements using the id attribute. For example:

<p id="intro">This is the introduction paragraph.</p>

#intro {
  font-style: italic;
}

In the above code, the introduction paragraph is styled with an italic font style using the #intro ID selector. Many elements can be styled with the same class, but only one element can be styled with an ID selector.

Common CSS Properties

CSS provides a vast array of properties to control various aspects of element styling. Here are a few commonly used properties:

  • color: Sets the text color.
  • font-size: Specifies the font size.
  • background-color: Sets the background color.
  • margin: Controls the margin space around an element.
  • padding: Defines the padding space within an element.

Responsive Design with CSS

In the era of mobile devices, responsive design is necessary when creating web pages. CSS offers functionality to create responsive layouts that adapt to different screen sizes. One commonly used approach is media queries:

@media (max-width: 768px) {
  /* Styles applied when the screen width is 768 pixels or less */
  .title {
    font-size: 12px;
  }
}

In the above code, the styles within the media query are applied when the screen width is 768 pixels or less. In this example, we adjust the font size of the elements with the class "title" to 12 pixels, ensuring they fit well on smaller screens.

Conclusion

CSS empowers web development with visual appeal and responsiveness. It separates presentation from content, enabling stunning designs across devices. Essential for modern web development.

March 24, 2023 • 5 min read

JavaScript Logic

Introduction

JavaScript is a popular high level programming language that brings interactivity and functionality to web page as it is able to run in the browser.

Getting Started with JavaScript

To use JavaScript in our web pages it can be included directly in an HTML file using the <script> tag or in an external JavaScript file linked to the HTML document. Let's start with a simple example:

<!DOCTYPE html>
<html>
  <head>
    <title>My JavaScript Journey</title>
  </head>
  <body>
    <h1>Welcome to My JavaScript Blog Post!</h1>
    <p>JavaScript makes web pages interactive</p>
    <script src="script.js"></script>
  </body>
</html>

In the above HTML code, we have included an external JavaScript file named script.js using the <script> tag. This allows us to separate our JavaScript code from the HTML document for better organisation and maintainability.

Exploring JavaScript Fundamentals

When learning a new programming language it is important to grasp the fundermentals.

Variables and Data Types

In JavaScript, variables are used to store and manipulate data. We can declare variables using the var, let, or const keywords. JavaScript supports various data types, including numbers, strings, booleans, arrays, objects, and more.

// Variable declaration and data types
var name = "John";
let age = 25;
const PI = 3.14;

Functions and Control Flow

Functions allow us to reuse blocks of code, enhancing code organisation and reusability. JavaScript supports conditional statements (if, else if, else) and loops (for, while) for controlling the flow of execution.

// Function declaration and control flow
function greet(name) {
  if (name === "Alice") {
    return "Hello, Alice!";
  } else {
    return "Hello, stranger!";
  }
}

let result = greet("Bob");
console.log(result); // Output: "Hello, stranger!"

DOM Manipulation

One of JavaScript's key strengths is its ability to interact with the Document Object Model (DOM), enabling us to manipulate HTML elements dynamically. We can select and modify elements, listen to events, and create interactive web experiences.

// DOM manipulation example
let heading = document.querySelector("h1");
heading.textContent = "Welcome to My JavaScript Blog!";

Conclusion

JavaScript empowers us to create interactive web experiences and transform static web pages into dynamic applications.

April 3, 2023 • 5 min read