<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Tech With RJ</title>
    <description>The latest articles on DEV Community by Tech With RJ (@leerenjie).</description>
    <link>https://dev.to/leerenjie</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601312%2Fbe2a5590-eb41-469e-85c4-579323c18981.gif</url>
      <title>DEV Community: Tech With RJ</title>
      <link>https://dev.to/leerenjie</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/leerenjie"/>
    <language>en</language>
    <item>
      <title>Power of SASS</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Tue, 20 Apr 2021 04:37:56 +0000</pubDate>
      <link>https://dev.to/leerenjie/power-of-sass-4b45</link>
      <guid>https://dev.to/leerenjie/power-of-sass-4b45</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Learning SASS is a must-have skill for web developers! In this article, I will be showing some simple SASS with SCSS syntax examples! I will be sharing what I have recently learned and how to implement it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  Article Outline
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;What are SASS &amp;amp; SCSS?&lt;/li&gt;
&lt;li&gt;SCSS examples&lt;/li&gt;
&lt;li&gt;Resources&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What are SASS &amp;amp; SCSS?
&lt;/h2&gt;

&lt;p&gt;SASS or Syntactically Awesome Style Sheets is an extension of CSS, and it is responsible for styling &lt;code&gt;HTML&lt;/code&gt; documents! It uses fully compatible &lt;code&gt;CSS&lt;/code&gt; syntax but provides additional features like variables, @extend, @mixin &amp;amp; &lt;a class="mentioned-user" href="https://dev.to/include"&gt;@include&lt;/a&gt;
, and nested rules that save developer time! &lt;/p&gt;

&lt;p&gt;There are two syntaxes of SASS, SCSS (Sassy CSS or .scss) is the main one, and there is also the indented syntax(.sass). Differences in syntax can be viewed &lt;a href="https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  SCSS example
&lt;/h2&gt;

&lt;p&gt;I will be writing some examples of using SCSS! Do note that this is solely from what I understood and found useful! There are more additional features that you can find via the documentation!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using variables&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;If I know that uniform styling will be used for specific selectors, I can declare variables for the styling and assign them to the selectors. For example, some divs might have the same color across the page. If I decided to change the color in the future, all I have to edit is the variable declared. This will save so much time finding the classes to change the CSS styling one by one.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*scss file*/&lt;/span&gt;
&lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="nt"&gt;bg-color&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;#c6512c&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="nt"&gt;border-color&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="err"&gt;#000&lt;/span&gt;&lt;span class="nt"&gt;f46&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

 &lt;span class="nc"&gt;.div1&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;background-colour&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;bg-color&lt;/span&gt;
  &lt;span class="n"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;border-color&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

 &lt;span class="nc"&gt;.div2&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;background-colour&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;bg-color&lt;/span&gt;
  &lt;span class="n"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;border-color&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Nested rules
&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Nesting improves code readability and maintainability. It can be used if we have selectors that share the same parent, for example:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*scss file*/&lt;/span&gt;
&lt;span class="nt"&gt;article&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;h1&lt;/span&gt; &lt;span class="err"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="err"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;@extend &lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;With the @extend rule, we can add the styling of one class to another.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*scss file*/&lt;/span&gt;
&lt;span class="nc"&gt;.style-1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;80%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.style-2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;@extend&lt;/span&gt; &lt;span class="err"&gt;.class-1;&lt;/span&gt;

  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;black&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;@mixin &amp;amp; &lt;a class="mentioned-user" href="https://dev.to/include"&gt;@include&lt;/a&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;These two combinations are like blueprints and workers! @mixin allows us to define CSS rules and use the rules in our selectors to create styling faster!&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*scss file*/&lt;/span&gt;
&lt;span class="k"&gt;@mixin&lt;/span&gt; &lt;span class="n"&gt;card&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;height&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;bg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;bg&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nl"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="err"&gt;$&lt;/span&gt;&lt;span class="n"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;As we make new cards with the same rules but different styling, we call the card mixin with the &lt;a class="mentioned-user" href="https://dev.to/include"&gt;@include&lt;/a&gt;
 rule and pass the arguments required for the cards to it:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* scss file */&lt;/span&gt;
