Basic HTML and CSS for beginner web or game developers

Introduction to Game Development Workshop

This is a beginner-friendly workshop. We will start with HTML and CSS basics, then dive into JavaScript, explore version control, and finally learn basic game logic by building a Flappy Bird game.

Overview of the Workshop

In this workshop, we will cover:

HTML & CSS: Learn the basics of web development by structuring and styling web pages, with hands-on exercises for creating layouts and styling.
JavaScript and Game Logic: Understand JavaScript fundamentals like variables, functions, and loops, and apply them to game development for creating interactive elements.
Build a Flappy Bird Clone: Use HTML, CSS, and JavaScript to create a Flappy Bird game, learn to set up the environment, implement game physics, and add features like scoring and collision detection, and learn about the object pool method to optimize the game, by eliminating the JavaScript garbage collection process.

Throughout the workshop, there will be opportunities for questions and personalized guidance to ensure everyone is comfortable with the material. By the end, participants will have a hands-on introduction to game development fundamentals and the confidence to start exploring more on their own.

Here's the workshop schedule:

Day	Topic	Duration
1	HTML & CSS Basics	2 hours
2	JavaScript Basics	2 hours
3	Version Control with Git & GitHub	2 hours
4	JavaScript Game Logic	2 hours

Objectives for Day 1

Our objectives for day one are

To understand our working environment, that is our browser where our game will run and our code editor where we will write our code.
To understand basic HTML, and how it provides structure to our website, How a good structured HTML can provide good SEO to our website.
To understand basic CSS styling principles, that will help you design the front end of your game.

Importance of HTML & CSS in Game Development

HTML and CSS are foundational tools in web-based game development, especially for 2D games and simple interactive experiences. While they don’t handle game logic or complex interactions like JavaScript, they play a crucial role in structuring and styling games that run in the browser. Here’s why they matter:

1. Structuring the Game Layout with HTML

Canvas Setup: In HTML5 game development, the <canvas> element is essential. It serves as the base for rendering the game graphics, allowing JavaScript to draw and animate game objects.
User Interface: HTML elements, such as buttons, menus, and score displays, are crucial for creating user interfaces around the game. HTML structures these elements, making them easy to manage and style.
Accessibility: Proper HTML structure improves accessibility, helping assistive technologies navigate the game interface, which is especially helpful for players with disabilities.

2. Styling and Animation with CSS

Visual Appeal: CSS styles elements within the game, including menus, score counters, backgrounds, and more. It helps set the visual tone, making the game more appealing.
Responsive Design: CSS allows games to adapt to different screen sizes, making sure that games look great on various devices, from desktops to mobile phones.
Transitions and Simple Animations: CSS animations and transitions can be used for subtle effects like button presses, hover effects, or animations on the start screen. These add polish and can enhance the player’s experience without heavy JavaScript.

A little backstory

Why do we always create an index.html file? Well, some early software, like Apache 2, a web server, is configured by default to look for an index.html file if no other file is specified. Many servers are also set up to look for a default.html file if no other file is specified and index.html is not present.

Another tool is Emmet, Emmet is available by default in vs code, and it is widely used in the industry.

Basics of HTML

Introduction to HTML

HTML as we know is HyperText Markup Language, HTML is the building block of the web, creating structure for content that appears on browsers around the world! From text to images, and links to forms, HTML gives each element on a web page its place and purpose. Partnered with CSS (for styling) and JavaScript (for interactivity), HTML helps make web experiences dynamic and user-friendly.

To get the HTML boilerplate in vs code, you can type “!” and hit Enter. There are several tags like DOCTYPE, html, head, meta, title, and body, yes these are known as tags and each tag serves a special purpose.

HTML is a markup language, and there is a debate on the internet about whether it is even a programming language, but I want you to remember it as a syntactical language, as a simple and declarative language, this language makes the structure of your page, and there is not only one structural language, there are many more, like XML, XHTML, Markdown, LaTeX.

Structure of an HTML Document

HTML is case-insensitive, you can write <body></body> or <BODY></BODY> both works fine but usually we write it in lowercase for our ease of writing.

<!DOCTYPE html>

To define the document type, we use the <!DOCTYPE html> tag. As mentioned earlier, HTML is not the only markup language used on the web, so this tag specifies which language we are using.
<html lang="en"></html>

The <html> tag is the root of an HTML document, containing all webpage content. The lang attribute, like "en" for English, specifies the document's language, aiding accessibility and search engines. Inside <html>, there are two main parts: <head> for metadata, styles, and scripts, and <body> for the visible content.
<meta>

Meta tags are text snippets in the HTML code, usually in the <head> section, that provide information about the webpage. They are important for SEO, helping search engines understand the page. Common meta tags include description for a page summary and keywords for important words. They can also specify character set, author, and viewport settings for responsive design. Using meta tags well can boost site visibility and indexing.

Some common meta tags:
```
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
```
The first tag tells the page which character set we want to use, currently, it says UTF-8, if we want our page to support emojis we will use UTF-16.

