INTRODUCTION
Greetings fellow hashnoders 👋! It has been roughly 2 weeks since I've been on this amazing journey with Side Hustle Internship 3.0 and firstly I just want to once again appreciate our mentors for their guidance so far and the administration for the opportunity. As I've stated in the title of this blog, I will be sharing my experience so far.
WHAT IS SIDEHUSTLE INTERNSHIP?
Over the years SIDEHUSTLE has had several cohorts to help equip Africans with varying career choices such as: Front-end Development, Content Creation, Video Animation, Product Management, among many others; to have an experience or idea of what it entails to be in those fields as well as equipping them with the necessary skills to be successful in said fields.
The courses offered in the internship are broken down into tracks and upon registration a track of choice is to be selected. These respective tracks have their own modes of tutoring such as telegram voice chat sessions, google meet video sessions, you-tube videos from well known professionals,etc.
Humans tend to do better when competition is involved, and this internship does well to sate that thirst. SideHustle internship introduces a new topic weekly which serves as the basis for the weekly tasks and quizzes, and it also comes with a leader board which updates weekly based on the total points . The ranking system is based on points attached to the weekly tasks and quizzes which then reflects on the leader board.
Here is what the Leader Board looks like:
MY EXPERIENCE
I found out about this internship through a friend's post and decide to apply for it. I am currently part of the Front-end Development track called Website Design & Development (Frontend) and it has been a whirlpool of an experience. It has been two weeks so far and I will break down my experience based on those weeks.
WEEK 1
The first week was all about the very first thing any front-end developer enthusiast has to begin with: HTML - Hyper Text Markup Language. The very basis of web development. We had voice chat sessions with one of our mentors known as SHAYDEE CODER, who also sent a couple of resources from popular tutorial sites such as w3schools, Tutorials Point and youtube videos for our perusal. The first week quiz was 10 questions all about HTML and the task was as follows:
Create a tribute page Heading: Name of Internship, Name of Intern, Intern ID, Best Life Quote. Include the Picture of the person you’re writing tribute to. Write your tribute, it must contain the use of at least 20 html tags in no order Include a form section whose input fields are Name, Phone Number, Email Address, Date, Sex. Submit on the codepen you created earlier, only a codepen link or github, if you can use it.
It was relatively easy for me as I have experience with HTML but nevertheless it was fun. I also learned something new about forms, that is, there is a form type for color. it came across as surprising and just further backed up my belief that you learn something new everyday and you can never really know everything, just most.
MY SOLUTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIBUTE</title>
</head>
<body>
<div id="header">
<center><h1>Side Hustle Internship 3.0</h1></center>
<h3>Name: **********</h3>
<h3>ID: ***********</h3>
<h3>Best life quote: <q>Tell me and I forget. Teach me and I remember. Involve me and I learn.</q> By <i>Benjamin
Franklin</i></h3><br>
</div>
<div id="main">
<center>
<h1>
<marquee>A TRIBUTE TO MY LOVELY <big>MOTHER</big></marquee>
</h1>
<hr>
<strong><acronym
title="My One and only Teacher, Healer, Everlasting love and Role model in Christ">MOTHER</acronym></strong>
<img src="mom.jpg" alt="My mother" width="200px" height="300px">
<h1>M</h1>
<p>is for the <b><u>mother</u></b> in you i see. Thanks so much for being a <i>mom</i> to me</p>
<br>
<h1>O</h1>
<p>She puts <b><u>others first</u></b> and is always ready to help meet their needs.</p>
<br>
<h1>T</h1>
<p>Her <b><u>time</u></b> is not her own. She shares it and uses it for others.</p>
<br>
<h1>H</h1> <span><p>She’s a <b><u>hard working</u></b> woman.</p></span>
<br>
<h1>E</h1>
<p>Her treasure is laid up with <b><u>Eternity in view</u></b></p>
<br>
<h1>R</h1>
<p>She realizes that she <b><u>reaps</u></b> what she sows so she plants goodness.</p>
</center>
<br>
<h3>Who is a mother as percieved by the scripture? <a
href="https://www.legit.ng/1146271-who-a-mother-according-bible.html" target="_blank"><small>Click to find out</small></a>
</h3>
<br>
<h2>You are loved for the following <em>reasons and more</em> :</h2>
<h4>
<ul>
<li>You are <mark>kind and funny</mark></li>
<li>You are <mark>cheerful</mark></li>
<li>You give good advice</li>
<li>You are a wonderful teacher</li>
<li>You work <mark>without any complaints</mark> to keep me happy</li>
<li>You are positive and smart</li>
</ul>
</h4>
<h1>Family Background</h1>
<table border="1">
<thead>
<tr>
<th>Parent</th>
<th>Parent Name</th>
<th>Number of Children</th>
<th colspan="2">Child Name(s)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mother</td>
<td>*********</td>
<td>1</td>
<td colspan="2">*********</td>
<td>Alive</td>
</tr>
<tr>
<td>Father</td>
<td>*********</td>
<td>2</td>
<td>*********</td>
<td>*********</td>
<td>Alive</td>
</tr>
</tbody>
</table>
<p>Despite how hard it has been raising me alone, you still do it with love and for this alone you deserve all
<em>recognition and accolade</em><strike>s</strike>.</p>
<br>
<hr>
<form action="/" method="post">
<h3>Please fill in your details</h3>
<p>Name: <input type="text" name="fullname" placeholder="enter your name..."></p>
<p>Phone Number: <input type="text" name="phonenum" placeholder="enter phone number..."></p>
<p>Email Address: <input type="email" name="mail" placeholder="enter your email..."></p>
<p>Date: <input type="date"></p>
<p>Sex:</p>
<input type="radio" id="male" value="male" name="sex">
<label for="male">Male</label><br>
<input type="radio" id="female" value="female" name="sex">
<label for="female">Female</label><br><br>
<input type="submit" value="SUBMIT FORM" name="submit">
</form>
</div>
</body>
</html>
WEEK 2
The second week as some would have guessed was about CSS - Cascading Style Sheet. This took us around the design phase and resources were shared as per usual with video attachments and scheduled google meets. The task for this week was taken from a popular site that promotes Front-end development called Frontend mentor. In details the task was:
- here’s the link to the major task for CSS frontendmentor.io/challenges/fylo-dark-them..
Download the design files needed and follow all instructions
Ensure you do not copy someone else’s work else your task would be disqualified.
Take your time to understand the layout of the design page before coding.
No frameworks must be used, just plain CSS
Make your work responsive across all devices using CSS flexbox or grid.
create a repository on github and upload your files to github.
Host your website using either github pages, vercel or netlify.
Submit the links to your repo and the live/hosted site.
Feel free to ask questions where necessary.
Best of luck.
MY SOLUTION
I hosted my solution using github pages and the live link is: Dark Themed Landing Page
Github repo solution : Dark Themed Landing Page on Github
SCREENSHOTS
This challenge was to help learn how to build a responsive site with pure CSS.
MY PROCESS
Built with
Semantic HTML5 markup
CSS custom properties
CSS Grid
Flex-Box
Mobile-first workflow
The hardest parts for me were trying to put the wave background, positioning the mail over the footer no matter the screen size, and just the overall responsiveness without making anything look iffy. I was able to sort through all this using z-index, flex-box and grid.
MY LINKS
IN CONCLUSION
The Internship so far has been interesting and somewhat of a wake up call but i am still holding on strong and looking forward to more and more as it comes. I ought to take the bull by the horn and You will be hearing more victories from me soon hashnoders.
BYE!! 👋🏽👋🏽😊