FreeCodeCamp: Basic HTML and HTML5
Walk-through and solutions. This article will walk you through freecodecamp.org “Basic HTML and HTML5” challenges.
“HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content.” — By FreeCodeCamp
Let’s start!
You can also watch this video where I solve the Basic HTML and HTML5 exercises.
1.Say Hello to HTML Elements
💡Most HTML elements have an opening tag and a closing tag.
Opening tags look like this:<h1>
Closing tags look like this:</h1>
The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.
✅ Solution → <h1>Hello World</h1>
2.Headline with the h2 Element
💡The h2 element adds a level two heading to the web page.
This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.
✅ Solution → <h2>CatPhotoApp</h2>
3.Inform with the Paragraph Element
💡 ‘p’ elements are the preferred element for paragraph text on websites. pis short for “paragraph”.
✅ Solution → <p>Hello Paragraph</p>
4.Fill in the Blank with Placeholder Text
💡Web developers traditionally use lorem ipsum text as placeholder text. The ‘lorem ipsum’ text is randomly scraped from a famous passage by Cicero of Ancient Rome.
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
✅ Solution → <p>Kitty ipsum dolor sit amet, shed everywhere </p>
5.Uncomment HTML
💡Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.
Commenting is also a convenient way to make code inactive without having to delete it entirely.
Comments in HTML starts with <! — , and ends with a — >
✅ Solution → Just uncomment the whole thing :)
6. Comment out HTML
💡 Τo start a comment, you need to use <!--and to end a comment, you need to use -->
✅ Solution → Comment out your h1 element and your p element, but not your h2 element.
7. Delete HTML Elements
💡A good practice is to remove the unnecessary HTML elements
✅ Solution → Delete the h1 element
8. Introduction to HTML5 Elements
💡HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, sectionand others.
These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.
The mainHTML5 tag helps search engines and other developers find the main content of your page.
✅ Solution →
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
9. Add Images to Your Website
💡You can add images to your website by using the imgelement, and point to a specific image's URL using the srcattribute.
An example of this would be:
<img src="https://www.your-image-source.com/your-image.jpg">
Note that imgelements are self-closing.
All imgelements must have an altattribute. The text inside an altattribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
Note: If the image is purely decorative, using an empty altattribute is a best practice.
Ideally the altattribute should not contain special characters unless needed.
✅ Solution → <img src=”https://bit.ly/fcc-relaxing-cat" alt=”hi cat”>
10. Link to External Pages with Anchor Elements
💡You can use anchorelements to link to content outside of your web page.
anchorelements need a destination web address called an hrefattribute. They also need anchor text. Here's an example:
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
✅ Solution → <a href=”http://freecatphotoapp.com">cat photos</a>
11. Link to Internal Sections of a Page with Anchor Elements
💡Anchor elements can also be used to create internal links to jump to different sections within a webpage.
To create an internal link, you assign a link’s hrefattribute to a hash symbol #plus the value of the idattribute for the element that you want to internally link to, usually further down the page. You then need to add the same idattribute to the element you are linking to. An idis an attribute that uniquely describes an element.
✅ Solution →
<a href=”#footer”>Jump to Bottom</a>
<footer id=”footer”>Copyright Cat Photo App</footer>
12. Nest an Anchor Element within a Paragraph
💡You can nest links within other text elements.
Normal text is wrapped in the pelement:<p> Here's a ... for you to follow. </p>
Next is the anchorelement <a>(which requires a closing tag </a>):<a> ... </a>
targetis an anchor tag attribute that specifies where to open the link and the value "_blank"specifies to open the link in a new tab
hrefis an anchor tag attribute that contains the URL address of the link:<a href="http://freecodecamp.org"> ... </a>
✅ Solution →
<p>View more cat photos
<a href=”http://freecatphotoapp.com" target=”_blank”>cat photos</a>
</p>
13. Make Dead Links Using the Hash Symbol
💡Sometimes you want to add aelements to your website before you know where they will link.
This is also handy when you’re changing the behavior of a link using JavaScript, which we'll learn about later.
✅ Solution → <p>Click here to view more <a href=”#” target=”_blank”>cat photos</a>.</p>
14. Turn an Image into a Link
💡You can make elements into links by nesting them within an aelement.
Remember to use #as your aelement's hrefproperty in order to turn it into a dead link.
✅ Solution →
<a href=”#”>
<img src=”https://bit.ly/fcc-relaxing-cat" alt=”A cute orange cat lying on its back.”>
</a>
15. Create a Bulleted Unordered List
💡HTML has a special element for creating unordered lists, or bullet point style lists.
Unordered lists start with an opening <ul>element, followed by any number of <li>elements. Finally, unordered lists close with a </ul>
✅ Solution →
<ul>
<li>milk</li>
<li>cheese</li>
<li>fish</li>
</ul>
16. Create an Ordered List
💡HTML has another special element for creating ordered lists, or numbered lists.
Ordered lists start with an opening <ol>element, followed by any number of <li>elements. Finally, ordered lists close with a </ol>
✅ Solution →
<ol>
<li>Garfield</li>
<li>Sylvester</li>
<li>Water</li>
</ol>
17. Create a Text Field
💡Input elements are a convenient way to get input from your user. You can create a text input like this:
<input type="text">
Note that inputelements are self-closing.
✅ Solution →<input type=”text”>
18. Add Placeholder Text to a Text Field
💡 Placeholder text is what is displayed in your inputelement before your user has inputted anything.
You can create placeholder text like so:
<input type="text" placeholder="this is placeholder text">
✅ Solution → <input type=”text” placeholder=”cat photo URL”>
19. Create a Form Element
💡 You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your formelement.
✅ Solution →
<form action=”/submit-cat-photo”>
<input type=”text” placeholder=”cat photo URL”>
</form>
20. Add a Submit Button to a Form
💡 Clicking the submit button will send the data from your form to the URL you specified with your form’s actionattribute.
✅ Solution → <button type=”submit”>submit</button>
21. Use HTML5 to Require a Field
💡 You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.
✅ Solution →<input type=”text” placeholder=”cat photo URL” required>
22. Create a Set of Radio Buttons
💡You can use radio buttonsfor questions where you want the user to only give you one answer out of multiple options.
Radio buttons are a type of input.
Each of your radio buttons can be nested within its own labelelement. By wrapping an inputelement inside of a labelelement it will automatically associate the radio button input with the label element surrounding it.
All related radio buttons should have the same nameattribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
It is considered best practice to set a forattribute on the labelelement, with a value that matches the value of the idattribute of the inputelement. This allows assistive technologies to create a linked relationship between the label and the child inputelement.
✅ Solution →
<label for=”indoor”>
<input id=”indoor” type=”radio” name=”indoor-outdoor”>Indoor
</label>
<label for=”oudoor”>
<input id=”outdoor” type=”radio” name=”indoor-outdoor”>outdoor
</label>
23.Create a Set of Checkboxes
💡Forms commonly use checkboxesfor questions that may have more than one answer.
Checkboxes are a type of input
Each of your checkboxes can be nested within its own labelelement. By wrapping an inputelement inside of a labelelement it will automatically associate the checkbox input with the label element surrounding it.
All related checkbox inputs should have the same nameattribute.
It is considered best practice to explicitly define the relationship between a checkbox inputand its corresponding labelby setting the forattribute on the labelelement to match the idattribute of the associated inputelement.
✅ Solution →
<label for=”loving”><input id=”loving” type=”checkbox” name=”personality”> Loving</label>
<label for=”loving”><input id=”loving” type=”checkbox” name=”personality”> Caring</label>
<label for=”loving”><input id=”loving” type=”checkbox” name=”personality”> Sharing</label>
24. Check Radio Buttons and Checkboxes by Default
💡You can set a checkbox or radio button to be checked by default using the checkedattribute.
To do this, just add the word “checked” to the inside of an input element.
✅ Solution →
<label><input type=”radio” name=”indoor-outdoor” checked> Indoor</label>
<label><input type=”radio” name=”indoor-outdoor”> Outdoor</label><br>
<label><input type=”checkbox” name=”personality” checked> Loving</label>
<label><input type=”checkbox” name=”personality”> Lazy</label>
<label><input type=”checkbox” name=”personality”> Energetic</label><br>
<input type=”text” placeholder=”cat photo URL” required>
25. Nest Many Elements within a Single div Element
💡The divelement, also known as a division element, is a general purpose container for other elements.
The divelement is probably the most commonly used HTML element of all.
Just like any other non-self-closing element, you can open a divelement with <div>and close it on another line with </div>.
✅ Solution → <div><p></p><ol></ol>….</div>
26. Declare the Doctype of an HTML Document
💡The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.
At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.
You tell the browser this information by adding the <!DOCTYPE ...>tag on the first line, where the "..." part is the version of HTML. For HTML5, you use <!DOCTYPE html>.
The !and uppercase DOCTYPEis important, especially for older browsers. The htmlis not case sensitive.
Next, the rest of your HTML code needs to be wrapped in htmltags. The opening <html>goes directly below the <!DOCTYPE html>line, and the closing </html>goes at the end of the page.
✅ Solution →
<!DOCTYPE html>
<html>
<h1>Hi!</h1>
</html>
27. Define the Head and Body of an HTML Document
💡 You can add another level of organization in your HTML document within the htmltags with the headand bodyelements. Any markup with information about your page would go into the headtag. Then any markup with the content of the page (what displays for a user) would go into the bodytag.
Metadata elements, such as link, meta, title, and style, typically go inside the headelement.
✅ Solution →
<head>
<title>The best page ever</title>
</head>
<body>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn’t want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner’s face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</body>
Are you still here?! Well, if you are, congratulations! You just finished the “Introduction to Basic HTML & HTML5” by freecodecamp!
If you are interested for more freeCodeCamp challenges and solutions you can check the articles in my profile.
Disclaimer: Definitions, instructions and examples are by freeCodeCamp.org
Would you like to get me a coffee?!☕️
You can do that here → paypal.me/eleftheriabatsou
But If you can’t, that’s ok too 😍.
