This morning saw me tackle the next workshop under the Responsive Web Design certification at freeCodeCamp - building a job tips page.
Just like other workshops in the curriculum, you are given some HTML boilerplate to start, which you can see below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
</body>
</html>
One thing I appreciate about these workshops is your shown an example onscreen of the finished exercise, which helps you visualise what you have to do.
Like always, the first step is about learning by repetition - adding an h1 element to the existing code. The progression flows naturally from there, as y…
This morning saw me tackle the next workshop under the Responsive Web Design certification at freeCodeCamp - building a job tips page.
Just like other workshops in the curriculum, you are given some HTML boilerplate to start, which you can see below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
</body>
</html>
One thing I appreciate about these workshops is your shown an example onscreen of the finished exercise, which helps you visualise what you have to do.
Like always, the first step is about learning by repetition - adding an h1 element to the existing code. The progression flows naturally from there, as you then add a p element in the next task.
The third lesson has you revisting the q element, used to visually separate quoted text from surrounding content - as in the following example:
<p>
Nancy said, <q>Learning is fun!</q>
</p>
The next few steps have you revisting the cite attribute - used to point screenreaders to the source of your quote - before moving further back in the curriculum to add a main and three section elements.
With the section elements in place, subsequent lessons ask you to add elements to the first section (h2, blockquote, and p), along with the cite attribute.
The tenth step has you use the cite element, rather than the cite attribute, to display the source on screen. To explain further, the citation element is an HTML element used to mark up the title of a referenced creative work.
After adding an h2 and blockquote element to the second section, the following exercise has you use p elements to wrap multiple paragraphs within the same blockquote element, which is best illustrated in the example below:
<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
<p>So many people ask me each week: is college still worth it? In this 1-hour video I answer this question and other commonly asked questions about university.</p>
<p>I've been in adult education for two decades at this point, and even though I'm not a labor market economist, I do feel confident enough to answer these questions.</p>
</blockquote>
The final exercise reinforces these lessons by repeating these steps for the third section, shown in the following completed code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/">You can become a developer.</q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
</p>
</section>
<section>
<h2>Importance of Networking</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>So much of getting a job is who you know.</p>
<p>It's OK to be an introvert, but you do need to push your boundaries.</p>
<p>Create GitHub, Twitter, LinkedIn, and Discord accounts.</p>
<p>Go to tech meetups and conferences. Travel if you have to.</p>
</blockquote>
</section>
<section>
<h2>Importance of Building a Reputation</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>Share short video demos of your projects.</p>
<p>Keep applying to speak at bigger and bigger conferences.</p>
<p>Hang out at hackerspaces and help people who are even newer to coding than you.</p>
<blockquote>
</section>
</main>
</body>
</html>
With the workshop finished, I have a series of theory lessons before the next hands-on session: Building a Cat Blog Page! More on that next time!