&lt;span class="nc"&gt;.card-1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;@include&lt;/span&gt; &lt;span class="err"&gt;card(50%,&lt;/span&gt; &lt;span class="err"&gt;30%,&lt;/span&gt; &lt;span class="err"&gt;#404040,&lt;/span&gt; &lt;span class="err"&gt;5px&lt;/span&gt; &lt;span class="err"&gt;10px&lt;/span&gt; &lt;span class="err"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.card-2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;@include&lt;/span&gt; &lt;span class="err"&gt;card(40%,&lt;/span&gt; &lt;span class="err"&gt;50%,&lt;/span&gt; &lt;span class="err"&gt;blue,&lt;/span&gt; &lt;span class="err"&gt;5px&lt;/span&gt; &lt;span class="err"&gt;10px&lt;/span&gt; &lt;span class="err"&gt;#888888);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://sass-lang.com/documentation"&gt;SASS documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://codersera.com/blog/difference-between-css-and-scss/"&gt;Difference between CSS and SCSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=nu5mdN2JIwM"&gt;SASS crash course&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/@virginialash1/pros-cons-of-sass-scss-4e4152b658f8"&gt;Pros &amp;amp; Cons of SASS/SCSS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;We can all see eye to eye that SASS with SCSS syntax has its advantages! But that does not mean that it can 100% replace CSS! There are also cons of using SCSS and can be found &lt;a href="https://medium.com/@virginialash1/pros-cons-of-sass-scss-4e4152b658f8"&gt;here&lt;/a&gt;!🤗&lt;/p&gt;

&lt;h2&gt;
  
  
  Thank you for reading!
&lt;/h2&gt;

&lt;p&gt;These were only a few examples! SASS with SCSS syntax is very useful and saves time for us developers. 😄&lt;/p&gt;

&lt;p&gt;If you liked what you read, follow me for similar content and check out my other articles! Subscribe to my newsletter to get updated when I post a new article!&lt;/p&gt;

</description>
      <category>saas</category>
      <category>css</category>
      <category>webdev</category>
      <category>scss</category>
    </item>
    <item>
      <title>Importance of LinkedIn For Tech Students</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Tue, 20 Apr 2021 04:32:00 +0000</pubDate>
      <link>https://dev.to/leerenjie/importance-of-linkedin-for-tech-students-28ha</link>
      <guid>https://dev.to/leerenjie/importance-of-linkedin-for-tech-students-28ha</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;When I first enrolled in college, the word &lt;strong&gt;LinkedIn&lt;/strong&gt; was buzzing around. Out of curiosity, I tried looking into it. Watched several tech-related YouTubers that stated LinkedIn is crucial, so I dove into it, and the rest was history.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  Article Outline
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;What is LinkedIn?&lt;/li&gt;
&lt;li&gt;Why Do You need LinkedIn?&lt;/li&gt;
&lt;li&gt;Who You Should Connect With?&lt;/li&gt;
&lt;li&gt;Why You Should Connect?&lt;/li&gt;
&lt;li&gt;General Tips for Tech Students&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;li&gt;Further Reading&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  What is LinkedIn?
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;I am a constant believer that those who are entitled "lucky/ successful" are those whose &lt;strong&gt;hard work&lt;/strong&gt; met with &lt;strong&gt;opportunities&lt;/strong&gt;! LinkedIn is one of the platforms that open the doors for opportunities to reach out to you. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;LinkedIn is hands down the world's largest professional network on the internet. You can find individuals from students to prime ministers. You can build your own unique profile there and start to create your personal brand.  Treat is as an extended CV.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your profile first starts with your profile picture and headline. Ensure that the profile picture is formal and your headline resonates with what you do now and who you are or wish to be. Others could understand you on the most basic level and connect with you if you share the same interests.
&amp;gt; A student? State: student at xxx university. An aspiring web developer? State: Aspiring web developer. Simple and straightforward. &lt;/li&gt;
&lt;li&gt;If applicable, a unique profile should include a more in-depth explanation of who you are (about section), education, work experience, technical &amp;amp; soft skills, volunteer work, Licenses &amp;amp; Certifications, and projects that you have done. This will showcase your unique professional story.
&amp;gt; Voila! You are basically set. This will let profile viewers understand you better and might approach you in the future for jobs or internships!&lt;/li&gt;
&lt;li&gt;You can also join groups, write articles, share photos, videos or documents too!
&amp;gt; As time goes by, especially if you are a tech student, you will be seeing posts after posts about certificates for completing a course/exam. You can do the same to mark your journey of continuous and self-learning as a student! Note that certifications are basically useless if you don't retain the knowledge learned.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Why do you need LinkedIn?
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Build a professional network🕸
The only nontangible thing that you have in common with your competitors is time. How do you stand out from the crowd? How do you compete with your peers or other experienced developers to get that same job? Well, if you know the recruiter, you can probably cut the line and get shortlisted. If you are informed that you would not be suitable for the role, at least you know that you don't have to waste your time applying just to get rejected.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Having a LinkedIn profile provides you the chance to build your online presence professionally. Think for a second what would happen If your recruiter goes through your Instagram/Facebook to know you professionally. Are you confident about that? Therefore, build a more professional side of you on LinkedIn that you will have lesser doubts to share with recruiters.&lt;/p&gt;

&lt;p&gt;Once you completed your profile, start networking! Don't know how? Find individuals on LinkedIn that teach you how to network! Most importantly, step out of your comfort zone.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;To get job alerts🔔
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GS5LQcBj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617376898082/T15H8CWi7.png" alt="image.png"&gt;
Companies post their job openings on LinkedIn. You can set different job alerts for a specific role in a company at an exact location or just generally. This will ensure that you wouldn't miss the chance of applying for the job when there is an opening.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;It will look like this in your email&lt;br&gt;
  &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KATboyx---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617378041127/T3zLZsAVW.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KATboyx---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617378041127/T3zLZsAVW.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ol&gt;
&lt;li&gt;See what does your dream job requires🧐
This is an example of a job opening looking for a Software Engineer by YouTube in Paris, Île-de-France, France.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3JauNvuX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617377459154/Y0pqj1ImH.png" alt="image.png"&gt;
As a student, if you are 100% clear on which company you wish to work at, you can simply search for the job posting and understand the requirements thoroughly. This will narrow down your learning scope and stress massively. It can also save you a massive amount of time to learn other things! If not, at least you know which technology the companies are using currently.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;When you graduate, you can use this feature to understand the qualifications and responsibilities to see if you are qualified and sparks your interests. If you are using LinkedIn premium, you can see how many percent you stand out from the rest of the applicants or find a job where you would be a top applicant. (Purely based on the skills you added and can be inaccurate)&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note that if you are confident in all the responsibilities stated in the job posting, chances are you should be looking for a higher role. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;To learn📖&lt;br&gt;
Choosing to pursue tech means that you signed up for continuous learning. I find that LinkedIn is a platform to learn and start meaningful conversations. &lt;br&gt;
Try LinkedIn Learning with LinkedIn Premium if you want to. It is free for one month.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Try joining groups that suit your interest (AI/Fintech/ML/Web Dev/UXUI/Finance/Job related)&lt;/li&gt;
&lt;li&gt;Subscribe to newsletters (Tech/Career related)&lt;/li&gt;
&lt;li&gt;Follow resourceful pages (Search for "Udemy Free Courses")&lt;/li&gt;
&lt;li&gt;Follow individuals that are posting meaningful content:

&lt;ul&gt;
&lt;li&gt;Technical (Depends on your niche) &lt;/li&gt;
&lt;li&gt;Soft skills related (Public speaking, presentation skills, leadership)&lt;/li&gt;
&lt;li&gt;Career-related (Interview, dos, and don'ts, career coaches)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;To motivate💪&lt;br&gt;
Being on LinkedIn motivates if used in the right way. You can see your peers learning new techs, contributing back to their community, the internships that they got at their dream company, and a lot more. It will motivate you to work towards your goal one foot at a time. One day it might be your turn!&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can also follow positive individuals like Simon Sinek and Gary Vaynerchuk that are very &lt;strong&gt;optimistic&lt;/strong&gt; and could provide you that extra nudge to lift your spirits!&lt;/p&gt;




&lt;h3&gt;
  
  
  Who You Should Connect With?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Recruiters from your dream company&lt;/li&gt;
&lt;li&gt;Employees from your dream company&lt;/li&gt;
&lt;li&gt;Employees doing your aspiring role&lt;/li&gt;
&lt;li&gt;Students that have similar interest as you&lt;/li&gt;
&lt;li&gt;Students in your University (Senior/Junior)&lt;/li&gt;
&lt;li&gt;Local Developers&lt;/li&gt;
&lt;li&gt;Developers that everyone follows for a specific topic&lt;/li&gt;
&lt;li&gt;Even individuals from different professions. You never know when you might cross paths with them. You can typically fit tech-related jobs into most industries.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Why You Should Connect?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Gain insights into working in your dream company (as motivation too)&lt;/li&gt;
&lt;li&gt;Gain tips for dos and don'ts from seniors in your university or developers in general&lt;/li&gt;
&lt;li&gt;Building your online presence&lt;/li&gt;
&lt;li&gt;Opportunities in the future for a job&lt;/li&gt;
&lt;li&gt;To learn! (Should be your number one priority, period)
&amp;gt; Treat your connections as professional connections, not friends (Maybe in the future). Do that on other platforms instead. Strictly not a dating platform too🤪&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  General Tips for Tech Students
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Start early and show how you progress.
&amp;gt; In tech, students are always recommended to start early. Your personal projects, the knowledge gap between your university courses &amp;amp; the industry standard you have to fill, networking...and a whole lot more)&lt;/li&gt;
&lt;li&gt;Send that request to connect&lt;/li&gt;
&lt;li&gt;Send formal messages&lt;/li&gt;
&lt;li&gt;Don't be afraid to ask&lt;/li&gt;
&lt;li&gt;Bring your friends onto the platform (Support and market each other)&lt;/li&gt;
&lt;li&gt;Think of a specific content you can post frequently&lt;/li&gt;
&lt;li&gt;Don't be disappointed if someone does not reply&lt;/li&gt;
&lt;li&gt;Try understanding the person by reading their posts so that you could start a conversation with them&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Everything stated above is free of charge. Utilize it with some effort. It could do you wonders in the future. You never know now. One day you would thank yourself for doing something a few years back rather than regretting what you should have done. &lt;/p&gt;

&lt;h3&gt;
  
  
  Further Reading
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.mindtools.com/pages/article/linkedin.htm"&gt;How to use LinkedIn Effectively&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://university.linkedin.com/linkedin-for-students"&gt;LinkedIn for students&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.linkedin.com/pulse/10-tips-students-new-grads-linkedin-omar-garriott/"&gt;10 LinkedIn Tips for Students &amp;amp; New Grads&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://examples.yourdictionary.com/best-linkedin-summary-examples-for-students.html"&gt;Best LinkedIn Summary Examples for Students&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://theundercoverrecruiter.com/7-ways-college-students-can-benefit-linkedin/"&gt;7 Ways College Students Can Benefit from LinkedIn&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Thank You For Reading
&lt;/h2&gt;

&lt;p&gt;Follow me or subscribe to my newsletter for more similar content! Share this blog with your juniors, peers, student tech communities, or friends that you think may benefit from this!&lt;/p&gt;

&lt;p&gt;Do leave a comment below if I missed out on anything or you would like to correct some points!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Top 5 Reasons Why I Blog</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Tue, 20 Apr 2021 04:22:23 +0000</pubDate>
      <link>https://dev.to/leerenjie/top-5-reasons-why-i-blog-3d03</link>
      <guid>https://dev.to/leerenjie/top-5-reasons-why-i-blog-3d03</guid>
      <description>&lt;p&gt;In this article, I will be writing the top 5 reasons why I blog and elaborate further on each point. Everyone has a purpose when it comes to blogging. Find your purpose and measure your impact!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Skip to the #My Top 5 Reasons if you are not interested in "How I started blogging"!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  Article Outline
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;How I started blogging&lt;/li&gt;
&lt;li&gt;My Top 5 Reasons&lt;/li&gt;
&lt;li&gt;Elaboration&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  How I Started Blogging
&lt;/h1&gt;

&lt;p&gt;A little about myself and how I started blogging. I am a first-year software engineering student, web developer, and I guess I have a thing or two for Artificial Intelligence &amp;amp; Machine Learning. &lt;/p&gt;

&lt;p&gt;Back in High school, I never liked writing, especially essays. It was never fun back then. Writing was JUST homework, a burden, troublesome, and I even got called out by my teacher saying that she almost vomited as I squeezed 18 idioms in an essay when the requirement was just 5. It might be the way our education system works. Everything you do in school is just for an A+. I couldn't find my passion in it, but I still needed that A+ tho😅.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/56ikf9jD4ZK6s/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/56ikf9jD4ZK6s/giphy.gif" alt="gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After graduating and enrolling in university, I was lost and intimidated. The tech industry is so vast, and there is so much to explore! I wanted to prepare myself to be industry-ready as soon as possible. Therefore, apart from the university syllabus, I tried finding my niche. I tried many things and was particularly attracted by web technologies. As time passed, I realized the reason I liked building websites. It is the ability to see my progress and my growth! It was rewarding since day one as I see bits by bits of my website built, and eventually a complete website. This concept applies to blogging now too! I get to measure the impact I made with my articles one after another. Readers acknowledged my content and gave me constructive feedback!&lt;/p&gt;

&lt;p&gt;If you told me that I would start blogging during college, I would probably think you are out of your mind! Me? More writing?? Pfffft😂. Now I realized writing is fundamental for a tech student and as a developer in the future. Therefore, I dedicated myself to step out of the comfort zone and put in the effort to write my first article! &lt;/p&gt;

&lt;p&gt;I wanted to start with something closer to my experience. Something I wished someone told me when I first ventured into tech. Therefore, I wrote my very first article on the 21st of March Titled "&lt;a href="https://leerenjie.hashnode.dev/13-tips-for-freshmen-pursuing-tech"&gt;13 Tips For Freshman Pursuing Tech&lt;/a&gt;". I wrote it based on what I have experienced, regretted, and wished to know.  I wanted it to reach out to more students out there, so I shared it with my local developer community on Facebook, and it blew up! 300+ views in 3 days and got approached to be featured in another blogging platform! As my first article, it was shocking to get such a great response!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EB9zM2k---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1618672881334/fnP5bkf5B.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EB9zM2k---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1618672881334/fnP5bkf5B.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, I continued writing as I loved the impact I brought on so many peoples! One after another, and eventually, I found the aim of my content and my way to impact others! I mainly write about students in tech, web development, and might consider AI/ML in the future. Now that you are all caught up, let us look at my #TOP 5 Reasons why I blog!&lt;/p&gt;




&lt;h1&gt;
  
  
  My Top 5 Reasons
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;The Impact&lt;/li&gt;
&lt;li&gt;Building a community&lt;/li&gt;
&lt;li&gt;Personal branding&lt;/li&gt;
&lt;li&gt;Network&lt;/li&gt;
&lt;li&gt;improve writing skills &lt;/li&gt;
&lt;/ol&gt;



&lt;h1&gt;
  
  
  Elaborations
&lt;/h1&gt;

&lt;p&gt;I will be elaborating each point from number 5 to number 1 below!&lt;/p&gt;

&lt;h3&gt;
  
  
  #5 Improve writing skills
&lt;/h3&gt;

&lt;p&gt;If you read my story above, writing was not my passion back in high school. Thus, there is certainly much more room for me to improve! During my free or commute time, I would listen to podcasts and read other articles to expand my vocabulary and fix my grammar. These had helped me tremendously to express myself through writing.&lt;/p&gt;

&lt;p&gt;Writing articles grants me the ability to start thinking from others' perspectives and tell my story. It requires me to put in the effort and brainpower to think of topics to write about. I can consistently create content that impacts others while training my muscle memory to write. This will help me in the future to be more fluent and sophisticated.&lt;/p&gt;

&lt;h3&gt;
  
  
  #4 Network
&lt;/h3&gt;

&lt;p&gt;Blogging has brought me wonders. It allowed me to network with local developers and meet mentors. It also allowed me to collaborate with others, and gain positive feedback from other students! I get to share my articles and start discussions based on my articles. Those discussions helped me improve my blog and also ignites the conversation with others! &lt;/p&gt;

&lt;p&gt;Many started to approach me on LinkedIn or Facebook, which did not happen before I started blogging! I can see my effort bringing me opportunities, and it is very rewarding for me in this context.&lt;/p&gt;

&lt;h3&gt;
  
  
  #3 Personal Branding
&lt;/h3&gt;

&lt;p&gt;I have attended enough workshops to know the importance of personal branding. It is how people see you and your values to whatever you said you provide. YOU have to believe and be confident to deliver the value you intend to give. Therefore, I tried to build my blog's brand around helping tech students in general. &lt;/p&gt;

&lt;p&gt;From the analytics of Hashnode, my articles related to tech students gained over 50% of my total views! It gave me the authority to write about articles that I feel would benefit students. I generally share my articles with my local developer group that has techies from students to Founders of local tech companies. I created a poll to understand the topics students were curious about. I then promised to deliver articles for that poll. I did write this &lt;a href="https://leerenjie.hashnode.dev/get-your-github-student-developer-pack"&gt;article&lt;/a&gt; which was the number 1 choice of that poll and got over 600 views within two weeks! Thus, I have started building a brand around my blog revolving around a specific audience to deliver valuable resources and insights that one might not intentionally search for. My audiences are students, and if you are a student reading this, my point exactly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/XiSle0Z70vxYnH0mFJ/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/XiSle0Z70vxYnH0mFJ/giphy.gif" alt="gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  #2 Building a community
&lt;/h3&gt;

&lt;p&gt;After having several discussions and seeing the impact of the articles I wrote, I decided to create my community! I started building my community on discord and got my first 100 members in less than two weeks! &lt;/p&gt;

&lt;p&gt;The community members were mainly from my local developer group as they knew my content and the articles I shared with the group. The community focuses on creating a safe place for students to learn. It also provides a platform for developers to share their experience, and for employers to give opportunities. I get to communicate with my community easier, share resources and articles with them. I also improved my online presence, build my brand, and expand my network again! I hope that this initiative would turn into something in the future that could benefit all of my community members.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Join our community in discord &lt;a href="https://discord.gg/jaesTeAKKa"&gt;here&lt;/a&gt;! Do note that the majority of the members are from Malaysia, but the server is open to all! Feel free to join and engage with our community😄&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  #1 The Impact
&lt;/h3&gt;

&lt;p&gt;Ever since I started writing, I have discovered my objective. I wanted to write what I learned; I wanted to write articles that would benefit students; I wanted to write things I wished I knew earlier. Slowly, I became more confident and structured in my writing. &lt;/p&gt;

&lt;p&gt;Students started to share my articles in their university group. Some approached me personally to say how the articles benefited them. Not to brag, but these little things put a smile on my face and keep me motivated😄! I get to create a positive impact on my targeted audience. I get to go to sleep and be excited to publish my article at the break of daylight. I am always hoping to benefit anyone that stumbled upon my article. Even if It only reaches out to one person.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/26ufoAcj4cdJoeKzu/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/26ufoAcj4cdJoeKzu/giphy.gif" alt="gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;To recap, the top 5 reasons I blog are &lt;strong&gt;the impact&lt;/strong&gt;, &lt;strong&gt;building a community&lt;/strong&gt;, &lt;strong&gt;personal branding&lt;/strong&gt;, &lt;strong&gt;network&lt;/strong&gt;, and &lt;strong&gt;improve writing skills&lt;/strong&gt;. Everybody has a different objective and approach when it comes to writing. Until you find your purpose, it is hard to determine what content to write and who is your target audience. &lt;/p&gt;

&lt;p&gt;I started to appreciate writers and content creators more! I know the effort needed to even write a short article that requires only two minutes to read. To all writers out there, keep writing! And for those that are scared to start writing, just do it! You never know what doors you might open. &lt;em&gt;Make it your day one, not one day&lt;/em&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Thank you for reading 😄
&lt;/h2&gt;

&lt;p&gt;This is solely based on my point of view. Find your purpose to write, and you will have the most amazing time creating your own content. If you enjoyed reading my article, consider subscribing to my newsletter! Hit the follow button and boost this article by reacting to it! Check out my other &lt;a href="https://leerenjie.hashnode.dev"&gt;articles&lt;/a&gt; too!&lt;/p&gt;

&lt;p&gt;That is all from me! Stay safe and enjoy your life!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Wave Animation for Words</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Tue, 06 Apr 2021 04:30:46 +0000</pubDate>
      <link>https://dev.to/leerenjie/wave-animation-for-words-5d2p</link>
      <guid>https://dev.to/leerenjie/wave-animation-for-words-5d2p</guid>
      <description>&lt;h1&gt;
  
  
  Article Outline
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Problem faced&lt;/li&gt;
&lt;li&gt;Solution used&lt;/li&gt;
&lt;li&gt;Codepen Example&lt;/li&gt;
&lt;li&gt;Final CSS code&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Problem faced
&lt;/h2&gt;

&lt;p&gt;When I was building my personal website, I wanted to make my website more interactive with animations. After putting in some thoughts, I decided to give my title a "wave-like" effect when the user hovered their mouse over it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Solution Used
&lt;/h2&gt;

&lt;p&gt;After playing around with CSS and HTML, I finally had a favorable result! I will be showing code snippets below!  &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;HTML Code&lt;/code&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"title"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;T&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;e&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;c&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;h&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt; &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;W&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;i&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;t&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;h&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt; &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;R&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;J&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A typical "wave-like" effect means that the words will go up and down linearly. In this case, I was trying to have the title "Tech With RJ". The empty divs are the space in between words. As you can see, all the characters have their own divs and are wrapped inside the "title" div.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Take note of the div's sequence each character is in as we will be using it in the CSS. This is how the title looks now.&lt;br&gt;
 &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IgdPYSfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673254131/o8xCQGSTf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IgdPYSfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673254131/o8xCQGSTf.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Time to add some styling!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;CSS Code&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;First, we have to turn all the divs into one line.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;inline-block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;All the divs nested in the &lt;code&gt;title&lt;/code&gt; class will have this CSS applied!&lt;br&gt;&lt;br&gt;
  Result:&lt;br&gt;
  &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--j5dQjJeD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673456996/70cZdIgy1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--j5dQjJeD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673456996/70cZdIgy1.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Next, let's make the words bigger and add some font!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;'Cedarville Cursive'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;cursive&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Result:&lt;br&gt;
  &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SKIdONPr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673593597/I1iCMsdpe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SKIdONPr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617673593597/I1iCMsdpe.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Moving forward, let us add some colors to validate that we are hovering!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;purple&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Result: &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_ujr3j9J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617674172299/iKAWBFN_-.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_ujr3j9J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617674172299/iKAWBFN_-.gif" alt="hover.gif"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Time for the animations! We will name our animation &lt;code&gt;wave&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@keyframes&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%,&lt;/span&gt;
  &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;translateY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="err"&gt;50&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;translateY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;-3px&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Read about &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY"&gt;translateY()&lt;/a&gt; and &lt;a href="https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp"&gt;@keyframes rules&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Next, We will set the animations to each div. Take note that we skipped &lt;code&gt;nth-child(5)&lt;/code&gt; and &lt;code&gt;nth-child(10)&lt;/code&gt; as they were empty divs that acted as spaces. All the div has the same animation name (wave) which we created above, the same animation duration (0.4s), and the animation delay increases at the same rate for a smooth transition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:first-child&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.11s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;2&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.22s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;3&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.33s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;4&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.44s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;6&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.55s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;7&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.66s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;8&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.77s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;9&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.88s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;11&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.99s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;12&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1.1s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;.title:hover&amp;gt;div:nth-child(&lt;strong&gt;X&lt;/strong&gt;) means that when I hover over the div with the class of &lt;code&gt;title&lt;/code&gt;, something will happen to the &lt;strong&gt;X&lt;/strong&gt; child div nested inside the &lt;code&gt;title&lt;/code&gt; div.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Codepen Example
&lt;/h2&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/rj-88/embed/QWdMwaW?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Final &lt;code&gt;CSS&lt;/code&gt; code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*Title styles */&lt;/span&gt;
&lt;span class="nc"&gt;.title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;'Cedarville Cursive'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;cursive&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/*To Make all the divs one line*/&lt;/span&gt;
&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;inline-block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;purple&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* Title animations */&lt;/span&gt;
&lt;span class="k"&gt;@keyframes&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%,&lt;/span&gt;
  &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;translateY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="err"&gt;50&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;translateY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;-3px&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:first-child&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.11s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;2&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.22s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;3&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.33s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;4&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.44s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;6&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.55s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;7&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.66s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;8&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.77s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;9&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.88s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;11&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.99s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.title&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;12&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;wave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.4s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1.1s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Thank you for reading!
&lt;/h2&gt;

&lt;p&gt;This was an easy animation. Customize it to your own need and use it in your next project. 😄&lt;/p&gt;

&lt;p&gt;If you liked what you see, follow me for similar content and check out my other articles! &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>css</category>
      <category>animations</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Get Your GitHub Student Developer Pack</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Mon, 05 Apr 2021 02:04:25 +0000</pubDate>
      <link>https://dev.to/leerenjie/get-your-github-student-developer-pack-3nlk</link>
      <guid>https://dev.to/leerenjie/get-your-github-student-developer-pack-3nlk</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Prerequisites from the website to qualify for the benefits:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Have a GitHub user account.&lt;/li&gt;
&lt;li&gt;Currently enrolled in a degree or diploma-granting course.&lt;/li&gt;
&lt;li&gt;Have a verifiable school-issued e-mail address or upload documents that prove your current student status.&lt;/li&gt;
&lt;li&gt;  Be at least 13 years old.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  Article Outline:
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;What is GitHub Student Developer Pack?&lt;/li&gt;
&lt;li&gt;What Does The Pack Offer?&lt;/li&gt;
&lt;li&gt;Steps to Apply&lt;/li&gt;
&lt;li&gt;Access Expiration &amp;amp; Renewal&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;li&gt;Related Links&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  What is GitHub Student Developer Pack?
&lt;/h3&gt;

&lt;p&gt;GitHub created the GitHub Student Developer Pack with their partners to give students free access to the best developer tools in one place as real-world tools can be very costly. This can provide students the opportunity to learn by doing as there is no substitute for hands-on experience. &lt;/p&gt;

&lt;h3&gt;
  
  
  What Does The Pack Offer?
&lt;/h3&gt;

&lt;p&gt;GitHub has partnered with 103 companies (as of today) that provide students with different benefits! Categories of tools include Cloud, Design, Developer Tools, Domains, Game Development, Infrastructure &amp;amp; APIs, Internet Of Things, Learning, Marketing, Mobile, Productivity, and Security &amp;amp; Analytics. Pretty much everything.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N4OUVkYJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617346765389/85aQpr6qT.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N4OUVkYJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617346765389/85aQpr6qT.gif" alt="benefits.gif"&gt;&lt;/a&gt;&lt;br&gt;
I am 100% confident that you will find one of the tools beneficial for you now or in the future! Check out the partnered companies, tools, and benefits from the &lt;a href="https://education.github.com/pack"&gt;official website&lt;/a&gt;. Plus you can also get the PRO tag on GitHub! 👀 So, let us start to apply!&lt;/p&gt;

&lt;h3&gt;
  
  
  Steps To Apply
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Head over to the &lt;a href="https://education.github.com/students"&gt;official website&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Sign in to your GitHub account.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vUdsgAGK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617347315885/y_JpxfU0w.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt;Select GitHub Student Developer Pack
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--b_IUJayJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617347431855/wgk201umI.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt; Click on "Get Your Pack"
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RsiICZkP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617347525353/shLNT9vC3_.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt;Adding your school-issued e-mail address
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7vPkalHO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617347872989/eDtEggoB6.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt;Head to your mail checker and verify the e-mail address
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OqP7mZPK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617348240641/83F2QOI3E.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt;Refresh the page and select the e-mail you added
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IzJDDyJW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617348498604/M6GeBpr9g.png" alt="image.png"&gt;
&amp;gt; You can see that my university's name is automatically generated. This applies to most Universities but not all. School e-mails give you the best chance of a speedy review.&lt;/li&gt;
&lt;li&gt;Enter your school's name and describe how you plan to use GitHub.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Cz-y3swX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617348657789/S_HOOiIsb.png" alt="image.png"&gt;
&amp;gt; If you do not have an e-mail or GitHub requires you to send additional proof of academic status.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QQPwmViW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617348982113/EFXovNEYO.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt;Take a picture with your webcam or upload it from your local files
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ruY0V9V3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617349043443/3XUy5UuSS.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;li&gt; Verify your application details and submit
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fQKO4gfR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617349228141/uxw-fUoav.png" alt="image.png"&gt;
&amp;gt; Voila! If your application is approved, you will receive a confirmation e-mail within 28 days. Applications are usually processed within a few days, but they may take longer during peak times. For example, during the start of a new semester.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vVo3KX-F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1617417908419/KCI-EuTor.png" alt="image.png"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Access Expiration &amp;amp; Renewal
&lt;/h3&gt;

&lt;p&gt;You may reapply for another GitHub Student Developer Pack access once it expires if you're still eligible. As some benefits are timed offers, they start once you set them up and cannot be renewed.  For more information, see the &lt;a href="https://education.github.com/pack"&gt;GitHub Student Developer Pack page&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;To see when your access for GitHub Developer Pack Expires, view your &lt;a href="https://github.com/settings/billing"&gt;GitHub account's billing&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;It is nice to see GitHub and their partnered companies doing such a good deed for students out there. As a tech student, I always find project-based learning easier to absorb the knowledge for a particular technology. Therefore, the hands-on experience with real-world tools provided by the GitHub Student Developer Pack is an opportunity not to miss!&lt;/p&gt;

&lt;h3&gt;
  
  
  Related Links
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.community/t/github-student-developer-pack-faq/124041"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.github.com/en/education/explore-the-benefits-of-teaching-and-learning-with-github-education/apply-for-a-student-developer-pack"&gt;Related Documentations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://education.github.com/pack"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://education.github.com/benefits"&gt;Status of Application&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/settings/billing"&gt;GitHub account's billing&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Thank you for reading!
&lt;/h2&gt;

&lt;p&gt;Follow me or subscribe to my newsletter for more similar content! Share this blog with your juniors, peers, student tech communities, or friends that you think may benefit from this!&lt;/p&gt;

&lt;p&gt;Do leave a comment below if I missed out on anything!&lt;/p&gt;

</description>
      <category>github</category>
      <category>free</category>
      <category>students</category>
    </item>
    <item>
      <title>13 Tips For Freshmen Pursuing Tech</title>
      <dc:creator>Tech With RJ</dc:creator>
      <pubDate>Mon, 22 Mar 2021 01:12:41 +0000</pubDate>
      <link>https://dev.to/leerenjie/13-tips-for-freshmen-pursuing-tech-1h52</link>
      <guid>https://dev.to/leerenjie/13-tips-for-freshmen-pursuing-tech-1h52</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;I will be sharing my experience as a first-year software engineering student and what I wished I knew earlier. Do note that this is entirely based on my opinion and understanding. I hope that freshmen or students trying to pursue tech will benefit from reading this! Do skip straight to #Tips if you would not like to read my path!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  My Path
&lt;/h1&gt;

&lt;p&gt;After graduating from high school, most of us are unsure which degree to pursue, which university to choose from, and how we build our careers. These were exactly my thoughts as I finished High School. I had to find my direction and my path immediately with minimum guidance. Luckily my grades were good enough to allow me to have a variety of choices. Even though I am very grateful for having these choices, having too many options brought me into a loop of What Ifs. After researching, I decided to pursue tech for many reasons. These include industry growth rate, job security, salary, and the ability to work remotely. &lt;/p&gt;

&lt;p&gt;I tried finding my niche in the field of tech during my spare time. I was particularly attracted to web development and the impact of Artificial Intelligence. Thus, I bought Udemy classes and taught myself how to build a website from scratch with &lt;strong&gt;0&lt;/strong&gt; prior knowledge. After approximately a year of self-learning, I have exposed myself to many technologies, including HTML5, CSS3, JavaScript, React, Git, and many more. In the process, I've also had some ups and downs. Currently, I am aiming to sharpen my skills using the MERN stack by building projects. Thus, I have summarized my experiences into few feasible tips in the #Tips section below. Happy reading!&lt;/p&gt;

&lt;h1&gt;
  
  
  #Tips
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;All tips are not written in order of importance&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Do Not Depend 100% On Your University
&lt;/h3&gt;

&lt;p&gt;The issue with tech degrees is that not all of them prepare you for industry placement. Technology is moving forward at a fast pace day by day, and university courses often could not catch up. Most students are not aware of this. They would regret when they graduate as they fully depended on their degree. They realized that they are not ready for industry placement. Therefore, self-learning is crucial. Keep yourself updated with the current uptrend. Top tech companies like FAANG (Facebook, Amazon, Apple, Netflix, and Google) did hire software engineers without a Computer Science Degree. Let that sink in for a second. It depends more on your skillset, experiences, soft skills, attitude, and the value you can provide. Having a degree is still a plus and it is required for some companies. &lt;/p&gt;

&lt;h3&gt;
  
  
  Find Your Niche
&lt;/h3&gt;

&lt;p&gt;The tech world is vast. Fields available include Data Science, Web Development, Game Development, App Development, Cyber Security, and many more. Among all paths in tech, &lt;strong&gt;find one to focus on&lt;/strong&gt;. The specific one that you enjoy. Do something you like as you will be spending most of your life on it. &lt;/p&gt;

&lt;p&gt;From my experience, to know what you enjoy, you will have to try it yourself. A little bit of everything, and imagine yourself doing it for decades. If you couldn't find what you love, at least you will know what you dislike and not go in-depth specifically in that field. When you choose a specific discipline, it gets so much clearer on what to learn. You will be able to schedule more time for other activities, reduce your stress, and accelerate your learning. Often you can Google the suggested roadmap for a specific field. i.e., "Web Development Roadmap 2021", and you will get a general understanding of the technologies required in the industry generally for that field.&lt;/p&gt;

&lt;h3&gt;
  
  
  Learn Consistently
&lt;/h3&gt;

&lt;p&gt;If you have chosen to be a part of the tech world, consistent learning is a must even when you are working. When you are first starting in tech, the number of things to learn can feel overwhelming. New languages and technologies every year, sometimes every week, and to stay on top of them all are simply impossible. Therefore, after deciding on your niche, narrow down on what you should be learning to be industry-ready by the time you graduate. Spend 1 hour or more daily, sit down, and learn! Programming requires practice very often, or you would forget what you have learned after some time.&lt;/p&gt;

&lt;p&gt;If you procrastinate a lot as I did back then, follow the 15-minutes method! The method is simple. Sit down and promise yourself that you will learn or practice for 15 minutes and turn away from all distractions. After 15 minutes, you can take a break and do whatever you want. The chances are, after 15 minutes, you are so engaged in the learning process that you would want to complete your current task. If not, you still learned for 15 minutes! Cumulatively, that would make a significant difference after a month, a year, and so on.&lt;/p&gt;

&lt;h3&gt;
  
  
  Build Projects
&lt;/h3&gt;

&lt;p&gt;The best way to learn to code is by project-based learning. You can be coding along with the instructor in a tutorial and forget what the code does after some time. Therefore, after learning something, build a simple project that applies everything you have learned. If you are coding along with a video, add some features to the project without referring to source codes. You can refer to online resources from Google. Programming isn't about memorizing codes. It is more about problem-solving. Therefore, solving more problems on your own allows you to improve gradually.&lt;/p&gt;

&lt;p&gt;Furthermore, to stand out among your peers when searching for internships/jobs is through your projects. Personal projects help you improve as a developer. You will learn skills that you didn't know you needed. This includes both technical and soft skills. Therefore, it is recommended to start early! The more, the merrier! With a portfolio of projects, you can even freelance on platforms like Fiverr and Upwork or even Facebook!&lt;/p&gt;

&lt;h3&gt;
  
  
  Learn GitHub &amp;amp; Git
&lt;/h3&gt;

&lt;p&gt;As a student, you should learn how to utilize GitHub and Git as early as possible. In short, GitHub is a website for developers to collaborate and work on a project. It also lets you manage Git repositories. Codes available on GitHub are usually open-sourced projects and can be used by developers. You can host your projects' code on GitHub for free too! On the other hand, Git is a popular version control system that allows you to manage and keep track of your code history. &lt;/p&gt;

&lt;p&gt;Of course, they are more than what is described above and it is totally fine if you don't understand it now. There are always resources on Youtube that introduce you to GitHub and Git! I highly recommend you to check them out! You should also learn project workflows and Git workflows for different projects. This would help you greatly in the future. &lt;/p&gt;

&lt;h3&gt;
  
  
  Google &amp;amp; Stack Overflow are Your Friends
&lt;/h3&gt;

&lt;p&gt;The answers to your questions are probably a search away. You will not be the first one asking that question. Google (for general questions) and Stack Overflow (for code-related questions) have most of your questions answered. If not, you can always ask a new question on Stack Overflow. Developers with experience will try their best to answer your query! Of course, that would be the last resort. Try solving your questions with the documentation of the technology you are currently using. &lt;/p&gt;

&lt;h3&gt;
  
  
  Utilize All Available Resources
&lt;/h3&gt;

&lt;p&gt;We are fortunate to be living in this era as most of the resources are a click away. Utilize all the online resources available to you. Examples are W3Schools, freecodecamp, Coursera, Udacity, Udemy, Khan Academy, edX, YouTube, and so much more! There are also mobile apps to learn to code!  Examples are Mimo, Sololearn, Grasshopper, and many more! Most would be free, but some paid ones are also great! There are also great books out there that you could research on.&lt;/p&gt;

&lt;h3&gt;
  
  
  Join Communities
&lt;/h3&gt;

&lt;p&gt;Coding alone is never fun (at least for me). Try joining communities like Major League Hacking, Tech Communities on Reddit, or your local tech communities! You will be surrounded by enthusiastic developers that had more experience than you! You can learn a lot from them as you ask questions and keep yourself motivated as well. Most developers are friendly and helpful as they have been in your shoes back in the day.&lt;/p&gt;

&lt;h3&gt;
  
  
  Join Hackathons
&lt;/h3&gt;

&lt;p&gt;Before joining my first hackathon, I thought Hackathons were for a developer that knew ethical hacking. The truth is way different from that. Based on Google, a hackathon is an event in which a large number of people meet to engage in collaborative computer programming. Sounds boring? There is a lot more to that! From my experience with hackathons, it allows you to network with other passionate developers. Those developers are ready to collaborate and learn from each other. When everyone is there to learn, the result of work done together cumulatively is beyond your imagination. Besides, if your team is familiar with the technology and can create a project that stands out, winning a hackathon brings you many benefits too! Including funding and mentorship to bring that project market-ready! You can search for hackathons at HackerEarth, MLH, Devpost, and many more.&lt;/p&gt;

&lt;h3&gt;
  
  
  Network with Others
&lt;/h3&gt;

&lt;p&gt;As a student in any field, the ability to network with others is significant. As an introvert myself, networking was intimidating for me. But as you step out of your comfort zone, you will realize that you can learn a lot from others through networking. The recommended platform for this would be LinkedIn, Twitter, and sometimes Facebook. Simply search for an individual working at your dream company, your seniors, employers, or even peers! Send them a connection request and ask a simple question that you are curious about formally! Of course, you have to accept the fact that not all of them will reply to you. Therefore, try asking those that you think would receive fewer messages.&lt;/p&gt;

&lt;h3&gt;
  
  
  Contribute to Open Source
&lt;/h3&gt;

&lt;p&gt;This is optional as many might not be interested in contributing to open-source projects on GitHub. As a freshie in tech, contributing to open-source projects helped me improve myself as a developer. I had a better understanding of project workflow as I contribute to open source projects. I also had better git workflow and communication skills. You can aim to join Google Summer of Code or other organizations' winter of code/spring of code that aims to promote open source contribution!&lt;/p&gt;

&lt;p&gt;You can also look into competitive programming to brush up on your problem-solving skills and critical thinking skills using data structures and algorithms. You can learn Data Structures and Algorithm from AlgoExpert, Coursera, and YouTube (MIT OpenCourseWare, OpenCodeSchool, FreeCodeCamp).&lt;/p&gt;

&lt;h3&gt;
  
  
  Have a Mind of Your Own
&lt;/h3&gt;

&lt;p&gt;Of all the tips above, I think having a mind of your own is of utmost importance. Do not take other's suggestions 100% and follow their path blindly. I've seen many people getting into tech change what they wanted to learn without hesitation because someone else said so. Instead, take it as a source of reference. Everyone will have a different and unique road when pursuing tech. &lt;/p&gt;

&lt;p&gt;"Which programming language should I be learning first?". Sounds familiar? This is a common question asked by those that are new in the tech world. This was my question too. Chances are, people will answer based on their favorite programming language and also the one that is popular. As an example, the Python programming language. Python is a great programming language to begin with as it is beginner-friendly. The truth is, it depends on which field you are going into as the technologies in demand differ. Therefore, do your research. Don't waste your time learning a technology that you will probably not use in the foreseeable future. &lt;/p&gt;

&lt;h3&gt;
  
  
  Build a Life, Not a Resume
&lt;/h3&gt;

&lt;p&gt;"Build A Life, Not A Resume" was one of the main takeaways I got from a seminar. Companies do not want robots that can only code. Other than improving your technical skills, try to improve all aspects of your life! Enjoy your university life, join events, seminars, clubs, and more as it is mostly free (and you paid tons getting into university). You only have one chance anyways. Make friends along the way. Contribute your knowledge to society. Be humble enough to learn from others. Be Open-minded. Be confident. These might be factors that would attract the eyes of an employer to hire you too! &lt;/p&gt;

&lt;p&gt;Lastly, make an impact on the world no matter how small it is.&lt;/p&gt;

&lt;h1&gt;
  
  
  Thank you for reading!
&lt;/h1&gt;

&lt;p&gt;Follow me for more web development content and content related to students in tech soon! Share this blog with your juniors, siblings, or friends that are new in tech or wanting to venture into the tech world! &lt;/p&gt;

&lt;p&gt;Do leave a comment below if I missed out on anything or you would like to correct my points! Share your path with others too! &lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tips</category>
      <category>career</category>
    </item>
  </channel>
</rss>
