This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.
<!-- Thanks for participating! -->Science, Technology & Engineering
Hey everyone! I'm back for day 2 of my tech journey, learning how to code completely on my tablet and phone.
Today was super productive. I used SoloLearn and Mimo on my Samsung phone to study some essential HTML tags, and then I jumped into Acode on my tablet to actually build something with them.
What I Learned Today
I moved past basic text and learned how to add structure and media to a webpage:
-
Links (
<a>): How to connect my page to other websites. -
Images (
<img>): How to embed pictures using the source attribute. -
Lists (
<ul>and<ol>): How to make bulleted and numbered lists.
My #BugSmash Story: The Broken Image
When I tried to create a link to one of my webpages, it completely broke! All I saw on my preview screen was a black text instead of a blue underlined text(to show that it is a link).
Here is the broken code I wrote:
<a href"[https://dev.to](https://dev.to)">Visit the Dev Community</a>
The Bug: I accidentally made a typo and forgot to add the equal to sign to the href attribute.
The Smash: Because I'm on a tablet, it can sometimes be tricky to spot tiny typos, but I closely inspected the tag, noticed the flipped letters, and added the equal to sign to 'href'. Boom! The link worked perfectly.
The Final Code
Here is the clean, bug-free code I ended up with:
html
<!DOCTYPE html>
<html>
<head>
<title>My Skills and Favorites</title>
</head>
<body>
<h1>Welcome to My Day 2 Page</h1>
<p>Check out my favorite coding apps:</p>
<ul>
<li>Acode (for typing code)</li>
<li>SoloLearn (for daily lessons)</li>
<li>Mimo (for quick practice)</li>
</ul>
<p>Here is a cool image I successfully loaded:</p>
<img src="[https://via.placeholder.com/150](https://via.placeholder.com/150)" alt="Success">
<p><a href="[https://dev.to](https://dev.to)">Visit the Dev Community</a></p>
</body>
</html>
Top comments (0)