Today's Progress
Today I reviewed the links lesson in Skillcrush. This lesson teaches students how to create links on a website. First, it shows students how to create an anchor tag.
Then they describe what attributes you can use on links such as href and target. Finally, they show students how to link images. If you are learning how to code, make sure you practice creating links with text and linking images.
You'll be doing both as you build more web projects. You will also want to practice creating links with the target attribute to see how to get links to open in a new tab.
Skillcrush gives more accessibility tips for links. Today's tip is about the tab key navigation. Users can use the tab key to find links on a page while some screen readers provide shortcuts to get to links much quicker. You can see this in action with the video in the link.
==> Click here to watch a video on how links work on screen readers!
Links are tools to get any goal actions you want accomplished so it is important links are accessible for all your users. Skillcrush shares the tips new developers need to keep in mind as they create links on websites.
Link words instead of URLs.
Just link the name of the site or description of the site. If it is important to know the web address, then you can put the URL. However, in general, you will want to keep things simple and just list the name.
Avoid linking words like "More Info", "Click here", or "Here".
I admit I am pretty guilty of this in my posts so I need to improve on this. This tip just reminds developers that users will be scanning pages for links. So the link text needs to be specific and focused.
It should provide provide context to what the link is about. So links should look something like "visit our FAQ" or "recipe for the perfect cappuccino.".
Use non-color indicator (underlines) for links.
Links need to stand out from all the text on a website. This is something that happens more in CSS since developers can change colors and remove underlines. However, remember that some users might struggle with color and rely on underlines. So if you aren't sure, don't be afraid to keep them. I am very sensitive to colors these days so it was really cool learning about the underlines in today's lesson and how I can use the tab key method when I'm navigating websites right now.
I did pretty well on today's practice quiz. I missed one because I forgot to put the quotes around _blank and the equal sign after the href attribute. Later I mispelled the word target and that gave me an error in my code. Punctuation and spelling are often enemies for all developers so make you double-check your code regularly as you build projects.
Next, I started working on the coding activities. I created a list of my favorite websites. Then I turned an image into a link.
Skillcrush warns students that sometimes the clicked links in the editor won't work so they provide students with a workaround by either ctrl + click (Mac) or right click on the link (PC) to get the link to open in a new tab on your browser. It took time for me to get each section done because I was constantly double-checking my code and fixing dashes with equal signs as I was typing. However, I finished the website and get all the images to show on my screen.
Tomorrow's Plan
Up next are structural and semantic tags lesson. Skillcrush introduces more HTML tags including the div tag. Developers will often use div tags so this is where developers will get a chance to start adding div tags into their code. This is also the last HTML portion in this class then coming soon is CSS.
Resources
What Does the rel="noopener noreferrer" Tag Mean? (& Does it Affect SEO?"
This article dives a little bit into security by talking about the noopener noreferrer attributes you might see on some websites. If you want to learn about these attributes, this is a great read.
Top comments (0)