The second tag is very important as it handles the page view on different devices of various screen sizes.

The best resource to learn about meta tags is a resource by Google.
<body></body>

The <body> tag is essential in an HTML document as it holds all the visual content users see, like text, images, videos, forms, and buttons. It serves as a container for the web page's user interface, ensuring elements are structured and styled according to CSS rules in the <head>. This organization helps create a cohesive and appealing user experience.

Now if we look closely, we will see that there are two types of tags, one that has a closing tag <head></head> and tags like <meta> which do not have a closing tag. It is recommended that if you open a tag you close it, but if you don’t do so, the browser won’t give you any errors. But it’s always a good practice to close the tags that we have opened, and it will make you future-proof when you learn libraries like React.js, you need to close all the tags. To self-close a tag, you can simply add a “/“ before closing the tag like so: <br />.

Introduction to CSS for Styling

What is CSS?

CSS, which stands for Cascading Style Sheets, is a language used to describe the presentation of a document written in HTML or XML. It is hierarchical in nature, meaning that it allows styles to be applied in a cascading order, where more specific styles can override general ones. This hierarchy enables developers to control the layout, colors, fonts, and overall appearance of web pages efficiently. By separating content from design, CSS provides flexibility and ease of maintenance, allowing developers to make global changes to the styling of a website by modifying a single stylesheet. This powerful tool is essential for creating visually appealing and responsive web designs that adapt to different screen sizes and devices.

Styling HTML Elements

There are several ways to style HTML elements:

Inline CSS

Using the style attribute of the HTML element that we want to style.

Syntax:
```
 <p style="color: red;">Text in red color</p>
```

A style tag in the head of the HTML document

Attach a <style></style> tag in the <head> of the HTML, and write your CSS there.

Syntax:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         p {
             color: red;
         }
     </style>
 </head>
 <body>
     <p>text in red color</p>
 </body>
 </html>

A separate style.css file.

Make a separate CSS file name it style.css or anything that you may like and add that CSS file to your HTML, via the <link> tag.

 p {
     color: red;
 }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./style.css">
     <title>Document</title>
 </head>
 <body>
     <p>text in red color</p>
 </body>
 </html>

Selectors and Properties

In CSS, selectors and properties form the foundation of styling web pages. Selectors are used to target HTML elements that you want to style. They can be simple, like targeting an element by its tag name, class, or ID, or they can be more complex, using attribute selectors, pseudo-classes, and pseudo-elements to apply styles based on specific conditions or states.

For example, a basic selector might target all <p> tags to apply a specific font size and color, while a class selector can be used to style a group of elements with a shared class attribute. ID selectors, being unique, are perfect for applying styles to a single element.

Properties, on the other hand, define what styles are applied to the selected elements. Each property has a set of possible values, which determine how the element is displayed. Common properties include color, font-size, margin, padding, border, and background-color, among many others.

By combining selectors and properties, developers can create detailed and specific styles that enhance the visual presentation and functionality of a website. This combination allows for precise control over the look and feel of web pages, ensuring that they are not only visually appealing but also consistent with the overall design and branding of the site.

The CSS Box Model

It is a fundamental concept in web design that describes how elements are structured and displayed on a web page. It consists of four main components: margins, borders, padding, and content. Each of these components plays a crucial role in determining the layout and spacing of elements.

Content: At the core of the box model is the content area, which is where the actual text, images, or other media are displayed. The size of this area can be controlled using properties like width and height.
Padding: Surrounding the content is the padding, which creates space between the content and the border. The padding is transparent and can be adjusted using the padding property, allowing for uniform or individual spacing on each side of the content.
Borders: Encasing the padding is the border, which can be styled with various properties such as border-width, border-style, and border-color. Borders can add visual separation between elements and can be customized to enhance the design.
Margins: Finally, the margin is the outermost layer, providing space between the element and adjacent elements. Margins are also transparent and can be set using the margin property. They play a key role in controlling the overall spacing and alignment of elements on the page.

Understanding and effectively using the CSS Box Model allows developers to create well-structured, visually appealing layouts that are responsive and adaptable to different screen sizes. By manipulating these components, designers can achieve precise control over the spacing and alignment of elements, contributing to a polished and professional web design. Recap of Day 1 Summary of Key Learnings Importance of Fundamentals in Game Development Q&A Session Preparation for Day 2 Brief Overview of Upcoming Topics Homework/Practices to Reinforce Learning

CSS media queries

CSS media queries allow you to apply different styles to a webpage based on the device's characteristics, like screen size or resolution. They help create responsive designs that adapt to various devices, ensuring a good user experience on both mobile and desktop.

In order to use them we use the @media CSS at-rule, you can write

@media (width <= 720px){
    /*your css*/
}

There is much more to this, which you can read in the mdn docs.

With this let us conclude our session. If you have any queries you can reach out to me on Twitter/X, or Instagram.

See you in the next session.

Game Development Workshop | Day 1 - HTML & CSS

Table of contents