Coding for Career Changers

Module 1: Getting Started with Web Development

Lesson 2: Common Programming Concepts

Now that you've created your first webpage, let's take a moment to understand some core programming concepts. Don't worry about memorizing everything - these patterns will become familiar through practice.

Programming is Built on Patterns

One of the first things experienced programmers notice is that coding is extremely repetitive. This is actually good news for beginners! Once you recognize some common patterns, you'll find yourself writing code more confidently.

Think of programming like learning a language - at first, everything seems foreign, but soon you start recognizing common structures that repeat over and over.

HTML Tag Patterns

Let's look at the HTML you've already used. Open your index.html file in VSCode and notice this pattern:

This is a paragraph.

Every HTML element follows this structure:

  1. An opening tag: <p>
  2. The content: "This is a paragraph."
  3. A closing tag: </p> (same as opening but with a slash)

This pattern appears everywhere in your HTML code:

This is a heading

This is the page title This is the page body

Think of tags like containers. The opening tag says "start this type of content here" and the closing tag says "end this type of content here."

Remember: Almost every element in HTML has both opening and closing tags. The slash (/) in the closing tag is how the browser knows where an element ends.

Nested Tags Pattern

Another important pattern is how tags can be placed inside other tags:

My Website

Welcome to my site!

In this example:

  • The <h1> and <p> tags are nested inside the <body> tags
  • The browser understands that both the heading and paragraph belong to the body of the page

This nesting creates a parent-child relationship between elements, like folders within folders on your computer.

Pro Tip: Proper indentation (those spaces at the beginning of lines) helps you visualize which elements are nested inside others. VSCode automatically helps with this.

Attributes Pattern

Sometimes tags need extra information. We provide this through attributes:

Click here to visit Google

The pattern here is:

  • Tag name: a (which creates a link)
  • Attribute name: href
  • Equals sign: =
  • Attribute value in quotes: "https://www.google.com"

You'll see this pattern with many different tags and attributes:

My photo

This text is blue

Practice Exercise: Spotting Patterns

Look at your index.html file again and try to identify:

  1. Three examples of opening and closing tags
  2. Two examples of nested tags (one tag inside another)
  3. Any attributes you might see (hint: there might not be any yet, and that's okay!)

Remember: Don't worry about memorizing all of these patterns now - just start noticing them. Over time, these patterns will become second nature through repetition and practice.

Let's Add Some Attributes

Let's update your webpage with some attributes. Open your index.html file in VSCode and change it to the following:

My First Webpage

Hello, World!

I'm learning to code!

My name is [YOUR NAME]

This is my first website!

Click here to visit Google

Save the file and refresh your browser. Notice how:

  • The heading is now blue thanks to the style attribute
  • We added a clickable link using the <a> tag with the href attribute

Learning Through Repetition

Remember that coding is learned through repetition and practice, not memorization. Each time you write HTML:

  • You'll type the same tags over and over
  • You'll fix similar errors multiple times
  • You'll gradually internalize the patterns

This is why even experienced programmers still look things up regularly - it's normal and expected! They just recognize patterns faster because they've seen them before.

Pro Tip: Don't feel discouraged if you can't remember every tag or attribute. Professional programmers use reference materials and search engines constantly. The skill is in knowing what to look for, not memorizing everything.

What You've Learned

In this lesson, you've learned:

  • Programming involves recognizing and using patterns
  • HTML elements consist of opening tags, content, and closing tags
  • Tags can be nested inside other tags
  • Attributes provide additional information to tags
  • Learning to code is about practice and repetition, not memorization

These concepts will serve as your foundation as you continue to learn programming. In the next lesson, we'll put your new website online for others to see!