Refugees Code
Contents
Contents
01.Introduction to HTML
Watch these couple of videos as an introduction to HTML. Don't worry if some things don't make a lot of sense, everything will sink in eventually.
📽 CSS Tricks: HTML & CSS - The VERY Basics
Read this article until "Understanding Common CSS Terms" to get a general view of HTML. Don't worry if you don't understand, we'll go back to this later.
📖 Building your first web page
Tags
Read these articles about HTML tags:
📖 A list of the 12 most common tags
- Can you explain what is a tag?
- And what is the difference with an element?
- Review the tags list and find one that looks interesting, what is it for?
Nested tags
Tags can be nested inside other tags. To maintain readable code, the parent tags (the outermost ones) should each be on a new line with the nested element indented. This is just for reading purposes, since the browser doesn't care about how your code is indented. However, you should get used to write it so you and anyone who might read it later can understand what's happening in a glance. Read the following articles to dive deeper into nesting tags:
- Why is nesting so important in HTML?
- Is your CSS going to improve if you nest your HTML?
Comments
Comments are an important (and polemic) topic in software programming. The comments speak from themselves. They're just pieces of code that are commented out and are not interpreted by the browser whatsoever. Their only purpose is to serve as annotations to you or anyone who might read the code later. We won't start now the argument on whether you should use them or not. However, you should definitely know how to write them. Read the following articles to find out how:
📖 The HTML Comment Tag: Here’s How To Use It In Your Code
Now you know how to comment your code:
- Could you explain why comments are important?
- Can you think of advantages and disadvantages of using comments in your applications?
Exercises
⚠️ These exercises are required to complete Refugees Code. Please log in into your freecodeCamp profile to save the advance. If you have any problems, contact the teachers in Slack
- Introduction to HTML elements
- Say Hello to HTML Elements
- Headline with the h2 Element
- Inform with the Paragraph Element
- Fill in the Blank with Placeholder Text
- Uncomment HTML
- Comment out HTML
- Delete HTML Elements
02. HTML structure and basic tags
The HTML tag
The HTML tag is the tag that rules them all. It is the only tag that needs to be in every HTML document. No matter what the content of that document is, there has to be an <html> and </html> in it.
The HEAD tag
The head tag is a bit trickier, since it actually contains metadata that will not be displayed on the page, and it only serves information to the browser that the user won't be aware of.
📖 Anatomy of a web page - The head element
📖 Anatomy of the head in HTML5
- Why is the
<head>tag so important? - What's the main difference between the
<head>and the<body>tags?
HTML Landmarks
HTML landmarks are tags in your page to define areas like the main content or a navigation region. It defines semantically the website and also helps users using assistive technologies to navigate comfortably through the website.
Landmarks define the outer structure of our website, defining the areas of the page based on its responsibility
The following readings are a bit longer than usual, but once you've gone through it, you'll be able to understand much better how layouts are built in HTML and what's the purpose of some of the most important tags in the language.
📖 Document and website structure
- What are semantic tags?
- Why are they important when building your layout?
HTML Text formatting
One of HTML's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. This article explains the way HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
- How many
<h1>tags should be in your document? And<h2>? - What's the difference between a
<p>tag and a<span>tag?
Exercises
- Declare the Doctype of an HTML Document
- Define the Head and Body of an HTML Document
- Introduction to HTML5 Elements
- Create a Bulleted Unordered List
- Create an Ordered List
- Nest Many Elements within a Single div Element
03. HTML advanced elements and properties
HTML attributes
An attribute extends a tag, changing its behavior or providing metadata. An attribute always has the form name=value (the attribute's identifier followed by its associated value).
- What are attributes for?
- How are attributes formed?
Hyperlinks
A basic link (that is, some element that you can click to be redirected to another website or section in your document) is created by wrapping the text (or other content) you want to turn into a link inside an <a> element, and giving it an href attribute (also known as a Hypertext Reference, or target) that will contain the web address you want the link to point to.
You can read more about hyperlinks in these articles and watch the video below:
📖 A Complete Guide to Links and Buttons
Images
The HTML <img> element embeds an image into the document. Formats could be,.jpg .gif, .png or .svg. You'll learn later what a .svg file is, and how it can be used together with the <svg> tag. For now, read these articles to get a solid foundation on how images work on the web:
📖 MDN: img: The Image Embed Element
📖 HTML Tags Guide To Adding Images To Your Web Documents
SVG
SVG is a special format for rendering images on the web that differs greatly from what we are used to with normal formats like .jpg or .png . These images are formed with vectors instead of pixels, unleashing a whole new range of possibilities for image and data visualization on the web. It can seem daunting at first, and it is, it's a complex topic and there are lots to know about it. Don't worry though, we've prepared a selection of readings that will guide you through it. Remember to ask your mentor if you have any doubts at all. Good reading!
📖 What Is an SVG File? SVG Image and Tags Explained
📖 How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
📖 Adding vector graphics to the Web
📖 Scalable vector graphics - An Overview
- What's the difference between an image in
jpegand asvg? - What are the advantages of one against the other?
Exercises
- Add Images to Your Website
- Link to External Pages with Anchor Elements
- Link to Internal Sections of a Page with Anchor Elements
- Nest an Anchor Element within a Paragraph
- Turn an Image into a Link
04. HTML forms
We've covered basic HTML elements and attributes. We already know how to create static semantic HTML websites, display information, link pages, etc. Now, we will add a very important part of HTML: forms.
💡 Forms are essential to interact and gather data from the user, and it's very important to use semantically correct forms. The data gathered in a form is usually sent to a server, but nowadays, it can be used in JavaScript to create interaction. Don't worry about this now, you'll learn about this in the following modules.
A form is made of multiple HTML elements: labels, text inputs, checkboxes, radio buttons, buttons...etc
📖 HTML Web Forms Tutorial For Coding Beginners
Now watch this video to see how a form is actually built into a website:
One of the resources that appears on the video is from MDN, as always, this should be one of your reference guides when looking for information in web development. We'll add the link at the end of the section, in case you want to dive deeper into forms.
Exercises
- Create a Text Field
- Add Placeholder Text to a Text Field
- Create a Form Element
- Add a Submit Button to a Form
- Use HTML5 to Require a Field
- Create a Set of Radio Buttons
- Create a Set of Checkboxes
- Use the value attribute with Radio Buttons and Checkboxes
- Check Radio Buttons and Checkboxes by Default
- What's the difference between a checkbox and a radio input?
- What are the attributes that a form should always have?
- How do you make sure an input is focused when you click on a label?