<?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>Forem: Scrimba</title>
    <description>The latest articles on Forem by Scrimba (@scrimba).</description>
    <link>https://forem.com/scrimba</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%2Forganization%2Fprofile_image%2F2180%2F272ec0dc-f5e7-4574-83be-fc3482c93cd9.jpg</url>
      <title>Forem: Scrimba</title>
      <link>https://forem.com/scrimba</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/scrimba"/>
    <language>en</language>
    <item>
      <title>Introducing Scrimba Fullstack</title>
      <dc:creator>Per</dc:creator>
      <pubDate>Fri, 11 Apr 2025 07:29:25 +0000</pubDate>
      <link>https://forem.com/scrimba/introducing-scrimba-fullstack-m5p</link>
      <guid>https://forem.com/scrimba/introducing-scrimba-fullstack-m5p</guid>
      <description>&lt;p&gt;Over the last few years, &lt;a href="https://scrimba.com" rel="noopener noreferrer"&gt;Scrimba&lt;/a&gt; has grown into a community of nearly two million learners focused on mastering frontend development. But there’s one question we've heard again and again: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"When will you offer backend courses?".&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This makes a lot of sense, as you need both backend and frontend in order to build fully functional apps. It also drastically improves your hireability if you understand the entire stack, as the job market has moved towards fullstack roles.&lt;/p&gt;

&lt;p&gt;So today, we’re happy to share that you can finally learn &lt;strong&gt;fullstack development&lt;/strong&gt; on our platform, with six free courses ready straight out of the gate. These cover subjects like Node.js, Express.js, Next.js, SQL, the command line, and more. &lt;/p&gt;

&lt;p&gt;Click &lt;a href="https://scrimba.com/t0fullstack" rel="noopener noreferrer"&gt;here&lt;/a&gt; to see all of them.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxaz4n53rbyp419xeclpn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxaz4n53rbyp419xeclpn.png" alt="The fullstack topic page on Scrimba" width="800" height="519"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These fullstack courses run entirely in the browser, meaning you don’t have to set up your dev environment locally, nor pay for credits on a remote container that runs the project for you. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You'll be able to jump seamlessly between the video and the IDE, as they have been fused into a unified learning experience.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://scrimba.com/s0kmcarts1" rel="noopener noreferrer"&gt;Click here to watch a scrim&lt;/a&gt; that explains how it works in more detail.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://scrimba.com/s0kmcarts1" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhj6denrrq3f76zkzawyi.png" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How the fullstack support works under the hood
&lt;/h2&gt;

&lt;p&gt;To offer truly interactive fullstack learning experiences, we considered multiple approaches. Most in-browser code editors spin up remote server containers for backend code execution, but these can quickly become expensive, leading to limits on usage. In addition, network latency can be a drag on performance.&lt;/p&gt;

&lt;p&gt;Another possibility we explored was using building our own solution using &lt;a href="https://webassembly.org/" rel="noopener noreferrer"&gt;WebAssembly&lt;/a&gt;, which lets you run a range of programming languages within the browser. However, this would be huge undertaking for our development team, who have plenty of other important tasks to focus on.&lt;/p&gt;

&lt;p&gt;Luckily though, StackBlitz has done much of this heavylifting already, and launched it as a product called WebContainer. This allows complete Node.js environments to run directly in your browser, providing instant setup without installations, local configurations, or performance compromises. WebContainers is now fully integrated it into our scrims.&lt;/p&gt;

&lt;h2&gt;
  
  
  How we make the “videos” interactive
&lt;/h2&gt;

&lt;p&gt;Speaking of which, developers often ask how we’ve built the scrim format. So let’s have a look at that as well. &lt;/p&gt;

&lt;p&gt;The easiest way to describe it is that is a mix between the IDE and a video. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj6ettpu8revy5y4khpm9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj6ettpu8revy5y4khpm9.png" alt="Meme of how scrimba is a mix of VS Code and YouTube" width="800" height="601"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The main thing to understand about the scrim format is that is is event-based, as opposed videos, which are pixel-based. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;So whereas a 24 FPS (frames per second) video contains 24 images stacked on top of each other, a scrim instead records the underlying events, which could be “edit code”, “move cursor”, “open file”, or so forth.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here is a screenshot that visualizes the difference.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4cjrphlepepgi676aod.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4cjrphlepepgi676aod.png" alt="Comparison between a video and a scrim" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you watch a scrim, we simply re-create these events in the IDE, while layering the audio from the teacher on top. Much of the complexity in Scrimba arises from having to apply these events in the correct order in the IDE, and thus creating a timeline that reliably can be scrubbed back and forth.&lt;/p&gt;

&lt;p&gt;These events are optimized like crazy, meaning they require little bandwidth to be streamed to your computer. Actually, a scrim usually weights 100 times less than its equivalent video.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7mbuavj01gpej1iuicgx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7mbuavj01gpej1iuicgx.png" alt="File size of a video versus a scrim" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Which courses are available?
&lt;/h2&gt;

&lt;p&gt;Our teachers have been working around the clock the last few months to ensure you can learn a range of full-stack technologies from the start, learning essential skills like building APIs, working with databases, controlling the terminal, and more. Here are the courses you can enroll into for free right away:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Learn Node.js&lt;/li&gt;
&lt;li&gt;Learn Express.js&lt;/li&gt;
&lt;li&gt;Learn Next.js&lt;/li&gt;
&lt;li&gt;Intro to SQL&lt;/li&gt;
&lt;li&gt;Command Line Basics&lt;/li&gt;
&lt;li&gt;Intro to Vite&lt;/li&gt;
&lt;li&gt;Intro to Supabase&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Several of the courses above have been created in collaboration with the library maintainers, giving us feedback on best-practices and common hurdles beginners feel when learning their stack. &lt;/p&gt;

&lt;p&gt;And in well-known Scrimba style, they all take full advance of the interactivity, giving you coding challenges around every corner. By the time you’d taken either of these courses, you’ll have written a lot of code in the given technology.&lt;/p&gt;

&lt;p&gt;And this is just the start. Over the coming months, we’ll release additional courses including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Intro to Nest.js&lt;/li&gt;
&lt;li&gt;Intro to Nuxt&lt;/li&gt;
&lt;li&gt;Intro to Vitest&lt;/li&gt;
&lt;li&gt;Learn Vue&lt;/li&gt;
&lt;li&gt;RAG &amp;amp; AI agents&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you have suggestions for a course you’d like us to create, or if you’re an open-source maintainer who’d like to see a course about your technology on Scrimba, please email me at &lt;a href="mailto:per@scrimba.com"&gt;per@scrimba.com&lt;/a&gt;. &lt;/p&gt;

&lt;h2&gt;
  
  
  Can I record my own scrims?
&lt;/h2&gt;

&lt;p&gt;Yes, you can! It’s quite simple, as everything is done in the browser, so you don't even have to download an app. Once a scrim has been recorded, it will be listed on your profile, or can be shared via a link.&lt;/p&gt;

&lt;p&gt;Most likely, you’ll have to edit your scrim a bit to cut away pauses, mistakes, and so forth. So we’ve create a simple editing interface as well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr98q0r78sby7a8px54tg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr98q0r78sby7a8px54tg.png" alt="The timeline editing interface on Scrimba" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you’re a teacher or developer looking to record content with &lt;br&gt;
Scrimba, please reach out!&lt;/p&gt;

&lt;h2&gt;
  
  
  Can I embed scrims into my website?
&lt;/h2&gt;

&lt;p&gt;Yes, you can do that! Several partners of ours are doing this, like MDN, Coursera, and freeCodeCamp. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ftc16aq2e18erqyzl3c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ftc16aq2e18erqyzl3c.png" alt="An embedded scrim on MDN" width="800" height="446"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It'll enable your users to get an unique and differentiated learning experience.&lt;/p&gt;

&lt;p&gt;When are actively looking for partnerships these days, and have an affiliate program where you’ll get a generous share of the revenue from any traffic your send us. This program has generated hundreds of thousands of dollars in revenue since we started ramping it up in the second half of 2024.&lt;/p&gt;

&lt;p&gt;Happy coding!&lt;/p&gt;

</description>
      <category>node</category>
      <category>nextjs</category>
      <category>programming</category>
      <category>learning</category>
    </item>
    <item>
      <title>30 inspiring web developer portfolio examples you have never seen before</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Mon, 20 Feb 2023 22:40:04 +0000</pubDate>
      <link>https://forem.com/scrimba/30-inspiring-web-developer-portfolio-examples-you-have-never-seen-before-3774</link>
      <guid>https://forem.com/scrimba/30-inspiring-web-developer-portfolio-examples-you-have-never-seen-before-3774</guid>
      <description>&lt;p&gt;There are many decisions that a recruiter makes while evaluating your application for your first junior developer role.&lt;/p&gt;

&lt;p&gt;Do you have the personality and capacity to confront technical challenges? Do you have a genuine passion for coding and the dedication to improve despite not having professional experience?&lt;/p&gt;

&lt;p&gt;Your secret weapon to convince them?&lt;/p&gt;

&lt;p&gt;An amazing web developer portfolio.&lt;/p&gt;

&lt;p&gt;A web developer portfolio is a showcase of who you are. It shows recruiters that you have the right skills, enthusiasm, and desire to complete technical challenges. It's your opportunity both to impress them and standout from another dozen of candidates in the hiring process.&lt;/p&gt;

&lt;p&gt;If you're ready to create your web developer portfolio and yet you don't know how to turn it into something beautiful, this article is the only resource you will ever need.&lt;/p&gt;

&lt;p&gt;I've gone through dozens of forums, portfolio directories and design websites to find the most stunning, yet unseen portfolios for you to take examples from.&lt;/p&gt;

&lt;p&gt;Let's dive deep into them now and find out what makes them great.&lt;/p&gt;

&lt;h2&gt;
  
  
  Do I really need a web developer portfolio?
&lt;/h2&gt;

&lt;p&gt;No. A web developer portfolio is not a requirement to be hired for a junior position. However, missing one means missing a tremendous opportunity to prove to recruiters your skills and dedication to the role despite your lack of professional experience.&lt;/p&gt;

&lt;p&gt;Without one, you're limited to your words during the interview process, and as always, showing your skills is better than telling them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Should I Know Before Creating My Web Developer Portfolio?
&lt;/h2&gt;

&lt;p&gt;Before diving into creating your own web developer portfolio, keep in mind the following fundamentals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Display only your best work&lt;/strong&gt;: don't mind using your first program where you used a while loop. Your portfolio is a place to show complete, meaningful projects. Also remember: you don't need a dozen of significant projects. Usually, two to four is a perfect balance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use your name as the domain's name&lt;/strong&gt;: this is the absolute best way to make sure you're found during the interview process when recruiters search for you on Google.&lt;/li&gt;
&lt;li&gt;Include a contact form: to make sure recruiters can easily contact you.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Add honorable mentions&lt;/strong&gt;: if somebody mentions your work in a publication or praises you online for it, mention it in the portfolio. There's no better way of selling yourself than social proof.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Do not use tutorial projects&lt;/strong&gt;: your portfolio should be a place for originality, so don't use projects from Udemy courses or YouTube tutorials. It might surprise you how many devs do and how easily recruiters will spot that.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚠️ &lt;strong&gt;Important note&lt;/strong&gt;: while a great web developer portfolio can help you a long way in your career search, a bad one will for sure damage your image in the eyes of recruiters. So always strive for a website that is looking beautiful, both on mobile and desktop, which you maintain regularly. You never want recruiters to click on your portfolio only to find a 404-page error.&lt;/p&gt;

&lt;h2&gt;
  
  
  Our Top 30 Stunning Web Developer Portfolio Examples
&lt;/h2&gt;

&lt;p&gt;Let's know deep dive into our favorite portfolio examples for you to take inspiration from.&lt;/p&gt;

&lt;h2&gt;
  
  
  Our top 30 stunning web developer portfolio examples
&lt;/h2&gt;

&lt;p&gt;Let's know deep dive into our favourite portfolio examples for you to take inspiration from.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.safetpojskic.com/" rel="noopener noreferrer"&gt;Safet Pojskic&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkhe7eiwczeysbzpb086z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkhe7eiwczeysbzpb086z.png" alt="Safet's portfolio homepage." width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I love the simplicity of Safet's portfolio. He follows a classic structure of an introductory line + nice photo of himself. He also placed a contact button as a call to action, which is very smart as it directs website's visitors to their next step when interacting with him.&lt;/p&gt;

&lt;p&gt;After listing his skills, he also gives recruiters the opportunity to download an updated version of his CV with a button click.&lt;/p&gt;

&lt;p&gt;I really enjoyed the particle animation they used for the background of the portfolio, adding a sense of dynamic to a spotless color palette, using simply black, red and white.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: if you want to implement particles effect in your portfolio too, you can use &lt;a href="https://animejs.com/" rel="noopener noreferrer"&gt;Anime.js&lt;/a&gt; as Safet did.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://benscott.dev/" rel="noopener noreferrer"&gt;Ben Scott&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBen-Scott.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBen-Scott.png" title="Ben's portfolio homepage." alt="Ben's portfolio homepage." width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ben's description of himself is uncomplicated. His portfolio is very similar to Safet's one in terms of background effects and palette colors. I loved his choice of displaying his skills as images and, most of all, all his projects list a live link to test the final result, allowing recruiters to visualize his work without having to pull down the project from GitHub.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: want to create a dynamic lightning background like Ben? He used&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" rel="noopener noreferrer"&gt;HTML's canvas API&lt;/a&gt; for that.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://briceclain.com/en/" rel="noopener noreferrer"&gt;Brice Clain&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBrice-Clain.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBrice-Clain.png" title="Brice's portfolio homepage" alt="Brice's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Brice's portfolio feels alive thanks to the animation he placed across the whole page. Visiting this website feels like having a conversation with him, where he explains the history behind each one of his projects and how they came to life. A really memorable experience for the eyes.&lt;/p&gt;

&lt;p&gt;Tip: &lt;a href="https://animejs.com/" rel="noopener noreferrer"&gt;Anime.js&lt;/a&gt; is the library behind his typewriting effects on the text.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://iuri.is/" rel="noopener noreferrer"&gt;Iuri De Paula&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv13vajqfeilmapnja20p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv13vajqfeilmapnja20p.png" alt="Iuri's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first time I visited Iuri's portfolio, I realized how a beautiful web design mixed with storytelling can make for a masterpiece website. His portfolio is an award-winning experience, where he guides you step-by-step through his career via stunning graphics and scrolling effects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: want to create a portfolio just like Iuri? The code for his website is open-source, and you can find it&lt;a href="https://github.com/iuridepaula/portfolio" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.urosignjatovic.com/" rel="noopener noreferrer"&gt;Uroš Ignjatović&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyfq3dquye2bc097eplxc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyfq3dquye2bc097eplxc.png" alt="Uroš' portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Despite Uroš portfolio's simplicity, he did an amazing job of creating an elegant website with a traditional black and white color palette and an amazing font choice.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: the font used for this website is called "Segoe UI".&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://bruno-figueiredo.nl/index.html" rel="noopener noreferrer"&gt;Bruno Figueiredo&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBruno-Figueiredo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FBruno-Figueiredo.png" title="Bruno's portfolio homepage" alt="Bruno's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bruno's portfolio is a visually appealing website. This is possible thanks to a pleasant choice of the color purple, a great illustration to welcome visitors, and various nice scroll effects spread across the page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: if you want to adopt this website's scroll animations, you can use a library called &lt;a href="https://michalsnik.github.io/aos/" rel="noopener noreferrer"&gt;AOS&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://hakim.se/" rel="noopener noreferrer"&gt;Hakim El Hattab&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FHakim-El-Hattab.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FHakim-El-Hattab.png" title="Hakim's portfolio homepage" alt="Hakim's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want your portfolio to be uncomplicated, you can opt for the approach used by Hakim. He composed this website with a simple description of himself plus links to his work, making it for an easy yet effective way of displaying who he is to potential employers.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://jgthms.com/" rel="noopener noreferrer"&gt;Jeremy Thomas&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FJeremy-Thomas.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FJeremy-Thomas.png" title="Jeremy's portfolio homepage" alt="Jeremy's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While this is not exactly a developer portfolio aimed at getting hired for the first time, it still uses a lot of great ideas you can integrate into your design. First, Jeremy lists the company he worked with, which fits perfectly in with the principle of using, when available, social proof to impress visitors.&lt;/p&gt;

&lt;p&gt;In addition, his case study section is a magnificent example of presenting yourself as a professional. He lists every challenge he faced for each client, the solutions he adopted, and why. An approach you can use for your portfolio too.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: Don't just show your project, talk about them. Create case studies around your work, explain your challenges, choices you made and the tradeoffs you had to come up with, it will impress recruiters and give you a huge help during the interview process.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.adamhartwig.co.uk/" rel="noopener noreferrer"&gt;Adam Hartwig&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzhzydjjm1mghl2m8y1ao.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzhzydjjm1mghl2m8y1ao.png" alt="Adam's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I loved this site from the first moment I laid my eyes on it. The lively color palettes welcomes its visitors into a memorable experience, where nothing is trivial, from the animations to the way its author Adam uses them to describe his skills. I'm sure he had fun creating this portfolio, and that reflects perfectly into this piece of work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: &lt;a href="https://textillate.js.org/" rel="noopener noreferrer"&gt;Textillate.js&lt;/a&gt; is the text animations library you can use to animate your texts like Adam did.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://timroussilhe.com/" rel="noopener noreferrer"&gt;Timothèe Roussilhe&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmh2h1l3md7dq9a0my6gl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmh2h1l3md7dq9a0my6gl.png" alt="Timothèe's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This website is very simple, yet memorable thanks to a choice of colors that add an artistic aura to Timothèe's portfolio, making it very stylish and notable in the panorama of dev portfolios.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: not sure about which color palette to use for your website? Check out this free color palette generator &lt;a href="https://coolors.co/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://adamgreenough.me/" rel="noopener noreferrer"&gt;Adam Greenough&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FAndy-Patrick.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FAndy-Patrick.png" title="Adam Greenough's portfolio homepage" alt="Adam Greenough's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Adam's portfolio is simple. He uses a beautiful color and a moving background to make the website look more lively. He has some amazing projects listed, and I really appreciated his listed coding blog posts, which increase Adam's credibility as a professional.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: &lt;a href="https://www.vantajs.com/" rel="noopener noreferrer"&gt;Vanta.js&lt;/a&gt; is the library used for the background effects.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: if you ever wrote technical blog posts during your path to learn coding, add them to your website. Recruiters love to see this kind of community engagement and efforts. Actually, I landed my last dev job also thanks to my contribution online on Medium!&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://andypatrickdesign.com/" rel="noopener noreferrer"&gt;Andy Patrick&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fax914g5h4leo5iy8vhq5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fax914g5h4leo5iy8vhq5.png" alt="Andy's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As a UX designer, Andy uses a very creative approach to narrating his story, with an airplane landing through the various stages of his career, making this portfolio remarkable thanks to this minor detail, despite his simplicity in other sections.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: to create loading effects as cool as Andy's portfolio, &lt;a href="https://loading.io/css/" rel="noopener noreferrer"&gt;Loading.io&lt;/a&gt; is an impressive library I discovered for this purpose.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: sometimes a memorable animation is everything needed to make a portfolio easy to remember.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.seanhalpin.design/" rel="noopener noreferrer"&gt;Sean Halpin&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FSean-Halpin.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FSean-Halpin.png" title="Sean's portfolio homepage" alt="Sean's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This portfolio is my favorite on the entire list. The palette of pastel colors is delightful, the "Bogart" font makes the whole page look slick, and the above the folder content has the genius touch of an eye animation looking at the text, directing the user's eye where Sean wants.&lt;/p&gt;

&lt;p&gt;The author describes his work with amazing case studies, where he shows the entire process of creating a project, including his personal notes and sketches. A true masterpiece thanks to his care for details and overall look.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: You can also create a moving eyeball in CSS &lt;a href="https://lenadesign.org/2021/04/27/css-js-eye-follow-mouse-cursor-blink-on-hover/" rel="noopener noreferrer"&gt;using this tutorial&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://gillesvermeulen.be/" rel="noopener noreferrer"&gt;Gilles Vermeulen&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhhjrub2ggdq9u62oei9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhhjrub2ggdq9u62oei9.png" alt="Gille's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Despite Gille's portfolio comprising a single series of scrolling images and descriptions, he went big on creativity, with this animated character head opening to reveal all his cool projects and a background effect. A very witty approach to showcase his work in a fun way.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: never be afraid of showing personality on your portfolio, whether that's via a witty copy or an image of yourself.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.raoul-gaillard.com/" rel="noopener noreferrer"&gt;Raoul Gaillard&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRaoul-Gaillard.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRaoul-Gaillard.png" title="Raoul's portfolio homepage" alt="Raoul's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What impressed me the most about Raoul's website is his elegance in using colors, and the way he presents every detail beautifully thanks to amazing parallax effects, 3D images and a 3D matrix's background that will make you feel as if the website is constantly moving.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: Here's an amazing guide on creating&lt;a href="https://polypane.app/css-3d-transform-examples/" rel="noopener noreferrer"&gt; 3D-looking images with CSS&lt;/a&gt;. Here you can find a guide to the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d" rel="noopener noreferrer"&gt;3D matrix in HTML&lt;/a&gt; for the background effects used by Raoul.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.seanw.org/" rel="noopener noreferrer"&gt;Sean Wilson&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FSean-Wilson.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FSean-Wilson.png" title="Sean's portfolio homepage" alt="Sean's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sean's portfolio is a minimalist website. Yet, what makes it worthy of notice is his use of great copy to catch his visitors. Instead of simply presenting himself, he targets the specific audience of people in need of a website's redesign, explaining how he can help them and why he's the solution to their problem. A great example of how a well-thought copy can increase your portfolio's effectiveness.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://eli.wtf/" rel="noopener noreferrer"&gt;Eli.wtf&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgzprsl6y4fjmjsq3vpkl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgzprsl6y4fjmjsq3vpkl.png" alt="Eli's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Eli describes himself as a developer who loves creating weird websites, and his portfolio is a perfect example of that. The website has a high visual impact thanks to an initial moving skull animation, with quirky animations leading you from one page to another.&lt;/p&gt;

&lt;p&gt;He also lists the conferences he took part in as a speaker for added credibility, besides an amazing use cases section where he describes how his clients benefited from his work. Truly an amusing experience as a website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: the animations on the website were made using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" rel="noopener noreferrer"&gt;HTML's canvas API&lt;/a&gt;. I found also a CodePen explaining to you how to create a moving head animation like his, &lt;a href="https://codepen.io/EllenProbst/pen/KXxxaR" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://lbebber.github.io/public/" rel="noopener noreferrer"&gt;Lucas Bebber&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FLucas-Bebber.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FLucas-Bebber.png" title="Lucas' portfolio homepage" alt="Lucas' portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This portfolio is proof of how simplicity, when accompanied by great visuals can make for an amazing portfolio. The initial image of moving mountains make the whole project feel alive, and it welcomes users to the projects created by Lucas and live demo links to try them.&lt;/p&gt;

&lt;p&gt;Tip: here's a &lt;a href="https://codepen.io/jackrugile/pen/DrOZoY" rel="noopener noreferrer"&gt;tutorial&lt;/a&gt; on creating moving mountains like Lucas did.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://samsy.ninja/" rel="noopener noreferrer"&gt;Samsy.ninja&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FDWsb4cakXUvOEBkjz5fB-SW5dmbN8EuQpxpijD5j2IaHmZk-47XlTFv-20ec8nILctLDuTl-XGNc8nkZ-kfjXyREVvDSB-HVk2fZmIdbIujm4_xVsJEGCSA2A4MDkUwgl9sWnmmIVffj2aR85ANFvIhNS9-rGfnLCD5LJzKm8x--hUrsEx0r8UQ_G1nX0A" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FDWsb4cakXUvOEBkjz5fB-SW5dmbN8EuQpxpijD5j2IaHmZk-47XlTFv-20ec8nILctLDuTl-XGNc8nkZ-kfjXyREVvDSB-HVk2fZmIdbIujm4_xVsJEGCSA2A4MDkUwgl9sWnmmIVffj2aR85ANFvIhNS9-rGfnLCD5LJzKm8x--hUrsEx0r8UQ_G1nX0A" alt="Samsy's portfolio homepage" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Samsy's portfolio opens with a stunning effect of moving lines and a minimalistic color palette made of gray colors. I loved his approach to transitioning between sections by creating a zoom-in effect, rather than a classic scroll. Plus, every use case he lists has videos attached to it, making the experience a delight for the eyes.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://dmnsgn.me/" rel="noopener noreferrer"&gt;Damien Seguin&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FDamien-Seguin.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FDamien-Seguin.png" title="Damien's portfolio homepage" alt="Damien's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Damien describes himself as a creative developer, and that shines clearly through his portfolio. This website speaks volumes about the artistic personality of the author, showcasing his work in an easy yet remarkable way, with beautiful use cases built around his projects and great images to give the whole thing a retro, artsy look.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://luruke.com/" rel="noopener noreferrer"&gt;Luigi de Rosa&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2xqn7qxouf8u5hz4j1s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2xqn7qxouf8u5hz4j1s.png" alt="Luigi's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Luigi adopted quite an unusual color palette for his portfolio, making the result truly distinctive. Bubbles animations also helped the entire website to achieve an impressive and admirable ultimate effect.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: The bubbles on this website were realized using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d" rel="noopener noreferrer"&gt;translate3D in CSS&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.grifo.tv/" rel="noopener noreferrer"&gt;Danilo Figueiredo&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FDanilo-Figueiredo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FDanilo-Figueiredo.png" title="Danilo's portfolio homepage" alt="Danilo's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Danilo chose a text only approach to welcome users into his portfolio, which I found quite effective thanks to a great font choice (SF pro). I also appreciated his idea of mentioning the tech stack he used for each one of his use cases.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://riccardozanutta.com/" rel="noopener noreferrer"&gt;Riccardo Zanutta&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRiccardo-Zanutta.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRiccardo-Zanutta.png" title="Riccardo's portfolio homepage" alt="Riccardo's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This portfolio feels rich thanks to many small details: the rotating background matrix scattered with geometric figures, the beautiful and colored loading states, the detailed case studies (which list also the color preferences adopted for the clients), plus an experiments section which is a great idea to display creativity and willingness to try, the very essence of a developer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: I found no specific info about the effects implementation on this website, but &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d" rel="noopener noreferrer"&gt;matrix3D should do the trick&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://prashantsani.com/" rel="noopener noreferrer"&gt;Prashant Sani&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FPrashant-Sani.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FPrashant-Sani.png" title="Prashant's portfolio homepage" alt="Prashant's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I find the most beautiful thing about this portfolio is its synthwave palette, which is helped by amazing animations to display texts and loading states, plus motivational quotes placed carefully to reflect the personality of Prashant and his work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: The images on this website were realized using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d" rel="noopener noreferrer"&gt;translate3D in CSS&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://mattfarley.ca/" rel="noopener noreferrer"&gt;Matt Farley&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffy1yi1fi7ngu0lanfwlf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffy1yi1fi7ngu0lanfwlf.png" alt="Matt's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Matt's portfolio has a very simple above the folder content, with a witty description of himself and a nice illustration as a profile pic. I enjoyed how he described his skills using a table rather than classing images. He also lists the companies he worked with and specifies his coding experiments, which adds for added respect for him for showing he's a truly passionate developer.&lt;/p&gt;

&lt;p&gt;✅&lt;strong&gt;Pro Idea&lt;/strong&gt;: got some extra cool experiments you tried you could mention on your portfolio? Do it. Always show creativity and inventive .&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://robbowen.digital/" rel="noopener noreferrer"&gt;Rob Owen&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRob-Owen.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FRob-Owen.png" title="Robb's portfolio homepage" alt="Robb's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Rob's portfolio palette makes the entire website feel light and lively. What I appreciated the most about his work was the way he described himself and his work policy, opening up to his personality and adding charisma to the character. His projects section is amazing thanks to relevant projects he created, like &lt;a href="https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode" rel="noopener noreferrer"&gt;Syntwave 84&lt;/a&gt;, the popular Visual Studio Code extension.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: try &lt;a href="https://www.befunky.com/" rel="noopener noreferrer"&gt;Befunky&lt;/a&gt; to turn your website into drawing illustrations.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://michaelpumo.com/" rel="noopener noreferrer"&gt;Michael Pumo&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FMichael-Pumo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FMichael-Pumo.png" title="Michael's portfolio homepage" alt="Michael's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Michael set up a great color palette for his website, adding a unique touch to it thanks to a scrolling effect which shows you his project while keeping his description of himself always highlighted. In addition, I really appreciated his choice of images for his projects, which he accompanies with reviews and logos from his clients to show his expertise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: If you're interested in checking out the source code for this portfolio, check it out &lt;a href="https://github.com/michaelpumo/michaelpumo" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://om-sp.netlify.app/" rel="noopener noreferrer"&gt;Omar Moquete&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FOmar-Moquete.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2F2023%2F01%2FOmar-Moquete.png" title="Omar's portfolio homepage" alt="Omar's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Omar's portfolio is easy in its structure, yet very polished and with an amazing animation of an IDE greeting visitors, which is what made this creation memorable for me.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: If you're interested in how he realized his project, you can visit his open source portfolio project &lt;a href="https://github.com/omar-moquete/porfolio-sharing-version" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://ahmedzougari.com/" rel="noopener noreferrer"&gt;Ahmed Zougari&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fihulk69ikj2agswoid0m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fihulk69ikj2agswoid0m.png" alt="Ahmed's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ahmed's portfolio feels smooth, with a description of himself and a great photo. What makes it standout is his choice of the font "Fingerprint", which makes the entire website feel playful and minimalistic, thanks also to a classic black and white palette.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://alexandros.tech/" rel="noopener noreferrer"&gt;Alex Michailidis&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffojkj4t49kqm7o86j3y8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffojkj4t49kqm7o86j3y8.png" alt="Alex's portfolio homepage" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What I loved the most about interacting with Alex's award-winning portfolio was its storytelling. You can follow through with it and click on each one of his experiences to get a full description of what he did. Plus, this website gave me nostalgic feelings, with its color palette reminding me of a Linux terminal, really a well-done creation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip&lt;/strong&gt;: &lt;a href="https://animejs.com/" rel="noopener noreferrer"&gt;Anime.js&lt;/a&gt; is the library behind this website's animations.&lt;/p&gt;

&lt;h2&gt;
  
  
  The key takeaways from these portfolios
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Top portfolios always have a beautiful above the folder content, with a description of the author plus their image or illustration, and a nice background.&lt;/li&gt;
&lt;li&gt;Slick animations placed around portfolios make them memorable.&lt;/li&gt;
&lt;li&gt;Aim for a minimalistic color palette to make your web developer portfolio look neat and elegant.&lt;/li&gt;
&lt;li&gt;Most portfolios are usually a Single Page Application, with the possibility of scrolling to view through the different sections.&lt;/li&gt;
&lt;li&gt;Most portfolios list around four projects.&lt;/li&gt;
&lt;li&gt;Build case studies around your portfolio, explain which challenges you faced and how you went about solving them.&lt;/li&gt;
&lt;li&gt;Remember to always list your skills, but never use percentages to describe your knowledge of a programming language. More info about &lt;a href="https://bit.ly/3vDnQXA" rel="noopener noreferrer"&gt;this common error here&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Add testimonials if you have them available.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Creating your web developer portfolio is a serious task, but it all becomes worth it once you have a beautiful website showcasing your personality and skills to potential recruiters, becoming your secret trick to standing out during the hiring process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;P.S&lt;/strong&gt;: do you need a free video guide on how to create your web developer portfolio? &lt;a href="http://bit.ly/3ijLghO" rel="noopener noreferrer"&gt;We have created one for you here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>portfolio</category>
      <category>inspiration</category>
    </item>
    <item>
      <title>11 reasons why you should become a web developer (that aren’t just the high salary)</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Tue, 14 Feb 2023 01:56:54 +0000</pubDate>
      <link>https://forem.com/scrimba/11-reasons-why-you-should-become-a-web-developer-that-arent-just-the-high-salary-6cm</link>
      <guid>https://forem.com/scrimba/11-reasons-why-you-should-become-a-web-developer-that-arent-just-the-high-salary-6cm</guid>
      <description>&lt;p&gt;Interested in becoming a web developer, but not sure if web development is a good career?&lt;/p&gt;

&lt;p&gt;The world of web development can seem intimidating when you're just starting out. Throw post-pandemic economic uncertainty into the mix, and it's understandable if you have concerns about switching careers.&lt;/p&gt;

&lt;p&gt;Some feel that the only thing that makes becoming a developer worth it is the high salary. But in reality, web development can be a hugely rewarding, flexible, and varied career path in its own right.&lt;/p&gt;

&lt;p&gt;Of course, what you're paid will always be a major consideration when it comes to your career (good news then that despite the economic downturn, web development salaries have continued to rise!). But there's so much more to web development than the salary.&lt;/p&gt;

&lt;p&gt;In this post, we've rounded up some of the lesser-known benefits that make web development a career worth considering. Feel free to jump down the page if there's something that catches your eye! 👇&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;High demand means plenty of choice when it comes to roles 🌎&lt;/li&gt;
&lt;li&gt;You can choose a career that aligns with your values ✅&lt;/li&gt;
&lt;li&gt;Satisfying work, tangible results 💪🏻&lt;/li&gt;
&lt;li&gt;Opportunities for growth in almost any direction 🚀&lt;/li&gt;
&lt;li&gt;You can express your creativity 🎨&lt;/li&gt;
&lt;li&gt;Lots of opportunities to collaborate and pick up new skills 🤝🏻&lt;/li&gt;
&lt;li&gt;The community spirit! 🍻&lt;/li&gt;
&lt;li&gt;You can work from anywhere 💻&lt;/li&gt;
&lt;li&gt;The flexibility of freelancing 🕺🏻&lt;/li&gt;
&lt;li&gt;It can be really (really!) fun 🎉&lt;/li&gt;
&lt;li&gt;BONUS - It's well paid 💰&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  High demand means plenty of choice when it comes to roles 🌎
&lt;/h2&gt;

&lt;p&gt;Across almost every industry, web developers are in high demand. In the US alone, the number of people employed as developers is &lt;a href="https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm" rel="noopener noreferrer"&gt;forecast to grow 23% by 2031&lt;/a&gt; — much faster than other occupations.&lt;/p&gt;

&lt;p&gt;Don't get us wrong: it's not always easy to get your foot in the door as a developer. Securing that first opportunity requires hard graft, and you'll need to really put in the hours to get your skills up to scratch. But once you've got a year or so of experience under your belt, you're likely to have a lot more choice available to you than at the same point in another profession.&lt;/p&gt;

&lt;p&gt;Here are just a few examples of where a training as a web developer could take you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Creating mobile apps for an international game developer 👾&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzjtvmuookdxsxhwun04r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzjtvmuookdxsxhwun04r.png" alt="Anthony Scrimba Student worked on Call of Duty" width="800" height="714"&gt;&lt;/a&gt;&lt;br&gt;Scrimba student Anthony Moreno worked and credited on a Call of Duty title!
  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Building banking interfaces at the cutting edge of FinTech 📈&lt;/li&gt;
&lt;li&gt;Developing new learning platforms for schools and universities 🎓&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With so many companies looking for talent, web developers often have lots of freedom to try out different industries and types of organization. Many senior developers, for example, choose to hone their skills at large companies before moving to startups where they can really influence the direction of the product.&lt;/p&gt;

&lt;h2&gt;
  
  
  You can choose a career that aligns with your values ✅
&lt;/h2&gt;

&lt;p&gt;Web development is a hugely transferable skill. There aren't many organizations that don't have a web presence of some kind. So no matter where you start out, if there's an industry you really care about — for example, conservation or education - it's likely you'll be able to move into that area once you get some experience.&lt;/p&gt;

&lt;p&gt;And one of the things that make web development so great to work in is the fact that so many of the best developers started out in completely different careers. The relatively low barrier to entry of frontend web development in particular means that it's entirely possible to retrain and start a new career, even after 10, 15 or 20 years in another role.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;👉 Need proof? Check out &lt;a href="https://scrimba.com/podcast/michael-robards-coca-cola/" rel="noopener noreferrer"&gt;our recent podcast&lt;/a&gt; with Michael Robards, a career changer who became a software developer for Coca-Cola at 51!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you're in a career at the moment that you don't find fulfilling, web development might be the skill you can use to unlock a role in an area that really matters to you. And your previous experience will definitely come in handy! Skills such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;project management&lt;/li&gt;
&lt;li&gt;problem solving&lt;/li&gt;
&lt;li&gt;data analytics&lt;/li&gt;
&lt;li&gt;design&lt;/li&gt;
&lt;li&gt;team management&lt;/li&gt;
&lt;li&gt;customer research&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;... &lt;a href="https://scrimba.com/articles/web-developer-skills-needed/" rel="noopener noreferrer"&gt;and more&lt;/a&gt; are all extremely transferable to a career in web development.&lt;/p&gt;

&lt;p&gt;Long-term job satisfaction is all about balance — for example, between work you care about and work that pays you enough for the lifestyle you want. With such high demand for talent, becoming a web developer gives you enough choice to find the role with the right balance for you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Satisfying work, tangible results 💪
&lt;/h2&gt;

&lt;p&gt;We won't lie — the feeling of being able to say 'I made that!' never gets old. From solving &lt;a href="https://www.hackerrank.com/challenges/fizzbuzz/problem" rel="noopener noreferrer"&gt;FizzBuzz&lt;/a&gt; for the first time to building websites that handle millions of visits a day, a career in web development is full of the satisfaction that comes with cracking complex problems.&lt;/p&gt;

&lt;p&gt;And you don't need to train for years before you can start making cool stuff! Once you pick up the basics of frontend development, it won't be long before you can make things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Websites and blogs 💻&lt;/li&gt;
&lt;li&gt;Games and puzzles 🎲&lt;/li&gt;
&lt;li&gt;Calculators and forms 🔢&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you become a web developer, you'll be making tangible products that people use every day — which isn't something you can say about every job out there.&lt;/p&gt;

&lt;p&gt;Of course, the flip side of that is the frustration that comes with struggling to get something to work (or the stress of potentially breaking something that people rely on!). If you're easily frustrated or not a fan of problem-solving, web development might not be the role for you. But if enjoy figuring out puzzles and having the autonomy to work things out for yourself, it can be a seriously rewarding career.&lt;/p&gt;

&lt;h2&gt;
  
  
  Opportunities for growth in almost any direction 🚀
&lt;/h2&gt;

&lt;p&gt;One thing that's sometimes unclear to people before they make the move into web development is what their career progression might look like.&lt;/p&gt;

&lt;p&gt;A standard progression over the course of a career might be something broadly along the lines of: Junior Developer → Senior Developer → Tech Lead → Chief Technical Officer (CTO).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0xn5z1evkj31l3br6onj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0xn5z1evkj31l3br6onj.png" alt="General career progression as a developer" width="800" height="589"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 &lt;em&gt;Bear in mind that terminology varies between organizations, and 'Tech Lead' in one company might be 'Principal Developer' in another. Most companies also have several levels to each role, for example 'Level 2 Senior Developer.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But this path is by no means the only one available. Once you become a web developer, a wide range of careers open up to you (including setting up on your own as a freelancer!).&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you love working with and coaching people, you might move into &lt;strong&gt;team leadership&lt;/strong&gt; or &lt;strong&gt;mentoring&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;If you like getting to grips with customer problems and researching their ideal solutions, you might want to become a &lt;strong&gt;Technical Product Manager&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;If you want to craft entire systems from scratch, you could expand your skillset into &lt;strong&gt;full stack development&lt;/strong&gt; (👉 &lt;em&gt;find out more about frontend vs backend vs full stack development &lt;a href="https://scrimba.com/articles/frontend-backend-or-fullstack/" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/em&gt;)&lt;/li&gt;
&lt;li&gt;You could even move across to a lucrative role in &lt;strong&gt;technical writing&lt;/strong&gt;, crafting documentation for complex systems.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dream of becoming a technical expert who sets the direction of an entire organization? Or want to work closely with customers as an all-in-one consultant? Whatever you want from your career, a solid grounding in frontend web development will set you on the right path to achieve it.&lt;/p&gt;

&lt;h2&gt;
  
  
  You can express your creativity 🎨
&lt;/h2&gt;

&lt;p&gt;Creativity might not be the first word that many people associate with web development. But it's a much more creative career than the stereotypes would have you believe.&lt;/p&gt;

&lt;p&gt;If you become a web developer, you'll be entering a career where there's no one 'right' way to solve a problem. Creating good software requires ingenuity, imagination, and a healthy dose of flair.&lt;/p&gt;

&lt;p&gt;Web developers work closely with user experience (UX) and user interface (UI) designers to bring a design on a page to life. Developers use &lt;a href="https://scrimba.com/articles/html-css-javascript/" rel="noopener noreferrer"&gt;programming languages like HTML, CSS and JavaScript&lt;/a&gt; to add style, functionality, animation, and more to web interfaces, making them as engaging and user-friendly as possible.&lt;/p&gt;

&lt;p&gt;The best developers are often highly creative thinkers, always thinking of new ways to approach their craft. In fact, more and more web designers are teaching themselves to code, and vice versa. Having both skills in your arsenal means you can design and build products from scratch, opening up a wealth of creative possibilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lots of opportunity to collaborate and pick up new skills 🤝
&lt;/h2&gt;

&lt;p&gt;One of the best reasons to become a web developer is the opportunity it gives you to work cross-functionally with different stakeholders across your organization.&lt;/p&gt;

&lt;p&gt;In your day-to-day as a web developer, you're likely to work with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A &lt;strong&gt;product manager&lt;/strong&gt; responsible for the vision and direction of what you're building, making sure it meets the needs of the business and of customers.&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;UX designer&lt;/strong&gt; responsible for crafting the overall experience of using your product or software.&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;UI designer&lt;/strong&gt; responsible for designing the interactive elements of your product (such as buttons and menus) that you then build.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Web developers work collaboratively with these roles to craft products that run smoothly, are user-friendly, and fit the overall aims of the organization.&lt;/p&gt;

&lt;p&gt;Outside of your immediate team, you're also likely to have close contact with customer-facing roles like Customer Success Manager or Integrations Manager. You might be helping to troubleshoot a customer problem, or gathering feedback on your latest release.&lt;/p&gt;

&lt;p&gt;You might also work closely with the product marketing team to help them showcase what you've built!&lt;/p&gt;

&lt;p&gt;If you're looking for a career with plenty of variety and exposure to lots of different business functions, web development could be a really great fit.&lt;/p&gt;

&lt;h2&gt;
  
  
  The community spirit! 🍻
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm4brkhajj7xvgau0x9ty.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm4brkhajj7xvgau0x9ty.png" alt="The Scrimba community" width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The global web development community is one of the most vocal, supportive, and fast-growing communities in tech! There are countless Slack groups and Discord servers across the globe that bring web developers together to chat, solve problems and help each other out.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;👉 Check out our roundup of the &lt;a href="https://scrimba.com/articles/developer-communities/" rel="noopener noreferrer"&gt;&lt;strong&gt;top 9 web developer communities to join&lt;/strong&gt;&lt;/a&gt; to find out more!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It can be a bit counter-intuitive if you come to web development from an academic background, or any environment where googling the answer is considered 'cheating' — but web development thrives on crowdsourced knowledge and sharing solutions to common problems.&lt;/p&gt;

&lt;p&gt;From the moment you take the first step on your journey to becoming a web developer, you'll be part of a community of helpful folks around the world who can keep you motivated, inspired, and continuously learning.&lt;/p&gt;

&lt;h2&gt;
  
  
  You can work from anywhere 💻
&lt;/h2&gt;

&lt;p&gt;Working from home is no longer just an occasional luxury for most people — in fact, &lt;a href="https://www.forbes.com/sites/bryanrobinson/2022/02/01/remote-work-is-here-to-stay-and-will-increase-into-2023-experts-say/" rel="noopener noreferrer"&gt;25% of all professional jobs in the US are now fully remote&lt;/a&gt;. Most career paths now have some provision for hybrid working, either requiring a certain number of in-office days per week or leaving it completely up to the individual to decide.&lt;/p&gt;

&lt;p&gt;The digital-first nature of web development means that it's particularly well-suited to remote working. Even as a Junior Developer, &lt;a href="https://www.youtube.com/watch?v=MyiW7N7-qBs" rel="noopener noreferrer"&gt;you'll have the opportunity to work from home from anywhere in the world.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The abundance of remote-first opportunities makes web development a great career path for a huge range of people, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;👩‍👧‍👦 Parents who want the flexibility to work from home&lt;/li&gt;
&lt;li&gt;👨‍💻 Neurodivergent folk who have a preferred work setup that meets their needs&lt;/li&gt;
&lt;li&gt;✈️ Digital nomads who want to take their work with them on their travels&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But if a fully remote career isn't on your agenda, don't worry — the demand for in-office tech teams isn't going anywhere either. There are loads of benefits to having a physical workspace, including a better tech setup (second screen, anyone?) and the opportunity to hang out with colleagues you don't work closely with every day.&lt;/p&gt;

&lt;p&gt;Whether you prefer remote, hybrid, or in-office working, the high demand for web developers means that once your career gets going, you'll be able to find the right fit for your style of working.&lt;/p&gt;

&lt;h2&gt;
  
  
  The flexibility of freelancing 🕺
&lt;/h2&gt;

&lt;p&gt;Not everyone who becomes a web developer wants to work a 9-5. The good news is, freelance web developers are highly sought-after: demand grew by over 40% on freelance platform &lt;a href="https://www.upwork.com/press/releases/upwork-unveils-top-10-most-in-demand-skills-for-technology-marketing-and-customer-service-independent-talent-in-2022" rel="noopener noreferrer"&gt;Upwork&lt;/a&gt; in the year to 2022.&lt;/p&gt;

&lt;p&gt;Of course, freelancing isn't for everyone. Being employed by a company secures you perks, sick pay, a pension, and all sorts of other useful stuff. But if you want the freedom and flexibility that comes with freelancing — or want to earn some extra money on the side of your day job — becoming a web developer is a great start.&lt;/p&gt;

&lt;p&gt;We recently &lt;a href="https://scrimba.com/podcast/becoming-a-freelance-developer-with-gary-simon/" rel="noopener noreferrer"&gt;interviewed&lt;/a&gt; designer, developer and Scrimba teacher &lt;a href="https://scrimba.com/teachers/designcourse" rel="noopener noreferrer"&gt;Gary Simon&lt;/a&gt; about how he grew his freelance business from $3k a month to $100k a year. To future-proof yourself as a freelancer, Gary says, it's all about &lt;strong&gt;continuous learning&lt;/strong&gt;. Whether it's staying active on &lt;a href="https://scrimba.com/articles/developer-communities/" rel="noopener noreferrer"&gt;developer communities&lt;/a&gt; or refreshing yourself on how to rank highly for your services on Google, success as a freelancer requires a constant commitment to learning new things.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 If you want to hear more from web developers who made it work as a freelancer, check out these episodes of the Scrimba podcast 👇&lt;/p&gt;

&lt;p&gt;️🎙️ &lt;a href="https://scrimba.com/podcast/start-freelancing-no-experience/" rel="noopener noreferrer"&gt;Get started freelancing on Upwork with no experience&lt;/a&gt;&lt;br&gt;
🎙️ &lt;a href="https://scrimba.com/podcast/becoming-a-freelance-developer-with-gary-simon/" rel="noopener noreferrer"&gt;Becoming a six figure freelancer with Gary Simon&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  It can be really (really!) fun 🎉
&lt;/h2&gt;

&lt;p&gt;Web development can be hard work — it wouldn't be so well-paid if it wasn't! — but for most developers, there's absolutely no shortage of fun and exciting moments to keep you engaged.&lt;/p&gt;

&lt;p&gt;Web development is evolving at an incredibly fast pace, which means you never stop learning. From the increased accessibility of AI to exciting new developments in PWA (progressive web application) technology, there's constantly something new to discover and add to your practice.&lt;/p&gt;

&lt;p&gt;It's definitely the case that no two days are the same for a web developer. This is a career that requires constant testing and innovation to adapt to fast-changing technology and consumer behavior. And that means there are plenty of opportunities to have fun as you build (and break!) brand-new systems on a day-to-day basis.&lt;/p&gt;

&lt;p&gt;A career in development is a uniquely rewarding mix of good pay, good perks, and enjoyable, varied projects to work on (which might be why nearly 24,000 students have taken Scrimba's &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;Frontend Developer Career Path&lt;/a&gt; to date!).&lt;/p&gt;

&lt;h2&gt;
  
  
  BONUS - It's well paid 💰
&lt;/h2&gt;

&lt;p&gt;Okay, we said we wouldn't mention salaries — but this one bears repeating. Starter salaries for web developers are good (often great), and there's potential for it to be an incredibly high-earning career.&lt;/p&gt;

&lt;p&gt;We take a deep-dive into salary data in our in-depth &lt;a href="https://scrimba.com/articles/how-to-become-web-developer-guide/" rel="noopener noreferrer"&gt;guide to becoming a developer in 2023&lt;/a&gt;, but to give you a quick idea:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Average web developer salary in the USA 🇺🇸: &lt;strong&gt;$53,628-$107,028&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Average web developer salary in the UK 🇬🇧: &lt;strong&gt;£25,690-£49,434&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Average web developer salary in Australia 🇦🇺: &lt;strong&gt;A$57,500-A$100,000&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And those are just national averages: if you're, say, a Senior Developer working in London, you're likely to be earning a whole lot more.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;👉 Curious to know why web development is such a high-earning career? We recently took a &lt;a href="https://scrimba.com/articles/why-web-developers-get-paid-so-much/" rel="noopener noreferrer"&gt;deep-dive into web development salaries&lt;/a&gt; on the blog, but at a high level it boils down to: &lt;strong&gt;high demand&lt;/strong&gt;, a &lt;strong&gt;technical skillset&lt;/strong&gt;, and significant levels of &lt;strong&gt;responsibility&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What next?
&lt;/h2&gt;

&lt;p&gt;2023 is a great year to become a web developer. It's a growing field, there are more remote opportunities than ever before, and salaries are the best they've ever been.&lt;/p&gt;

&lt;p&gt;If you want to find out more about how to become a web developer in 2023, we'd recommend checking out our &lt;a href="https://scrimba.com/articles/how-to-become-web-developer-guide/" rel="noopener noreferrer"&gt;complete guide&lt;/a&gt;. In there, you'll find loads more information on web development as a career and how to get started.&lt;/p&gt;

&lt;p&gt;And if you're ready to jump in and start learning, our &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;Frontend Development Career Path&lt;/a&gt; is designed and created by industry-leading developers to transform beginners into hireable web developers. You'll learn everything from the basics of web dev to advanced interview techniques, all for the fraction of the price of a coding bootcamp.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>career</category>
      <category>developer</category>
    </item>
    <item>
      <title>6 Reasons to learn and use React in 2023</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Sat, 11 Feb 2023 02:09:26 +0000</pubDate>
      <link>https://forem.com/scrimba/6-reasons-to-learn-and-use-react-in-2023-19ij</link>
      <guid>https://forem.com/scrimba/6-reasons-to-learn-and-use-react-in-2023-19ij</guid>
      <description>&lt;p&gt;When Meta (then Facebook) announced React in 2013, it took web developers by storm.&lt;/p&gt;

&lt;p&gt;Ten years later, it's natural to wonder: &lt;strong&gt;Should I learn React in 2023?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The answer is &lt;strong&gt;yes, absolutely&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;React is still launching new features all the time and has the weight of Meta and their brilliant, dedicated engineering team behind it.&lt;/p&gt;

&lt;p&gt;The ecosystem (think add-on libraries and documentation) has reached a point of maturity, and in most places around the world, there are usually more React jobs than Angular, Vue, or Svelte.&lt;/p&gt;

&lt;p&gt;Here are 6 more reasons React is still popular in 2023.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/why-use-react/#react-isn-t-going-anywhere-anytime-soon" rel="noopener noreferrer"&gt;React isn't going anywhere anytime soon&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/why-use-react/#react-has-great-features" rel="noopener noreferrer"&gt;React has great features&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/why-use-react/#react-can-power-any-app" rel="noopener noreferrer"&gt;React can power any app&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/why-use-react/#there-are-lots-of-react-jobs" rel="noopener noreferrer"&gt;There are lots of React jobs&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍&lt;a href="https://scrimba.com/articles/why-use-react/#react-is-on-the-cutting-edge" rel="noopener noreferrer"&gt;React is on the cutting-edge&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍&lt;a href="https://scrimba.com/articles/why-use-react/#it-s-just-javascript" rel="noopener noreferrer"&gt;It's "just" JavaScript&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  React isn't going anywhere anytime soon
&lt;/h2&gt;

&lt;p&gt;When React came out in 2013, it popularised the idea of breaking down your app into components:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjldao90vuwl79bzzl7e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjldao90vuwl79bzzl7e.png" alt="Browser and UI Tree" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It was a bit unorthodox at the time (the best ideas usually are), but developers eventually warmed up the idea they could split the UI into independent, reusable pieces because working on each piece in isolation made them productive.&lt;/p&gt;

&lt;p&gt;Working with components in this way meant teams could adopt React piece by piece. Instead of converting their &lt;em&gt;whole&lt;/em&gt; application at once (which would put new features on pause and take a lot of time), developers could convert a component here, a component there, and reap the benefits of React incrementally.&lt;/p&gt;

&lt;p&gt;When I wrote that "React took web developers by storm," this is exactly how! Year after year, bit by bit, apps incrementally converted to React.&lt;/p&gt;

&lt;p&gt;Around the time React was born web apps were becoming more dynamic.&lt;/p&gt;

&lt;p&gt;Components are great for managing this newfound complexity, so developers would often react for React when working on new projects as well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffe7q97sd6nsdmorwyjnj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffe7q97sd6nsdmorwyjnj.png" alt="Static versus dynamic website example" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This unique set of circumstances (and the influence of React's creators, Meta) allowed developers to adopt React in a unique way that a new framework or library would struggle to emulate today.&lt;/p&gt;

&lt;p&gt;Ten years later, React is tried and true, and there hasn't really been a compelling reason for developers, their teams, or companies to use a new frontend &lt;a href="https://scrimba.com/articles/difference-between-framework-and-library/" rel="noopener noreferrer"&gt;library or framework&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you learn React in 2023, you can bet it's not going anywhere soon!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;ℹ️ Will Svelte take over?&lt;/p&gt;

&lt;p&gt;You might have heard of a React competitor called Svelte. Is it a threat to React?&lt;/p&gt;

&lt;p&gt;We &lt;a href="https://scrimba.com/articles/svelte-vs-react/" rel="noopener noreferrer"&gt;compared Svelte and React&lt;/a&gt; and concluded Svelte is honestly really good! It allows you to achieve the same things as React, albeit in a more concise way. &lt;strong&gt;Here's why Svelte doesn't hold a candle to React.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Svelte is a bit better, but it's not so much better that teams will rewrite their apps and learn new technology.  React also has more libraries, including &lt;a href="https://reactnative.dev/" rel="noopener noreferrer"&gt;React Native&lt;/a&gt;, which allows you to build and deploy native-feeling iOS and Android applications.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  React has great features
&lt;/h2&gt;

&lt;p&gt;React is fast, modular, and scalable. Without getting too technical, some of the top features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A slight learning curve (if you know JavaScript already)&lt;/li&gt;
&lt;li&gt;Reusable components&lt;/li&gt;
&lt;li&gt;Data binding&lt;/li&gt;
&lt;li&gt;High-performance thanks to the vDOM 📈&lt;/li&gt;
&lt;li&gt;Support for web and mobile apps with React Native&lt;/li&gt;
&lt;li&gt;Dedicated tools like React Developer Tools for easy debugging&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;React also supports advanced features you might not need today but you'll be glad for later:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Server-side rendering&lt;/li&gt;
&lt;li&gt;Efficient data-fetching&lt;/li&gt;
&lt;li&gt;Caching&lt;/li&gt;
&lt;li&gt;Error-handling&lt;/li&gt;
&lt;li&gt;SEO-friendly&lt;/li&gt;
&lt;li&gt;Dedicated deployment tools to make your live website as efficient as possible&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  React can power any app
&lt;/h2&gt;

&lt;p&gt;If you learn React, you can build from basic apps to amazing dashboards. React can be used to create any type of web application, such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Social media platforms like Facebook and Instagram&lt;/li&gt;
&lt;li&gt;E-commerce websites like Amazon and Etsy&lt;/li&gt;
&lt;li&gt;Project management tools like Asana and Trello&lt;/li&gt;
&lt;li&gt;Dashboards for data visualization and analytics like Google Analytics and Mixpanel&lt;/li&gt;
&lt;li&gt;Gaming platforms like Angry Birds and Candy Crush&lt;/li&gt;
&lt;li&gt;Video streaming websites like YouTube and Netflix&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Companies using React:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5i36nozfhj875vs7bkh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5i36nozfhj875vs7bkh.png" alt="Companies that use React" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  There are lots of React jobs
&lt;/h2&gt;

&lt;p&gt;According to the &lt;a href="https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks" rel="noopener noreferrer"&gt;Stack Overflow Developer Survey for 2021&lt;/a&gt;, React was the most popular frontend JavaScript library, with 63.5% of respondents saying they had used it. It was also the fourth most popular technology overall, with 74.5% of respondents saying that they had worked with it 🤯&lt;/p&gt;

&lt;p&gt;This shows that there is strong demand for developers who are proficient in React, and this demand will likely continue in the future.&lt;/p&gt;

&lt;p&gt;You should also know the average salary for a React developer in the United States is &lt;a href="https://www.google.com/url?q=https://www.glassdoor.com/Salaries/react-developer-salary-SRCH_KO0,15.htm&amp;amp;sa=D&amp;amp;source=docs&amp;amp;ust=1674239800937702&amp;amp;usg=AOvVaw2CjR1H-6sRfuBVj9sf0Yjk" rel="noopener noreferrer"&gt;$92,419&lt;/a&gt; per year, according to data from Glassdoor. This is higher than the average salary for a developer with experience in other frontend technologies, such as Angular or Vue.&lt;/p&gt;

&lt;p&gt;Overall, learning React is likely to be a valuable investment for frontend developers in 2023 and beyond.&lt;/p&gt;

&lt;h2&gt;
  
  
  React is on the cutting-edge
&lt;/h2&gt;

&lt;p&gt;Even though React is ten years old, it's not exactly long in the tooth 🦷!&lt;/p&gt;

&lt;p&gt;Every year, React releases updates to support the evolving demands of modern web developers.&lt;/p&gt;

&lt;p&gt;React Native, a framework for building native mobile applications using React has gained popularity in recent years and is likely to power more and more mobile applications every year.&lt;/p&gt;

&lt;p&gt;Moreover, new frameworks like &lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Next.js by Vercel&lt;/a&gt; is built on React are gaining popularity. This trend heavily suggests continued interest and investment in the React ecosystem, which will likely contribute to its future growth and development ♻️!&lt;/p&gt;

&lt;h2&gt;
  
  
  It's "just" JavaScript
&lt;/h2&gt;

&lt;p&gt;One thing that's nice about React is that it's "just" JavaScript, meaning if you already know the fundamentals of JavaScript, it might be easier to learn React than you think!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;👀 Suggested reading: &lt;a href="https://scrimba.com/articles/how-much-javascript-before-react/" rel="noopener noreferrer"&gt;How much JavaScript do you need to know before learning React?&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;React uses JSX, a syntax extension for JavaScript, which allows you to write HTML-like code in your JavaScript.&lt;/p&gt;

&lt;p&gt;If you already know HTML, this will make it much easier to learn React, as the syntax is familiar.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from 'react';
function Hola(props) {
    return &amp;lt;h1&amp;gt;Hola, {props.name}!&amp;lt;/h1&amp;gt;
}

export default Hola;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the &lt;code&gt;Hola&lt;/code&gt; component is a function that takes a &lt;a href="https://scrimba.com/articles/react-props/" rel="noopener noreferrer"&gt;props&lt;/a&gt; object as an argument and returns a JSX element.&lt;/p&gt;

&lt;p&gt;Knowing JavaScript will give you a head start, but it's important to note that React is a large and complex library, and it can take time and practice to become proficient in it.&lt;/p&gt;

&lt;p&gt;Give yourself the time you need to fully understand the concepts and build your skills.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;👀 Suggested reading: &lt;a href="https://scrimba.com/articles/how-long-to-learn-react/" rel="noopener noreferrer"&gt;How long to learn React?&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The verdict
&lt;/h2&gt;

&lt;p&gt;After considering the various technical and practical benefits of learning React, as well as the current state of the job market and the strong community of developers who use and support the library, we think it's safe to say React is a solid investment for any developer looking to expand their skills and advance their career.&lt;/p&gt;

&lt;p&gt;If you are a developer who is interested in learning React, here's my best advice as a Senior React developer:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Start with the fundamentals&lt;/strong&gt; Make sure you have a solid understanding of the core concepts of React, such as components, state, and props, before moving on to more advanced topics&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Practice, practice, practice&lt;/strong&gt; The best way to learn any new technology is to build things with it. Set aside time to work on projects and exercises, and don't be afraid to make mistakes and learn from them&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Join the community&lt;/strong&gt; React has a large and active community of developers who are always willing to help and share their knowledge. Consider joining forums, meetups, or online communities to connect with other React developers and learn from them&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep learning&lt;/strong&gt; React is a rapidly evolving library, and there is always more to learn. Make sure to keep up with the latest developments in the React ecosystem and continue to&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are many resources available for learning React, including online tutorials, video courses, and books. You are reading the Scrimba blog so of course we think you should try our free courses 😉:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://scrimba.com/learn/learnreact" rel="noopener noreferrer"&gt;Learn React for free&lt;/a&gt; is a beginner-level course that covers the fundamentals of React, including components, state, and props. This course comes with structured lessons, experienced instructors (it's the head of Scrimba, in fact!), and hands-on exercises.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://scrimba.com/learn/react" rel="noopener noreferrer"&gt;Learn advanced React&lt;/a&gt;💰 is an intermediate-level course that covers more advanced topics in React, such as hooks, performance optimization, and testing. You need to make sure your existing knowledge is rock-hard, and this course paves a great way for that and takes them to the next level!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some other popular options for learning React include :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer"&gt;The official React documentation&lt;/a&gt; is a comprehensive resource that covers all aspects of React, including core concepts, API references, and examples.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.freecodecamp.org/news/free-react-course-2022/" rel="noopener noreferrer"&gt;FreeCodeCamp's React course for 2022&lt;/a&gt; is a free, self-paced online course that covers the fundamentals of React, including components, state, and props.&lt;/li&gt;
&lt;li&gt;Fullstack React: The Complete Guide to ReactJS and Friends 💰: The Complete Guide to ReactJS and Friends is a paid book that covers the fundamentals of React and related technologies such as Redux and GraphQL.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>2023</category>
    </item>
    <item>
      <title>Will AI like ChatGPT replace programmers?</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Tue, 07 Feb 2023 13:35:50 +0000</pubDate>
      <link>https://forem.com/scrimba/will-ai-like-chatgpt-replace-programmers-50a1</link>
      <guid>https://forem.com/scrimba/will-ai-like-chatgpt-replace-programmers-50a1</guid>
      <description>&lt;p&gt;ChatGPT. Everyone's talking about it. There's tons of content where people interact with ChatGPT in amazingly creative and even frivolous ways.&lt;/p&gt;

&lt;p&gt;ChatGPT can help you plan your day, write an essay, and even make you some money (at least according to so many Tiktok videos).&lt;/p&gt;

&lt;p&gt;Developers have not been left behind. For example, &lt;em&gt;joshsowin&lt;/em&gt; on Tiktok asked ChatGPT to &lt;a href="https://www.tiktok.com/@joshsowin/video/7175217410104954158?_r=1&amp;amp;_t=8Z9nTEwenvJ" rel="noopener noreferrer"&gt;code an analog clock&lt;/a&gt;, and &lt;em&gt;A.I. Financial&lt;/em&gt; was able to create a &lt;a href="https://www.tiktok.com/@financial.ai/video/7183876471553821995?_r=1&amp;amp;_t=8Z9obAz1x5S" rel="noopener noreferrer"&gt;predictive script for Bitcoin trading&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Before you get all giddy, the big question is: just like &lt;a href="https://www.tiktok.com/@asap_blockie/video/7175079712971033857?_r=1&amp;amp;_t=8Z9okSLOzdF" rel="noopener noreferrer"&gt;&lt;em&gt;A$AP Blockie&lt;/em&gt;&lt;/a&gt; on TikTokasks, will AI take your coding job?&lt;/p&gt;

&lt;p&gt;Part of your job as a JavaScript developer involves "CRUD" operations: Create, Read, Update, and Delete. It has to do with sending and retrieving user data.&lt;/p&gt;

&lt;p&gt;"Will AI replace JavaScript developers?" or at least part of their job? Bearing in mind that CRUD operations are overly repetitive, and AI automates repetitive tasks?&lt;/p&gt;

&lt;p&gt;Let's go on a journey to explore the question, "Will AI make programmers obsolete?" and more.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/#so-will-ai-replace-javascript-developers" rel="noopener noreferrer"&gt;Will AI replace JavaScript developers?&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/how-does-ai-write-code" rel="noopener noreferrer"&gt;How does AI write code?&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/#examples-of-programming-tasks-ai-is-already-doing-well" rel="noopener noreferrer"&gt;Examples of programming tasks AI is already doing well&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/what-limitations-does-ai-have" rel="noopener noreferrer"&gt;What limitations does AI have?&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/#will-learning-to-code-be-worth-it-in-the-near-future" rel="noopener noreferrer"&gt;Will learning to code be worth it in the near future?&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📍 &lt;a href="https://scrimba.com/articles/will-ai-replace-programmeres/#the-verdict" rel="noopener noreferrer"&gt;The verdict&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  So, will AI replace JavaScript developers?
&lt;/h2&gt;

&lt;p&gt;There are two schools of thought here. There are people who see AI as another tool in developers' arsenals to help increase productivity.&lt;/p&gt;

&lt;p&gt;On the other hand, the second school of thought is that AI will get so good that it will replace programmers. Hello ChatGPT?&lt;/p&gt;

&lt;p&gt;Let's think about a scenario where a JavaScript developer needs to use a code generator or assistant like ChatGPT, AlphaCode, Co-Pilot, Codex, CodeQL, SonarQube, or Coverity.&lt;/p&gt;

&lt;p&gt;Let's ask ChatGPT to generate code to connect our database to our endpoints.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4n24bem3q0vr24gigasw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4n24bem3q0vr24gigasw.png" alt="a screenshot asking ChatGPT to generate code to connect our database to our endpoints" width="800" height="297"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ChatGPT prompts us back, asking for more information about our specific use case and the technology stack.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fweb0q8vzvsikv7oyfcs4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fweb0q8vzvsikv7oyfcs4.png" alt="a screenshot of ChatGPT prompting us back, asking for more information about our specific use case and the technology stack" width="800" height="638"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The assistant generates the code snippet, but you still have to tweak it to fit your particular use case, for example, by taking care of the specific versions of the tools you are using.&lt;/p&gt;

&lt;p&gt;Depending on whether your code is in development or production, you might also want to make sure that sensitive information is hidden.&lt;/p&gt;

&lt;p&gt;You could have gotten the same information from Stack Overflow. The only difference is that with ChatGPT, you don't get to read through several answers.&lt;/p&gt;

&lt;p&gt;Let's further explore the question, "Will AI make programmers obsolete?"&lt;/p&gt;

&lt;h2&gt;
  
  
  How does AI write code?
&lt;/h2&gt;

&lt;p&gt;If all this talk about AI writing its own code sounds complex or confusing, let's take a step back and have a look at the "behind the scenes" of how it all works.&lt;/p&gt;

&lt;p&gt;Before we define AI, let's talk about programming. Programming is the process of writing instructions for a computer to follow so as to achieve a particular goal.&lt;/p&gt;

&lt;p&gt;This set of instructions is known as a "program."&lt;/p&gt;

&lt;p&gt;You can write a program for an e-commerce site like Amazon. For example. The instructions would be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A customer logs in.&lt;/li&gt;
&lt;li&gt;Goes through the item catalog.&lt;/li&gt;
&lt;li&gt;Chooses an item.&lt;/li&gt;
&lt;li&gt;Adds it to the cart.&lt;/li&gt;
&lt;li&gt;Checks out.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For the above instructions to be carried out, a lot of things need to take place. The user details need to be confirmed, for example.&lt;/p&gt;

&lt;p&gt;The instructions, therefore, need to be very specific.&lt;/p&gt;

&lt;p&gt;AI, or artificial intelligence, can be seen as "advanced programming." In addition to writing instructions for a computer to follow, we also "teach" it some human intelligence. For example, we "teach" AI to identify cat images.&lt;/p&gt;

&lt;p&gt;This happens through a very complex process known as machine learning (ML). In ML, there are models (which represent real-world concepts). Programmers train these models using real-world data.&lt;/p&gt;

&lt;p&gt;For example, a programmer can train a machine learning model to identify cat images. To do so, the model has to "see" lots of cat images. Over time, the model will identify the patterns that help it distinguish between a cat and something that is not a cat (something called "unsupervised learning").&lt;/p&gt;

&lt;p&gt;The same thing happens with code — a model goes through lots of code or is "trained" via large amounts of code. Over time, it begins to identify the patterns that "define" code. Eventually, it will be able to generate some code.&lt;/p&gt;

&lt;p&gt;This is what happened with ChatGPT. ChatGPT is basically a machine learning model that was trained with a lot of data from the internet, including code. The model on which ChatGPT was trained is called GPT-3 (Generative Pre-trained Transformer 3).&lt;/p&gt;

&lt;p&gt;It then used an ML concept called reinforcement learning, where models are "rewarded" for accuracy and consistency.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fes43ozx1xj2au6ulw74p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fes43ozx1xj2au6ulw74p.png" alt="Screenshot showing ChatGPT Limitation" width="800" height="719"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In addition, there were also human AI trainers that helped frame conversations between humans and an AI. The conversations were then "fed" into the models. This is referred to as Reinforcement Learning from Human Feedback (RLHF).&lt;/p&gt;

&lt;p&gt;ChatGPT is currently available for free in the research phase.&lt;/p&gt;

&lt;p&gt;Now that we know how AI writes code, will AI replace JavaScript developers? Let's keep going to find out.&lt;/p&gt;

&lt;h2&gt;
  
  
  Examples of programming tasks AI is already doing well
&lt;/h2&gt;

&lt;p&gt;Now that AI is more advanced and there's more infrastructure to handle large data sets, will AI make programmers obsolete?&lt;/p&gt;

&lt;p&gt;In this section, we look at some programming tasks that AI is doing well.&lt;/p&gt;

&lt;h3&gt;
  
  
  Coding competitions
&lt;/h3&gt;

&lt;p&gt;Coding competitions attract lots of developers, and for good reason. They are a good way for programmers to bolster their problem-solving skills. This way, they end up becoming better at their craft.&lt;/p&gt;

&lt;p&gt;Moreover, there are also enviable prizes to be won.&lt;/p&gt;

&lt;p&gt;AlphaCode is an ML model built for coding competitions. This far, it has ranked among the top 54% in coding competitions on sites like Codeforces, where there are tens of thousands of participants.&lt;/p&gt;

&lt;p&gt;Who knows, AI might soon change how hackathons — coding competitions where you get to build a solution within a very short period of time (between 2 and 3 days) — are done.&lt;/p&gt;

&lt;h3&gt;
  
  
  Debugging
&lt;/h3&gt;

&lt;p&gt;Debugging is a necessary part of writing code. This is because developers need to deliver code that works according to a specified user story.&lt;/p&gt;

&lt;p&gt;Remember our "list of instructions" for an e-commerce site? They can be rewritten into user stories, which are more customer-focused.&lt;/p&gt;

&lt;p&gt;Instead of "a customer logs in," we can have something like "as Jaime, I would like to be able to log in to my account."&lt;/p&gt;

&lt;p&gt;User stories and debugging are some coding best practices that every developer needs to learn in order to deliver a great product.&lt;/p&gt;

&lt;p&gt;You can imagine what would happen if anyone was able to log in using Jaime's account. They could steal their credit card information, for example.&lt;/p&gt;

&lt;p&gt;Let's not even get started with all the regulations around PII (personally identifiable information), like GDPR.&lt;/p&gt;

&lt;p&gt;This is why debugging is important. It helps to identify aspects of your code you might have overlooked, for example, confirming Jaime's credentials before logging in.&lt;/p&gt;

&lt;p&gt;The only downside to debugging is that it can get quite time-consuming. While writing tests (another programming best practice) helps with debugging, sometimes a developer can get absolutely "stuck."&lt;/p&gt;

&lt;p&gt;They may not be able to identify an error or how to fix it. They spend hours on the internet and on sites like Stack Overflow trying to find out whether other people have experienced similar errors and how to solve them.&lt;/p&gt;

&lt;p&gt;The good news is that with AI tools like ChatGPT and SonarQube (a code review tool), debugging becomes a faster process.&lt;/p&gt;

&lt;p&gt;AI can therefore be used for pair programming, where it helps you write and debug code.&lt;/p&gt;

&lt;h4&gt;
  
  
  Let's look at a ChatGPT debugging example.
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fub5kaypumi45ol2hvoky.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fub5kaypumi45ol2hvoky.png" alt="a screenshot of ChatGPT Generating code" width="800" height="861"&gt;&lt;/a&gt;&lt;br&gt;Image source: &lt;a href="https://twitter.com/amasad/status/1598042665375105024/photo/1" rel="noopener noreferrer"&gt;https://twitter.com/amasad/status/1598042665375105024/photo/1&lt;/a&gt;&lt;br&gt;

  &lt;/p&gt;

&lt;p&gt;A practical use case of the above example is where you might have just learned about the JavaScript &lt;code&gt;setTimeout()&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;You may not understand the output (why it keeps printing "5"). Don't you have a for loop with a condition that checks the value of &lt;em&gt;i&lt;/em&gt; every time, (if &lt;em&gt;i&lt;/em&gt; &amp;lt; 5)?&lt;/p&gt;

&lt;p&gt;Why does it print 5 in the first place, yet the loop should stop when the condition is no longer being met?&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;setTimeout()&lt;/code&gt; method sets a timer to execute a piece of code when the timer expires.&lt;/p&gt;

&lt;p&gt;As you can see, ChatGPT not only points out the bug or error but also suggests a way to fix it.&lt;/p&gt;

&lt;p&gt;Note that ChatGPT was not built as a debugger. It is a model that is meant to generate language and code (since code is written in programming languages).&lt;/p&gt;

&lt;p&gt;The fact that you can "push" it to debug code means that we already have a framework and blueprint for an AI that can eventually be built to specialize in debugging and generating code.&lt;/p&gt;

&lt;p&gt;This would make debugging way faster and easier in the near future, saving developers copious amounts of time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code generation
&lt;/h3&gt;

&lt;p&gt;As we have seen in the previous example, AI can help you debug code. In addition, it can generate code from prompts written in human language.&lt;/p&gt;

&lt;h4&gt;
  
  
  A ChatGPT code generation example
&lt;/h4&gt;

&lt;p&gt;Let's ask &lt;a href="https://chat.openai.com/" rel="noopener noreferrer"&gt;ChatGPT&lt;/a&gt; to generate a code snippet that can help run the Fibonacci sequence. Its response:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flm4zrcw8aytqf13xho1n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flm4zrcw8aytqf13xho1n.png" alt="a screenshot of ChatGPT Generating code" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The follow-up prompt was to ask ChatGPT to generate a code snippet for the Fibonacci sequence. It did so in Python.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4osttw98f91npc6gxr9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4osttw98f91npc6gxr9.png" alt="a screenshot of ChatGPT Generating code" width="800" height="579"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, it generated a code snippet in Python and explained the code precisely — the different components, and expected output.&lt;/p&gt;

&lt;p&gt;Next prompt: convert the code snippet from Python to Javascript.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl8kv8e886z9tbcddlhgi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl8kv8e886z9tbcddlhgi.png" alt="a screenshot of ChatGPT Generating code" width="800" height="551"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Again, ChatGPT converted the code from Python to Javascript and explained it too, stating the expected output.&lt;/p&gt;

&lt;h2&gt;
  
  
  What limitations does AI have?
&lt;/h2&gt;

&lt;p&gt;We have learned that AI can do some cool and phenomenal things. However, will AI replace web developers?&lt;/p&gt;

&lt;p&gt;The good news is that it won't happen. At least not yet. This is because there are a few things AI has yet to figure out and some challenges it has yet to overcome. Let's explore them further.&lt;/p&gt;

&lt;h3&gt;
  
  
  Legal issues
&lt;/h3&gt;

&lt;p&gt;When an AI uses data from the internet as part of its training data set, there are bound to be legal issues, especially with copyright, intellectual property, and licenses. For example, Codex's neural network (the OpenAI model Copilot is based on) was trained via billions of lines of code stored on GitHub in order to learn how to write code.&lt;/p&gt;

&lt;p&gt;We don't know whether it only used code from public GitHub repositories or under free distribution licenses.&lt;/p&gt;

&lt;p&gt;Recent research from MIT, on the other hand, shows that &lt;a href="https://news.mit.edu/2022/synthetic-data-ai-improvements-1103" rel="noopener noreferrer"&gt;machine learning models trained with synthetic data&lt;/a&gt; can sometimes be more accurate than those trained with real-world data.&lt;/p&gt;

&lt;p&gt;This could help with copyright issues. It would raise problems like working excellently in isolated cases (something referred to as "local maxima") but failing miserably at generalization.&lt;/p&gt;

&lt;p&gt;For accurate results, a good ML model must be able to generalize data well.&lt;/p&gt;

&lt;p&gt;Let's delve into accuracy when it comes to AI.&lt;/p&gt;

&lt;h3&gt;
  
  
  Accuracy
&lt;/h3&gt;

&lt;p&gt;AI models like ChatGPT do give incorrect responses. In fact, in December 2022, &lt;a href="https://www.theverge.com/2022/12/5/23493932/chatgpt-ai-generated-answers-temporarily-banned-stack-overflow-llms-dangers" rel="noopener noreferrer"&gt;answers from ChatGPT were temporarily banned from StackOverflow&lt;/a&gt; due to inaccuracy.&lt;/p&gt;

&lt;p&gt;The AI does caution about its accuracy limitations, though.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F29o7of9uwyfxrh4fjb49.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F29o7of9uwyfxrh4fjb49.png" alt="Screenshot showing ChatGPT Limitation" width="800" height="713"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The AI gives inconsistent responses as you tweak consecutive prompts. Besides, even when it's plainly wrong, it sounds really confident.&lt;/p&gt;

&lt;p&gt;Another aspect that affects chatGPT's accuracy is the fact that it was trained with data until the beginning of 2022.&lt;/p&gt;

&lt;p&gt;This makes it impossible to show current data. If you ask for current information, it says that it is unable to search the internet.&lt;/p&gt;

&lt;p&gt;In addition, ChatGPT responses are inherently biased. It can, as a result, respond to harmful prompts or give inappropriate responses.&lt;/p&gt;

&lt;p&gt;ChatGPT is also too wordy and uses the same phrases over and over, like saying again and again that it is a language model trained by OpenAI.&lt;/p&gt;

&lt;p&gt;The company behind ChatGPT, OpenAI, on the other hand, is eager to address its model's limitations. This could hopefully resolve the inaccuracies and biases in the future.&lt;/p&gt;

&lt;h3&gt;
  
  
  The need for human input
&lt;/h3&gt;

&lt;p&gt;While AI is doing &lt;a href="https://www.tiktok.com/@quiet_coder12/video/7184091274708864283?_r=1&amp;amp;_t=8Yuj8KTrjXi&amp;amp;is_from_webapp=v1&amp;amp;item_id=7184091274708864283" rel="noopener noreferrer"&gt;a great job at code generation&lt;/a&gt;, it still needs input from humans to write code that actually works.&lt;/p&gt;

&lt;p&gt;For example, when ChatGPT was asked to &lt;a href="https://www.tiktok.com/@quiet_coder12/video/7184091274708864283?_r=1&amp;amp;_t=8Yuj8KTrjXi&amp;amp;is_from_webapp=v1&amp;amp;item_id=7184091274708864283" rel="noopener noreferrer"&gt;write a game in pure Javascript, HTML, and CSS&lt;/a&gt;, it did not give a complete response when asked to add the specified functions.&lt;/p&gt;

&lt;p&gt;Moreover, it still needed more prompts to generate code that worked as expected.&lt;/p&gt;

&lt;p&gt;So, will AI replace web developers? Not really.&lt;/p&gt;

&lt;h2&gt;
  
  
  Will learning to code be worth it in the near future?
&lt;/h2&gt;

&lt;p&gt;Despite the advancements that we are seeing in AI, coding will still be an important skill in the near future.&lt;/p&gt;

&lt;p&gt;Let's imagine for a moment that an AI like ChatGPT can write perfect code.&lt;/p&gt;

&lt;p&gt;First, we'll still need humans who understand code to write appropriate prompts for AI to use. Secondly, a programmer needs to "verify" that the generated code actually works for their particular use case.&lt;/p&gt;

&lt;p&gt;Thirdly, we need humans to think about other aspects of the software that is being built---the user experience and other constraints that may affect performance and scalability.&lt;/p&gt;

&lt;p&gt;For example, programmers will need to make decisions on the best software combination to go with to ensure that it can handle traffic spikes.&lt;/p&gt;

&lt;p&gt;In short, there are things AI cannot do yet, so learning to code is still a great idea. So, will AI replace JavaScript developers? Highly unlikely.&lt;/p&gt;

&lt;p&gt;Code generation tools are "assistants." There's a reason why Github's code-generating tool is called Co-pilot. It is helping you "navigate" through your code, rather than taking over the pilot's seat.&lt;/p&gt;

&lt;p&gt;As we mentioned, AI would work great for pair programming. You become the navigator, instructing it, and it generates code as the driver.&lt;/p&gt;

&lt;p&gt;We cannot ignore the fact that AI is getting better at learning. Who knows? We might see a decrease in demand for coding skills.&lt;/p&gt;

&lt;p&gt;We might actually be very wrong. There's a book called "&lt;a href="https://www.amazon.com/Optimism-Bias-Irrationally-Positive-Brain/dp/0307473511" rel="noopener noreferrer"&gt;Optimism Bias&lt;/a&gt;" by Tali Sharot, and it scientifically explains why humans are wired to misinterpret the reality of circumstances and how grossly inaccurate we can get with predicting our own futures.&lt;/p&gt;

&lt;p&gt;So, AI might actually be coming for web development jobs 🤭&lt;/p&gt;

&lt;h2&gt;
  
  
  The verdict
&lt;/h2&gt;

&lt;p&gt;So, will AI replace JavaScript developers? We have gone on a wild ride where we have explored some ways that people are imaginatively using AI, from making their lives and work easier to generating code.&lt;/p&gt;

&lt;p&gt;We then dove deeper into questions around "Will AI make programmers obsolete?" We defined how AI generates code — the "behind the scenes" of how AI "writes" code.&lt;/p&gt;

&lt;p&gt;We also looked at some examples of where AI is thriving as well as some of its limitations. Finally, we concluded that learning to code is still a valuable skill in the wake of AI advancements.&lt;/p&gt;

&lt;p&gt;It is important to note that AI will keep getting better, and it might be a smart move to upskill and acquire advanced skills like DevOps in the future. Or stay alert for new jobs that will be created as a result of AI.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>It’s okay to change your mind about your career</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Tue, 03 Jan 2023 16:02:32 +0000</pubDate>
      <link>https://forem.com/scrimba/its-okay-to-change-your-mind-about-your-career-26bd</link>
      <guid>https://forem.com/scrimba/its-okay-to-change-your-mind-about-your-career-26bd</guid>
      <description>&lt;p&gt;It doesn't matter what you look like or where you're from. Anyone can become a professional software developer. I did! And in this post, I'll show you how you can too. It takes a lot of dedication and a pinch of luck.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;University&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Some people who enroll in university have their career path all figured out. My journey has more twists and turns.&lt;/p&gt;

&lt;p&gt;After studying International Business for Asia, I felt pressure to get a job that put my expensive degree to good use. Yet, none of the opportunities spoke to me.&lt;/p&gt;

&lt;p&gt;I don't consider myself exceptional, and companies wanted the brightest and youngest minds with lots of experience didn't help either. &lt;strong&gt;I was clueless about what I wanted to do with my life.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Eventually, I found an opportunity to move from the Netherlands to Greece and work as a Customer Support Agent for Google.&lt;/p&gt;

&lt;p&gt;The chance to move and work for Google sounded great initially, but the work wasn't very rewarding for me.&lt;/p&gt;

&lt;p&gt;Around this time I reflected on my past experiences and realized coding might be a good fit for me. But where to start on a budget?&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;I failed to learn to code&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;A few years earlier, as part of my studies, I was fortunate to work as an intern at a coding school in Kuala Lampur.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpwsgbrxgptu0buccd1e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpwsgbrxgptu0buccd1e.png" alt="intern at a coding school" width="800" height="584"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I wasn't a coding student, but I wished I was!&lt;/p&gt;

&lt;p&gt;I tried to teach myself code in my spare time, but I couldn't do it back then.&lt;/p&gt;

&lt;p&gt;Data science, Python, and SQL spoke to me, but it all turned out to be much more challenging than I anticipated.&lt;/p&gt;

&lt;p&gt;Learning to code was going to take a dedicated push, but I was already committed to my degree. So I quit coding.&lt;/p&gt;

&lt;p&gt;Thankfully, that isn't the end of the story.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Attempting it again&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When churning through support tickets at Google, I reflected on what I wanted to spend the rest of my career doing.&lt;/p&gt;

&lt;p&gt;That is when I remembered my experience at the coding boot camp and my itch to learn to code! Still, I wasn't sure where to start.&lt;/p&gt;

&lt;p&gt;When I worked at the boot camp, I learned about the different places you can start to learn to code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Bootcamps like Le Wagon&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Courses&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Books&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;YouTube&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;University&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The thought of learning to code in an exotic place like Bali appealed to me, but not so much to my wallet! So I had to look for an affordable alternative. That's when I discovered freeCodeCamp!&lt;/p&gt;

&lt;p&gt;On freeCodeCamp, I learned the basics of HTML and CSS, which got the ball rolling. I love freeCodeCamp and appreciate how they make coding accessible to all!&lt;/p&gt;

&lt;p&gt;When I continued and started learning about JavaScript, things got more challenging. It felt like the time I tried to grok coding before and quit. That scared me. Quitting was not an option this time, so I pushed through.&lt;/p&gt;

&lt;p&gt;If you're learning to code and find it difficult, don't &lt;strong&gt;stop!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I was very tempted to call it a day and decide that programming was not for me. It would've been the easy way out. But something inside me kept the flame burning. Maybe I needed another resource? One that suited my particular learning style.&lt;/p&gt;

&lt;p&gt;I opened Google and started looking for a JavaScript course, and that is when I came across a 7-hour JavaScirpt course on Scrimba by Per Borgen.&lt;/p&gt;

&lt;p&gt;Per? Never heard of him. Scrimba? I never heard of them either. A seven-hour long course! Who in the right mind watches a course that long? Well, I did! And if you want to learn to code and are on a budget, I highly recommend watching the same (introductory) course on JavaScript!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Learning to code is a marathon.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Although you'll sometimes see stories about prodigies who learn to code in 3 months, that is not typical. Most people need to stay consistent for many months, which can be lonely.&lt;/p&gt;

&lt;p&gt;Upon reflection, freeCodeCamp lacked human interaction compared to Scrimba. On freeCodeCamp, I was staring at a screen, trying to make sense of what was happening. Scrimba has this interactive editor that makes it feel like you're coding alongside the teacher. Not only did this make my learning more engaging, but it also helped me get a better grasp of JavaSCript and thinking like a programmer in general.&lt;/p&gt;

&lt;p&gt;After following their free course, I upgraded my account to enroll in the pro javascript and CSS courses.&lt;/p&gt;

&lt;p&gt;You don't have to spend money to learn to code. However, if you're serious about learning to code and have the financial ability, I can say that Scrimba provides a 'bang for your buck.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;When are you ready to apply?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;My goal was to become a professional developer, but no one tells you when you're "ready" to start applying. Much less when you're self-taught.&lt;/p&gt;

&lt;p&gt;Reading job descriptions it's easy to count yourself out. I did until I heard some golden advice, which I want to share with you.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Job descriptions are basically just wish lists for employers.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;If an employer found a candidate that meets every requirement, this person would be over-skilled and probably lose interest rather quickly.&lt;/p&gt;

&lt;p&gt;If a job description mentions the experience needing at least two to three years, applying with zero to one year of experience is sometimes viable.&lt;/p&gt;

&lt;p&gt;If you've been coding for a while and built some cool projects demonstrating your abilities, you may be nearing the level needed to apply for junior roles.&lt;/p&gt;

&lt;p&gt;In general, you'll always feel a little bit insecure, and that's normal. Also, remember that personal circumstances may affect when you (want to) start applying. Go with your gut. It's usually right.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;How I found my first developer job&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;I started applying a bit on the early side and received a lot of rejections. That is okay! Every time I got rejected, I felt more comfortable with rejection and even realized a few mistakes I could correct to improve.&lt;/p&gt;

&lt;p&gt;I sent out applications via email, on the company's websites, LinkedIn, and Indeed. Getting noticed as a junior web developer is tough.&lt;/p&gt;

&lt;p&gt;So I tried to tailor my LinkedIn profile as best as possible and include complete information.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frf1g1jv2m1mezmhs48de.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frf1g1jv2m1mezmhs48de.png" alt="tailored linkedin profile" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This means,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;writing an introduction&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;listing your education and experience (even if it's not tech-related)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Make sure to include some skills and certificates.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It can make a difference!&lt;/p&gt;

&lt;p&gt;Still, after applying, I didn't get any interviews or jobs. Getting interviews as someone with just five months of experience is difficult. I think I should have waited a bit longer, but your experience might be different.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzkose74498zv62layqwj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzkose74498zv62layqwj.png" alt="Yin Chu Personal Website" width="800" height="550"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When looking for your first job in tech, you need luck. You always need luck, but especially so in this case. Because even though you're (mostly) applying for junior positions, there will always be applicants with more experience. Then, it doesn't matter how driven you are or how bad you want to prove to them that you can do it. Employers often go with the most experienced pick, how unfair that may seem sometimes. That's why you need luck and time on your side.&lt;/p&gt;

&lt;p&gt;I have done about five to eight interviews and only made it to the second round of interviews once.&lt;/p&gt;

&lt;p&gt;But then, suddenly, I received an email from a company that wanted to speak with me. And it went well.&lt;/p&gt;

&lt;p&gt;Within a &lt;strong&gt;&amp;lt;span&amp;gt;&lt;/strong&gt; (see what I did there?) of nine days, I had my second interview, completed a small coding challenge, and accepted their offer!&lt;/p&gt;

&lt;p&gt;I want to stress that I was very lucky and that, with my experience, I should have waited longer to apply.&lt;/p&gt;

&lt;p&gt;Getting a job quickly is possible (especially if you pick up the necessary skills and thrive at it), but it's better to play the long game! Make sure you know your stuff. The rest will come naturally.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;I wish I had spent more time on JavaScript&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;J A V A S C R I P T!&lt;/strong&gt; If you learn frontend web development, chances are you'll learn JavaScript. If you do, I urge you to spend &lt;strong&gt;a lot&lt;/strong&gt; of time with this language, get &lt;strong&gt;really&lt;/strong&gt; comfortable and try to understand it as best as possible.&lt;/p&gt;

&lt;p&gt;I recognize that I should have spent maybe two to three months longer learning the ins and outs of JavaScript. Did it work out in the end? Yes. Am I confident I know enough JavaScript to do my job and complete a project? Yes! However, I would have found success more smoothly if I had spent more time learning the language. You might too.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Misconceptions&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When you first start learning to code, it's important to understand that you &lt;strong&gt;do not&lt;/strong&gt; need to remember all the syntax by heart. You need to comprehend the core concepts, know how to Google your problem, and read existing code in such a way that you can say, 'ah! If I use this (snippet) and change X to Y, I can make my program work!'.&lt;/p&gt;

&lt;p&gt;When you see memes saying that software engineering is mostly just copying code from Stack Overflow, it's not all a lie.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ykk7m6xlawvav09cgp4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ykk7m6xlawvav09cgp4.png" alt="life of a software dev meme" width="800" height="1182"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most of your time, you'll be searching the internet for a solution to your problem. This brings me to my second point, problem-solving.&lt;/p&gt;

&lt;p&gt;Although difficult to 'just learn', I would have wanted to spend more time trying to solve (complex) coding challenges on, say Codewars. This is because problem-solving is extremely important. Building websites isn't all hard-coded HTML, so you need to be able to build custom-made solutions. You'll then run into problems that you need to solve.&lt;/p&gt;

&lt;p&gt;My Asian roots are letting me down once more because problem-solving doesn't come naturally to me. I want to stress the fact that that's okay! With practice, I can and will get better at it. And so can and will you!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It's not always about being a natural-born talent. Hard work and dedication can also get you to your destination.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The verdict&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyx2boqld2c6uk8qcji4n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyx2boqld2c6uk8qcji4n.png" alt="Image of Yin Chu" width="800" height="789"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Getting started with learning to code can be daunting. There are absolutely zero guarantees as to whether you will succeed.&lt;/p&gt;

&lt;p&gt;It's important to pick resources that will help &lt;strong&gt;you&lt;/strong&gt; become a software developer. While Scrimba worked for me, another resource might be your best pick. Don't go with the flock. Find your preferred learning method through trial and error. This will ensure the fundamentals are set correctly.&lt;/p&gt;

&lt;p&gt;When you have found the right platform for you, it's time to start learning. You absolutely need two key things to succeed: &lt;strong&gt;dedication&lt;/strong&gt; and &lt;strong&gt;consistency&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If you learn to code while working or studying full time, hats off to you. Recognise that makes everything harder.&lt;/p&gt;

&lt;p&gt;Regardless of your situation, you will need to stay dedicated to your goal and stay consistent. It's better to code an hour every day than eight to ten hours one day a week.&lt;/p&gt;

&lt;p&gt;From going to university to doing something I never thought I would/could do, it's all possible with dedication and consistency.&lt;/p&gt;

&lt;p&gt;What you do in life doesn't always need to be set in stone.&lt;/p&gt;

&lt;p&gt;As you can see, even if you are college-educated and sort of have an idea in which industry you end up working, it doesn't necessarily mean it's your passion. Have an open mind, and learn new things. And if you studied for something and did choose a profession in that industry, totally fine too, obviously.&lt;/p&gt;

&lt;p&gt;If you're a career switcher like me or are thinking about switching careers to tech, know it's possible. It's never too late. Although I'm still young, plenty of people have achieved greatness at an older age. Don't let that be the deciding factor in choosing against it.&lt;/p&gt;

&lt;p&gt;I believe in you!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>career</category>
      <category>careerswitch</category>
    </item>
    <item>
      <title>Smart goals don't work for software developers. Focus on this instead.</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Wed, 21 Dec 2022 14:23:10 +0000</pubDate>
      <link>https://forem.com/scrimba/smart-goals-dont-work-for-software-developers-focus-on-this-instead-1fbg</link>
      <guid>https://forem.com/scrimba/smart-goals-dont-work-for-software-developers-focus-on-this-instead-1fbg</guid>
      <description>&lt;p&gt;Learning to code takes a lot longer than most people think!&lt;/p&gt;

&lt;p&gt;When things take a lot longer than you planned for that's when you start to feel like you are behind and risk quitting.&lt;/p&gt;

&lt;p&gt;It's a dangerous mindset to get into.&lt;/p&gt;

&lt;p&gt;Even though some people learn to code and find a job in 3 months, &lt;a href="https://scrimba.com/articles/how-long-to-learn-code/" rel="noopener noreferrer"&gt;it takes most folks 12 months or more&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;When you accept it might take a year to learn to code well enough to be considered hireable you also accept you cannot rely on motivation to keep you on-track.&lt;/p&gt;

&lt;p&gt;365 days is too long to rely on motivation alone.&lt;/p&gt;

&lt;p&gt;You need a plan!&lt;/p&gt;

&lt;p&gt;Settings goals sounds like a good place to start, but it doesn't matter how SMART they are. I know from experience - &lt;strong&gt;goals almost never work for new developers&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When I was teaching myself to code, I struggled to set attainable goals because I could never predict how hard I would find a new subject and, therefore, how long it would take.&lt;/p&gt;

&lt;p&gt;That's around the time I discovered a powerful productivity hack in the book &lt;a href="https://jamesclear.com/atomic-habits" rel="noopener noreferrer"&gt;Atomic Habits&lt;/a&gt; called &lt;strong&gt;systems&lt;/strong&gt; and it completely changed the game for me.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎯 A goal tells you where to score&lt;/li&gt;
&lt;li&gt;♻️ A system tells you what you need to do every day to move forward and actually score and win&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Systems involve &lt;strong&gt;daily routines&lt;/strong&gt;, &lt;strong&gt;rules&lt;/strong&gt;, &lt;strong&gt;fail-safes&lt;/strong&gt;, and &lt;strong&gt;habits&lt;/strong&gt; you practice daily to move forward in a broad direction you value.&lt;/p&gt;

&lt;p&gt;This post will break down some of the key ideas in Atomic Habits with lots of examples and stories specific to developers.&lt;/p&gt;

&lt;p&gt;First, let's take a closer look at why goals rarely work for new developers specifically.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why goals almost never work for new developers
&lt;/h2&gt;

&lt;p&gt;Common wisdom says to get what we want in life, we should set smart goals, but they almost never work.&lt;/p&gt;

&lt;p&gt;So what's this big conspiracy against goals?&lt;/p&gt;

&lt;p&gt;There are 2 big problems:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Goals lock you into a destination at a time when you're learning lots of new information.&lt;/li&gt;
&lt;li&gt; Goals reduce your happiness until the next milestone&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Problem #1: Goals lock you into a destination
&lt;/h3&gt;

&lt;p&gt;Let me explain with a brief but familiar example.&lt;/p&gt;

&lt;p&gt;Say you're new to web development.&lt;/p&gt;

&lt;p&gt;You might arrive at a goal like "learn HTML in two weeks."&lt;/p&gt;

&lt;p&gt;You read HTML is a fundamental skill for web development and an excellent place to start. Since apparently you can teach yourself C++ in 21 days, two weeks to learn HTML sounds reasonable enough!&lt;/p&gt;

&lt;p&gt;Except after a day or two, you realize it makes much more sense to learn HTML and CSS together.&lt;/p&gt;

&lt;p&gt;You are now at odds with your goal.&lt;/p&gt;

&lt;p&gt;What do you do?&lt;/p&gt;

&lt;p&gt;You're either going to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Stick to your goal in the face of new information and wait weeks to implement what you've learned&lt;/li&gt;
&lt;li&gt; OR you'll go back to the drawing board immediately, set a new goal, and probably repeat the same mistake again and again&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;When you are new to development, you just don't know what you don't know. How, then, can you reasonably expect to make set achievable goal and estimate how long it will take?&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Goals can be useful in simple, narrow, predictable pursuits. Goals are terrible for long-term endeavors like health and professional success. This is because change happens so fast.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Adapting in the face of new information is an admirable trait (and the recipe for success) but constantly failing at your goals because you didn't know any better is demoralizing over time. It can lead to imposter syndrome. There has to be a better way.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Solution&lt;/strong&gt; Goals are rigid pursuits that shut off your awareness of other opportunities. &lt;strong&gt;Systems are flexible and leave you open to be curious to new and better ways of doing anything.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Problem #2: Goals reduce your current happiness
&lt;/h3&gt;

&lt;p&gt;When you're working toward a goal, you essentially say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I'm not good enough yet, but I will be when I reach my goal."&lt;/p&gt;

&lt;p&gt;"Once I reach my goal, then I'll be happy. Once I achieve my goal, then I'll be successful."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The problem with this mindset is that you're teaching yourself to always put happiness and success off until the next milestone is achieved.&lt;/p&gt;

&lt;p&gt;Learning to code is &lt;strong&gt;hard&lt;/strong&gt; (if learning to code was easy everyone would do it and companies wouldn't pay so handsomely) but to have the best chance at long-term success it should be &lt;strong&gt;enjoyable&lt;/strong&gt; as well.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Solution&lt;/strong&gt; Commit to a process instead of a goal. Enjoyed the present moment, and improve at the same time!&lt;/p&gt;

&lt;p&gt;Enter systems.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a system?
&lt;/h2&gt;

&lt;p&gt;If you want better results, forget about setting goals. Focus on systems instead.&lt;/p&gt;

&lt;p&gt;Goals are "reach it and be done" objectives.&lt;/p&gt;

&lt;p&gt;Systems are what you do on a regular basis with the general expectation of improving.&lt;/p&gt;

&lt;p&gt;Here are two examples from Atomic Habits and one of my own:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🏉 If you're a coach, your goal is to win a championship. Your system is what your team does at practice each day.&lt;/li&gt;
&lt;li&gt;🏃🏻‍♂️ If you're a runner, your goal is to run a marathon. Your system is your training schedule for the month.&lt;/li&gt;
&lt;li&gt;🖥️ If you're a developer, your goal is to become hireable. Your system is the study schedule that you follow each week.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;👻 &lt;strong&gt;Letting go of goals can be uncomfortable&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In Atomic Habits, James Clear makes the point that winners and losers have the same goal and therefore the goal isn't what makes the difference.&lt;/p&gt;

&lt;p&gt;Every team in the World Cup has the same goal - to have the best score at the end of the game and eventually win the tournament but it would be ridiculous to spend all game looking at the scoreboard.&lt;/p&gt;

&lt;p&gt;If England ignored the score the entire time and instead focused on a better process or strategy they might still be in the World Cup!&lt;/p&gt;

&lt;p&gt;It's this powerful idea that if you focus on your input every day the score will take care of itself.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Systems involve &lt;strong&gt;daily routines&lt;/strong&gt;, &lt;strong&gt;rules&lt;/strong&gt;, &lt;strong&gt;habits&lt;/strong&gt;, and &lt;strong&gt;fail-safes&lt;/strong&gt; you practice daily to move forward in a broad direction you value.&lt;/p&gt;

&lt;p&gt;Let's break down these 4 tenants of systems in the next section 👇🏻&lt;/p&gt;

&lt;h3&gt;
  
  
  Daily routines
&lt;/h3&gt;

&lt;p&gt;Instead of waking up and wondering "what do I feel like doing today?" take the feeling out of it and explicitly state when, where, and how.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I will learn module 4 of Scrimba's Frontend Developer Career Path from 5pm-7pm after work every day."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Try to anticipate what might interrupt your routine and come up with "if-then" plans. For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"If I am too tired from work, then I will listen to a podcast instead."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Rules
&lt;/h3&gt;

&lt;p&gt;We all live by certain rules, and I don't necessarily mean laws!&lt;/p&gt;

&lt;p&gt;For example, it was ingrained in me as a child never to eat dessert before savory food or wear shoes in the house.&lt;/p&gt;

&lt;p&gt;Consider what rules you can live by to make you more likely to succeed long-term.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;two-day&lt;/strong&gt; and &lt;strong&gt;no zero days&lt;/strong&gt; rules are excellent places to start:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Two-day rule&lt;/strong&gt; Never skip the thing you're trying to accomplish more than two days in a row.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;No zero days&lt;/strong&gt;. It's better to make some progress. &lt;strong&gt;Any&lt;/strong&gt; progress, than do nothing at all. Even if it's one GitHub commit.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/bfLHTLQZ5nc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Since these are rules you need to hold yourself to you have to agree with them on some fundamental level.  These days I agree it makes sense to get your nutrition before indulging something sweet but I wear shoes in the house if I want!&lt;/p&gt;

&lt;p&gt;Make sure it's a rule you can keep because if it's too easy to break, the rule doesn't mean anything.&lt;/p&gt;

&lt;p&gt;With systems, you're not trying to beat yourself into submission. You're making a plan that leans on your strengths and counterbalances your weaknesses for long-term gain.&lt;/p&gt;

&lt;h3&gt;
  
  
  Habits
&lt;/h3&gt;

&lt;p&gt;Systems involve habits (or streaks) that keep you moving forward in a direction you value.&lt;/p&gt;

&lt;p&gt;When I was learning to code I made a habit of committing to GitHub every day:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwwfgybqx2ph5nc1k9qr4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwwfgybqx2ph5nc1k9qr4.png" alt="A screenshot of Alex Booker's GitHub profile" width="800" height="651"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My mate Alejandro literally had to &lt;a href="https://scrimba.com/podcast/fending-off-recruiters-after-100daysofcode/" rel="noopener noreferrer"&gt;fend off recruiters after completing another type of streak called #100DaysOfCode&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;If you're anything like me, you'll find that it's hard to break the streak once you get going 🔥&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;🌱 &lt;strong&gt;The tenants of a system work in harmony&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;On days I genuinely couldn't focus, I would follow the no zero-day rule I mentioned before and tweak a README or fix a one-line in one of my GitHub projects enabling me to continue my streak. With a few exceptions, I wouldn't let myself get away with this two days in a row (two day rule)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Fail-safe
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;By failing to prepare, you are preparing to fail&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A fail-safe is a way to keep yourself accountable that does not depend on motivation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbiyl9v1x3bha67285myl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbiyl9v1x3bha67285myl.png" alt="A screenshot of the 'Go Fucking Do It' home page" width="800" height="608"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://gofuckingdoit.com/" rel="noopener noreferrer"&gt;Go Fucking Do It&lt;/a&gt; is a novel website where you set a deadline and a price. If you fail, you pay.&lt;/p&gt;

&lt;p&gt;Now that wouldn't work for me personally!&lt;/p&gt;

&lt;p&gt;When I was learning to code, I found an accountability buddy instead.&lt;/p&gt;

&lt;p&gt;If we made an event in the calendar, I would go no matter what because canceling goes against my values.&lt;/p&gt;

&lt;h2&gt;
  
  
  The verdict
&lt;/h2&gt;

&lt;p&gt;Are all goals bad?&lt;/p&gt;

&lt;p&gt;No.&lt;/p&gt;

&lt;p&gt;In particular a North Star is a type of overarching goal that guides you and shows you what broad direction to move towards.&lt;/p&gt;

&lt;p&gt;But breaking down an uncertain and windy journey like learning to code into goals is a losing game. You will never estimate things well at this stage and goals put off happiness indefinitely.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1593575742469701632-90" src="https://platform.twitter.com/embed/Tweet.html?id=1593575742469701632"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1593575742469701632-90');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1593575742469701632&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Tell me if this sounds familiar:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sometimes I would stick to books that weren't working for me because I set a goal to finish them.&lt;/li&gt;
&lt;li&gt;Other times I would make goals to build 4 projects for my portfolio but lacked the experience to scope and estimate how long they would take&lt;/li&gt;
&lt;li&gt;I would follow the advice that sounded good but hurt my progress. For example, I remember setting a goal to learn C++ because apparently, "good developers know how it works under the hood" After a week of messing around with bloody pointers, I knew in my gut this wasn't working for me, but I pushed through anyways because I thought if I didn't I lacked discipline 🤷🏻&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Setting goals takes energy and time. Energy and time you could spend, uh, learning to code!&lt;/p&gt;

&lt;p&gt;When you are always looking forward at the gap you need to close, you fail to appreciate how far you've come:&lt;/p&gt;

&lt;p&gt;It can be disheartening at times and even lead to imposter syndrome. You will arrive at your destination more smoothly if you focus on the process instead.&lt;/p&gt;

&lt;p&gt;Systems changed the game for me and if the success of Atomic Habits is anything to go by,  they will probably work for you too, so why not give it a go?&lt;/p&gt;

&lt;p&gt;And don't forget to tell me how you got on!&lt;/p&gt;

</description>
      <category>goals</category>
      <category>developer</category>
      <category>coding</category>
    </item>
    <item>
      <title>How to use LinkedIn as a developer to get a job in tech</title>
      <dc:creator>Michael J. Larocca</dc:creator>
      <pubDate>Thu, 08 Dec 2022 21:47:21 +0000</pubDate>
      <link>https://forem.com/scrimba/how-to-use-linkedin-as-a-developer-to-get-a-job-in-tech-1ano</link>
      <guid>https://forem.com/scrimba/how-to-use-linkedin-as-a-developer-to-get-a-job-in-tech-1ano</guid>
      <description>&lt;p&gt;Can you picture it? Opening your LinkedIn on a Monday morning to warm messages from recruiters inviting &lt;strong&gt;you&lt;/strong&gt; to interview.&lt;/p&gt;

&lt;p&gt;This post will show you how to make that vision a reality by optimizing your LinkedIn profile.&lt;/p&gt;

&lt;p&gt;Once your LinkedIn is in tip-top shape you will also learn how to reach out to recruiters on LinkedIn. Not sure what to say? Don't worry! We've included message templates for you to adapt. Remember - you will be much more likely to find success by making a personal connection with a recruiter than by cold applying 🥶&lt;/p&gt;

&lt;p&gt;Let's go!&lt;/p&gt;

&lt;h2&gt;
  
  
  4 tips to optimize your profile
&lt;/h2&gt;

&lt;p&gt;You can spend a lot of time fiddling with options on LinkedIn but when we spoke to &lt;a href="https://scrimba.com/podcast/make-your-linkedin-profile-standout/" rel="noopener noreferrer"&gt;Austin Henline from LinkedIn&lt;/a&gt; he explained these are the 4 that matter most.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Have a professional headshot&lt;/li&gt;
&lt;li&gt;Write a great summary&lt;/li&gt;
&lt;li&gt;Make your headline the job you want&lt;/li&gt;
&lt;li&gt;Set your industry to "Software Development"&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's break it down 👇🏻&lt;/p&gt;

&lt;h3&gt;
  
  
  Have a professional headshot
&lt;/h3&gt;

&lt;p&gt;Who would you reach out to?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2Flinkedin-profile-photos.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2Flinkedin-profile-photos.png" alt="linkedin-profile-photos"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;No avatar -&amp;gt; might assume inactive&lt;/li&gt;
&lt;li&gt;Group photo -&amp;gt; don't know who is who and looks unprofessional&lt;/li&gt;
&lt;li&gt;Professional background&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;People want to connect with other people (yes, recruiters are people too!) and latch on to friendly faces.  &lt;/p&gt;

&lt;p&gt;Should you meet someone in-person, it would be helpful if they know what you looked like as well!&lt;/p&gt;

&lt;p&gt;Here are our guidelines on what makes a compelling LinkedIn profile picture:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FHow-to-take-a-professional-headshot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FHow-to-take-a-professional-headshot.png" alt="How-to-take-a-professional-headshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do's ✔&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Crop the headshot (shoulders up)&lt;/li&gt;
&lt;li&gt;Smile&lt;/li&gt;
&lt;li&gt;Wear whatever you're comfortable with&lt;/li&gt;
&lt;li&gt;Make sure the background is clean&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Don'ts ❌&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Full body picture&lt;/li&gt;
&lt;li&gt;Pull a silly face 😝😜&lt;/li&gt;
&lt;li&gt;Leave stuff lying around in the background&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;"But Michael! &lt;strong&gt;I don't have access to a professional photographer!&lt;/strong&gt;"&lt;/p&gt;

&lt;p&gt;I hear you!&lt;/p&gt;

&lt;p&gt;With your phone camera and natural sunlight, I am confident you can take a decent portrait. The trick is not to worry about the background at this stage.&lt;/p&gt;

&lt;p&gt;Once you have a handsome headshot, you can easily remove the background from your photo using &lt;a href="https://www.remove.bg/" rel="noopener noreferrer"&gt;remove.bg&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Then can add a flat or gradient color background using &lt;a href="https://www.canva.com/" rel="noopener noreferrer"&gt;Canva&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FRemoving-background-1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FRemoving-background-1.png" alt="Removing-background-1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Write a great summary
&lt;/h3&gt;

&lt;p&gt;Your summary is probably the first thing someone will read after your name so it's important you make it clear what skills you have and what roles you're interseted in. You should also provide some context aroun your career and mention what you've been up to (even if the experience has nothing to do with tech.)&lt;/p&gt;

&lt;p&gt;Your summary is also an opportunity to include keywords which will increase the discoverability of your profile. Cramming keywords probably isn't a good look 🤔  but if you can naturally include job titles you want or skills you have (that recruiters might be searching for) in the description then that's AWESOME.&lt;/p&gt;

&lt;p&gt;Writing a summary of yourself is never easy so we've come up with a 5-paragraph framework to help get the ball rolling:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;✅ &lt;strong&gt;A hook&lt;/strong&gt; You need to hook the reader and reel them a compelling opening paragraph. Ask yourself “what will really entice the reader to read on?”&lt;/li&gt;
&lt;li&gt;👶🏻 &lt;strong&gt;Your past&lt;/strong&gt; In your second paragraph talk about where you've been and what you've been doing&lt;/li&gt;
&lt;li&gt;🧑🏻 &lt;strong&gt;Your present&lt;/strong&gt; Write about what you're currently working on (for example a project or new skill)&lt;/li&gt;
&lt;li&gt;👴🏻 &lt;strong&gt;Your Future&lt;/strong&gt; Show the reader where you want to go. If their role is a good fit they will probably feel like there's a strong alignment and reach out&lt;/li&gt;
&lt;li&gt;🎨 &lt;strong&gt;Your skills&lt;/strong&gt; This is a great tip by Austin (the LinkedIn employee we spoke to.) In the last paragraph, write a comma-separated list of skills and technologies you've used. Doing so will help you appear in searches and allow recruiters and employers to see your skills at a glance without having to look deeper into your profile.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Make your headline the job you
&lt;/h3&gt;

&lt;p&gt;Let me be clear:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you have written so much as a line of code, you are a developer.&lt;/p&gt;

&lt;p&gt;I give you permission to call yourself a developer in your LinkedIn headline!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It's vital that you you do.&lt;/p&gt;

&lt;p&gt;Did you know? Recruiters have a different version of LinkedIn to us where they see a limited amount of information before deciding to click deeper into your profile.&lt;/p&gt;

&lt;p&gt;Say you are working as a customer support agent and preparing to transition into tech. If a recruiter sees "Customer support agent" they might assume you're not a developer. Worse, you'll never show up in their search results because they searched "Frontend web developer" not "Customer support agent"&lt;/p&gt;

&lt;p&gt;If you are looking for a Frontend Developer position, include it in your headline:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2Flinkedin-header-tagline.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2Flinkedin-header-tagline.png" alt="linkedin-header-tagline"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Optionally include your most searchable skills separated by bars (for example “Frontend Developer | React | JavaScript | CSS | HTML.”)&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;️ ℹ️ Tip LinkedIn headline's are limited to 220 characters. To bypass this, upload a banner image with more information about yourself. Include your contact information to make it even easier to contact you!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Set your industry to "Software Development"
&lt;/h3&gt;

&lt;p&gt;If you are brand new to LinkedIn or transitioning from a previous career your profile's Industry might be wrong.&lt;/p&gt;

&lt;p&gt;Make sure to &lt;a href="https://www.linkedin.com/help/linkedin/answer/a595160/change-the-industry-or-company-information-on-your-profile?lang=en" rel="noopener noreferrer"&gt;set it to Software Development&lt;/a&gt; for the best chance of being discovered for, uh, software development jobs!&lt;/p&gt;

&lt;p&gt;The industry setting helps the LinkedIn search engine to connect you to relevant opportunities, connections, and content. It also allows others, such as recruiters, to find your profile when they filter their searches by your selected industry.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting recruited
&lt;/h2&gt;

&lt;p&gt;Once you implement the optimisations described above, there is a good chance recruiters can find your profile. Now let's make it obvious you're open for work and ready to mingle!&lt;/p&gt;

&lt;h3&gt;
  
  
  Set your profile to "open for work"
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FRemoving-background-1-1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fscrimba.com%2Farticles%2Fcontent%2Fimages%2Fsize%2Fw1000%2F2022%2F11%2FRemoving-background-1-1.png" alt="Removing-background"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;LinkedIn has two options to indicate you are "open for work"&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;You can indicate to recruiters you are open to work but not broadcast this on your profile (good if you don't want to know your boss you're looking)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can indicate to recruiters and the world you're open to work with a special avatar pictured above&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It's totally up to you but &lt;strong&gt;remember to indicate you're open to work!&lt;/strong&gt; Otherwise you can expect crickets 🦗!&lt;/p&gt;

&lt;h3&gt;
  
  
  Certificate
&lt;/h3&gt;

&lt;p&gt;A certificate can indicate you have the knowledge to get the job done without a degree. As someone newer to tech I recommend padding your profile out with any certificates you might have - for example a certification of completion from &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;Scrimba's Frontend Developer Career Path&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Announce your certificate
&lt;/h3&gt;

&lt;p&gt;Don't forget to write a post announcing your certificate. In general, writing posts is a great way to extend your network. It's possible LinkedIn show active profiles more favourably in the search results but that is not confirmed.&lt;/p&gt;

&lt;p&gt;"But Michael! &lt;strong&gt;I don't know what to write!&lt;/strong&gt;"&lt;/p&gt;

&lt;p&gt;Well, it's best to keep it short and sweet. However, you will want to include to following key pieces of information:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Provide context&lt;/strong&gt; You can provide context by briefly describing your goals, such as, &lt;em&gt;"I'm working toward transitioning into tech, and I just reached a major milestone!"&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Announce the certificate&lt;/strong&gt; After you've provided context, in a new paragraph, announce the certificate: I just earned &lt;em&gt;"WRITE YOUR CERTIFICATE HERE!"&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A call to action&lt;/strong&gt; Finally, provide a call to action so that readers will know how they can help you. For example, you could write something like, &lt;em&gt;"I'm now on the search for my first role. If anyone is hiring, has contacts, or knows of any positions available, please let me know!"&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In the post, provide a picture of the certificate.&lt;/p&gt;

&lt;p&gt;This way, at a glance, while others scroll through their feed and come across your post, they will know it refers to an accomplishment. 🎉&lt;/p&gt;

&lt;p&gt;To ensure your post gets the most reach, include hashtags relevant to your certificate at the bottom of your post. For example, if you earned a Front-End Web Developer certificate, you could include the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;#html&lt;/li&gt;
&lt;li&gt;#css&lt;/li&gt;
&lt;li&gt;#javascript&lt;/li&gt;
&lt;li&gt;#react&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Reaching out
&lt;/h2&gt;

&lt;p&gt;Before reaching out to a recruiter, let's first understand the difference between the two types, internal and agency recruiters.&lt;/p&gt;

&lt;h3&gt;
  
  
  Internal vs. agency recruiters 🤔
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;An &lt;strong&gt;internal&lt;/strong&gt; recruiter works at the company where you are applying. Internal recruiters have other responsibilities besides recruiting, such as reviewing job applications and supporting candidates through the job process.&lt;/li&gt;
&lt;li&gt;An &lt;strong&gt;agency&lt;/strong&gt; recruiter works independently (externally) from the companies you are applying. Agency recruiters work with several companies and are heavily commission-based, so there is a high incentive to help you. 😉&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How do I find a recruiter?
&lt;/h3&gt;

&lt;p&gt;To find recruiters on LinkedIn, in search, type technical and recruiter and add your city. For me, the search is "Technical Recruiter New York.”&lt;/p&gt;

&lt;h3&gt;
  
  
  How to reach out to a recruiter on LinkedIn?
&lt;/h3&gt;

&lt;p&gt;Once you have found a recruiter, your next step is to send a personalized invite.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://scrimba.com/podcast/recruiters-suck/" rel="noopener noreferrer"&gt;Taylor Desseyn&lt;/a&gt;, a leading recruiter in the field, advises us to follow three steps when contacting recruiters:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Admiration and flattery&lt;/li&gt;
&lt;li&gt;State a specific amount of time that you want to talk to them&lt;/li&gt;
&lt;li&gt;Ask the specific question that you want to ask&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can successfully lead your message with admiration and flattery by first looking at the recruiter's LinkedIn profile to learn more about them.&lt;/p&gt;

&lt;p&gt;Once you have learned of their accomplishments, where they have worked, what schools they attended, and what they post in their activity, you can best customize the opening paragraph of the invite.&lt;/p&gt;

&lt;p&gt;Now that you've warmed them up and got their attention, state a specific amount of time you require, such as three minutes, to discuss your question.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Verdict
&lt;/h2&gt;

&lt;p&gt;With a properly optimized LinkedIn profile, you're automating promoting yourself 24/7, resulting in a continual flow of employment opportunities coming directly to you!&lt;/p&gt;

&lt;p&gt;Let everyone know if you are open to work or hiring by adding the corresponding banner to your profile picture. Or, to be discrete, you can adjust the settings to let recruiters know that you are open to working without the flashy banner.&lt;/p&gt;

&lt;p&gt;You can have recruiters discover you by optimizing keywords in your profile, and you can also open up more work opportunities by being proactive by reaching out to and building relationships with local recruiters.&lt;/p&gt;

&lt;p&gt;By posting certificates as you earn them, you are sharing your accomplishment and providing a call to action, letting your network, recruiters, and potential employers know, which may result in others reaching out to you for even more work opportunities!&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Let's connect! I'm active on &lt;a href="https://www.linkedin.com/in/michaeljudelarocca/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; and &lt;a href="https://twitter.com/MikeJudeLarocca" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;




&lt;h6&gt;
  
  
  &lt;strong&gt;&lt;em&gt;Are you now interested in optimizing your LinkedIn profile? Have you already optimized your LinkedIn profile and gained more opportunities after? Please share the article and comment!&lt;/em&gt;&lt;/strong&gt;
&lt;/h6&gt;

</description>
      <category>linkedin</category>
      <category>career</category>
      <category>recruitment</category>
      <category>networking</category>
    </item>
    <item>
      <title>JavaScriptmas 2022 - Issue 1</title>
      <dc:creator>Michael J. Larocca</dc:creator>
      <pubDate>Mon, 05 Dec 2022 13:23:47 +0000</pubDate>
      <link>https://forem.com/scrimba/javascriptmas-2022-issue-1-200b</link>
      <guid>https://forem.com/scrimba/javascriptmas-2022-issue-1-200b</guid>
      <description>&lt;h4&gt;
  
  
  Tis the season to be coding! JavaScriptmas time is here again!
&lt;/h4&gt;




&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--K0MgjEzA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/5966dd19e28fc685c873c355013aea00/0a47e/TN-TXG-65-02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--K0MgjEzA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/5966dd19e28fc685c873c355013aea00/0a47e/TN-TXG-65-02.png" alt="TN-TXG-65" width="600" height="323"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;JavaScriptmas is a FREE annual festive coding event hosted by the online coding school &lt;a href="https://scrimba.com/"&gt;Scrimba&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;From December 1st to the 24th, new coding challenges will be released daily. All valid solutions submitted in their Discord JavaScriptmas channel act as a raffle ticket. So the more valid solutions you enter, the more chances you have to win! Two winners will be drawn during their YouTube Livestream on December 24th and receive $1000 cash plus a lifetime Scrimba Pro membership!&lt;/p&gt;

&lt;p&gt;The first winner will be chosen randomly from the daily coding challenge submissions (on Discord).&lt;/p&gt;

&lt;p&gt;The second winner is randomly chosen from their submitted code reviews (on Discord). Each submitted coding review acts as a single raffle ticket, so the more you help others, the more chances you have to win a prize!    &lt;/p&gt;

&lt;p&gt;What are the code reviews? A code review is when YOU &lt;a href="https://selftaughttxg.com/2021/02-21/CreateAScrimbaScreencast/"&gt;record a scrim&lt;/a&gt; reviewing another person's JavaScriptmas solution, providing constructive feedback.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This year will be my third year participating in Scrimba's JavaScriptmas event. I will be completing each of the daily challenges and providing detailed solutions. Also, I am featuring others' works in the community highlights section!&lt;/strong&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Note:&lt;/em&gt;&lt;/strong&gt; &lt;em&gt;You must enter each daily coding challenge submission by midnight (GMT), and it must be a working solution for your entry to be valid.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Community highlights ⬇
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Gina Russo
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mZvbzo7v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/810b1d05a17bc17e2671706924c9a931/0a47e/GinaRusso.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mZvbzo7v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/810b1d05a17bc17e2671706924c9a931/0a47e/GinaRusso.png" alt="Gina Russo" width="600" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you would like a demonstration on how to create a &lt;a href="https://selftaughttxg.com/2021/02-21/CreateAScrimbaScreencast/"&gt;Scrimba Screencast&lt;/a&gt; and teach coding with a presentation, it doesn't get any better than &lt;a href="https://www.linkedin.com/in/gina-p-russo/"&gt;Gina Russo's&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Gina teaches us how to solve the first day's coding challenge in not one, not two, but in three ways! She also created beautifully illustrated slides that provide the detailed coding concepts taught, which is very helpful to students following and coding along.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&lt;a href="https://scrimba.com/scrim/cJPD3Lu2?pl=p67LBHv"&gt;🔗 Link to the scrim&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h4&gt;
  
  
  Michaella Rodriguez
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kp1T97Le--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/abe4b1706f0798cfadece8f97ae46b31/0a47e/MichaellaRodriguez.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kp1T97Le--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/abe4b1706f0798cfadece8f97ae46b31/0a47e/MichaellaRodriguez.png" alt="Michaella Rodriguez" width="600" height="322"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.linkedin.com/in/michaella-rodriguez/"&gt;Michaella&lt;/a&gt; went above and beyond the instructions of day four's challenge! She wrote the code to format a sentence as instructed and took it further by creating a function that displays multiple messages when a user clicks a button. &lt;/p&gt;

&lt;p&gt;Michaella's code works similarly to a Magic 8 Ball and displays a comical picture of Santa with a finger over his lips with a "shh..." gesture, warning us to be quiet!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&lt;a href="https://scrimba.com/scrim/coc924780a45744007a4c1c66"&gt;🔗 Link to the scrim&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h4&gt;
  
  
  Matt
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cmOo_am4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/1da48ff92945f55388975948e350ff10/0a47e/Matt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cmOo_am4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/1da48ff92945f55388975948e350ff10/0a47e/Matt.png" alt="Matt" width="600" height="254"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/mattemmmmm"&gt;Matt&lt;/a&gt; solved the day one create a panic function in style! Not only does it format a sentence as instructed, but it also accepts user input that allows users to write their own custom sentences.&lt;/p&gt;

&lt;p&gt;The background is an animated image of a serene, calm lake. But as soon as you hit the panic button, the background changes to an animated inferno! &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&lt;a href="https://scrimba.com/scrim/co2884c13af5c29b1f9c396d7"&gt;🔗 Link to the scrim&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  My JavaScript code challenge solutions ⬇
&lt;/h3&gt;




&lt;h3&gt;
  
  
  Day 1 challenge
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Panic function
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;Write a PANIC function. The function should take in a sentence and return the same sentence in all caps with an exclamation point (!) at the end. Use JavaScript's built-in string methods. If the string is a phrase or sentence, add a 😱 emoji in between each word.&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;panic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;panicSentence&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; 😱 &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;concat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;panicSentence&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;p&gt;&lt;strong&gt;Although the solution to this challenge may seem complicated at first glance, it is solved easily using JavaScript methods.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ℹ Note:&lt;/em&gt;&lt;/strong&gt; &lt;em&gt;By using periods, you can chain JavaScript methods together.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://www.w3schools.com/jsref/jsref_split.asp"&gt;split()&lt;/a&gt; method splits a string into an array of substrings. This method accepts a separator as an optional parameter. We get each word of the string by adding a space between single quotation marks as a separator.&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://www.w3schools.com/jsref/jsref_join.asp"&gt;join()&lt;/a&gt; method returns an array as a string. This method includes a separator argument (the default separator is a comma). I solved this part of the challenge by passing in single quotation marks with an 😱 emoji as the separator argument. I included a space between the single quotation marks.&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://www.w3schools.com/jsref/jsref_touppercase.asp"&gt;toUpperCase()&lt;/a&gt; method converts a string to uppercase letters. &lt;/p&gt;

&lt;p&gt;The &lt;a href="https://www.w3schools.com/jsref/jsref_concat_string.asp"&gt;concat()&lt;/a&gt; method joins two or more strings and returns a new string. We add the exclamation point at the end by passing it in between single quotes as a parameter.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;🔗 &lt;a href="https://scrimba.com/scrim/co9a34c2898498bcea9f6ecd6"&gt;My solution for day 1&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Day 2 challenge
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Totally Private Data Farm
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;Write a function that maps through the current data and returns a new array of objects with only two properties: fullName and birthday. Each result in your array should look like this when you're done:&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;fullName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Levent Busser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="nx"&gt;birthday&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Fri Aug 20 1971&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;In this challenge, we must format information from the provided array and return it.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here is the first record in the provided array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;      &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mr&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;first&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Levent&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;last&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Busser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
         &lt;span class="p"&gt;},&lt;/span&gt;
         &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;date&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1971-08-21T01:08:00.099Z&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;51&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;p&gt;&lt;strong&gt;First, let's look at how we retrieve each item we need using console logs. To simplify, we will view the first record in the provided array.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We access the first record by using the console log as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mr&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;first&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Levent&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;last&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Busser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="na"&gt;dob&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1971-08-21T01:08:00.099Z&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;51&lt;/span&gt;&lt;span class="p"&gt;}}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can retrieve the first and last names as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;last&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;Levent&lt;/span&gt;
&lt;span class="nx"&gt;Busser&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To create the full name, we concatenate the first and last name using &lt;a href="https://www.w3schools.com/js/js_string_templates.asp"&gt;string interpolation&lt;/a&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fullName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;last&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fullName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;Levent&lt;/span&gt; &lt;span class="nx"&gt;Busser&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we retrieve the date of birth date as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;dob&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="mi"&gt;1971&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;08&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;21&lt;/span&gt;&lt;span class="nx"&gt;T01&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;08&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mf"&gt;00.099&lt;/span&gt;&lt;span class="nx"&gt;Z&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To format the date specified by the challenge, we need to create a new &lt;a href="https://www.w3schools.com/js/js_dates.asp"&gt;date object&lt;/a&gt; and pass in the date of birth value. Then we need to use the &lt;a href="https://www.w3schools.com/jsref/jsref_todatestring.asp"&gt;toDateString()&lt;/a&gt; method to format it as specified.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;date&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;dob&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toDateString&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;span class="nx"&gt;Fri&lt;/span&gt; &lt;span class="nx"&gt;Aug&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="mi"&gt;1971&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Now that we understand how to format the data, we can use a &lt;a href="https://www.w3schools.com/jsref/jsref_foreach.asp"&gt;forEach()&lt;/a&gt; loop for cycling through the provided data array and then push the formatted data into a new array called totallyPrivateDataArray to return.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;transformData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;totallyPrivateDataArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;records&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fullName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;last&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;    
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;birthDate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dob&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;    

      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newRecord&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="na"&gt;fullName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;fullName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
              &lt;span class="na"&gt;birthday&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;birthDate&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toDateString&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
          &lt;span class="p"&gt;};&lt;/span&gt;
          &lt;span class="nx"&gt;totallyPrivateDataArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newRecord&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;totallyPrivateDataArray&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;p&gt;For each iteration of the for loop, we create a variable for each record's full name and birthday. We assign the fullName variable by concatenating the first and last name. &lt;/p&gt;

&lt;p&gt;Then, we assign the birthday variable by creating a &lt;a href="https://www.w3schools.com/js/js_dates.asp"&gt;new Date()&lt;/a&gt; object. We pass in the current record's date of birth value and format it using the &lt;a href="https://www.w3schools.com/jsref/jsref_todatestring.asp"&gt;toDateString()&lt;/a&gt; method.&lt;/p&gt;

&lt;p&gt;Now that we have new variables with the proper format, we create an object called newRecord and assign them with the key-value pairs as required by the coding challenge.&lt;/p&gt;

&lt;p&gt;Finally, we push the object we just created into the totallyPrivateDataArray and return the array after the forEach loop.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;🔗 &lt;a href="https://scrimba.com/scrim/coc5544d981fd75aeb4ef0b50"&gt;My solution for day 2&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Day 3 challenge
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Favorite Foods
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;Topic: Object Destructuring&lt;/em&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Edit the faveFoods object so that it contains your favorite foods.&lt;/li&gt;
&lt;li&gt;Destructure the faveFoods object into three consts: breakfast, lunch, and supper.&lt;/li&gt;
&lt;li&gt;Fetch the meals  from the DOM.&lt;/li&gt;
&lt;li&gt;Set the innerHTML content of the meals  to a paragraph that states what your favorite foods are for breakfast, lunch, and supper.Use a template literal to construct the string.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;This challenge instructs us to use &lt;a href="https://www.w3schools.com/react/react_es6_destructuring.asp"&gt;object destructuring&lt;/a&gt;. Destructuring makes it easy to extract just what we need from an object.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So what's the benefit of using destructuring? Using it, we can assign multiple variables with just one succinct line of code!&lt;/p&gt;

&lt;p&gt;In this challenge, the benefit of using destructuring is not apparent since we are working with a small object. However, it comes in handy when working with large objects.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;ℹ Here is a helpful short video by Fireship: &lt;a href="https://www.youtube.com/watch?v=UgEaJBz3bjY"&gt;JS Destructuring in 100 Seconds&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;First, we add the food to the empty strings provided in the faveFoods object. To add the emojis on Windows, use the buttons "Windows" + "." (period) to open up the emojis dialog box.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;faveFoods&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;breakfast&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;croissants 🥐&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;lunch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;tuna sandwiches 🥪&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;supper&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pizza 🍕&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is how to assign the variables using destructuring as instructed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;breakfast&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lunch&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;supper&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;faveFoods&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can verify it worked by using the console log:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;breakfast&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;lunch&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;supper&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;croissants&lt;/span&gt; &lt;span class="err"&gt;🥐&lt;/span&gt;
&lt;span class="nx"&gt;tuna&lt;/span&gt; &lt;span class="nx"&gt;sandwiches&lt;/span&gt; &lt;span class="err"&gt;🥪&lt;/span&gt;
&lt;span class="nx"&gt;pizza&lt;/span&gt; &lt;span class="err"&gt;🍕&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we use &lt;a href=""&gt;document.getElementById&lt;/a&gt; to fetch the meals &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; from the DOM as instructed by writing the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;meals&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;meals&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, we solve the challenge by using &lt;a href="https://www.w3schools.com/jsref/prop_html_innerhtml.asp"&gt;innerHTML&lt;/a&gt; to add a paragraph using string interpolation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;meals&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
    &amp;lt;p&amp;gt;
        For breakfast, I only like &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;breakfast&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. I love &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;lunch&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; for lunch, and I usually want &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;supper&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; for supper.
    &amp;lt;/p&amp;gt;
`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;    
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;em&gt;🔗 &lt;a href="https://scrimba.com/scrim/cob19441da8d65e3f62055ed0"&gt;My solution for day 3&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Day 4 challenge
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Whispering function
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;Write a function 'whisper' that takes in a sentence and returns a new sentence in all lowercase letters with "shh..." at the beginning.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;The function should also remove an exclamation point at the end of the sentence, if there is one.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example&lt;/em&gt;&lt;br&gt;
&lt;em&gt;input: "The KITTENS are SLEEPING!"&lt;/em&gt;&lt;br&gt;
&lt;em&gt;output: "shh... the kittens are sleeping"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Hint: endsWith and slice&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This challenge asks us to return a formatted sentence. If the sentence ends with an exclamation point, remove it, add "shh..." to the beginning, and set it to lowercase.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To find out if the sentence ends with an exclamation point, we will use the aptly named &lt;a href="https://www.w3schools.com/jsref/jsref_endswith.asp"&gt;endsWith()&lt;/a&gt; method. This method returns true or false.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;endsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can use the &lt;a href="https://www.w3schools.com/jsref/jsref_slice_array.asp"&gt;slice()&lt;/a&gt; method to remove the last character in the sentence we pass in. &lt;/p&gt;

&lt;p&gt;The slice method accepts a start and an end parameter. We enter zero to start at the beginning, and we enter a negative one to remove the last character.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To solve the challenge, we write an if statement that checks if the passed-in sentence ends with an exclamation point. We then return the appropriate sentence using string interpolation and the &lt;a href="https://www.w3schools.com/jsref/jsref_tolowercase.asp"&gt;toLowerCase()&lt;/a&gt; method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;whisper&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

   &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;endsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`shh... &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`shh... &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&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;p&gt;&lt;strong&gt;&lt;em&gt;🔗 &lt;a href="https://scrimba.com/scrim/co41d48089c3b9230ecf9ca3a"&gt;My solution for day 4&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;I continue to have wonderful experiences with Scrimba, and I highly recommend learning with them! You can read my full &lt;a href="https://selftaughttxg.com/2020/12-20/Review-Scrimba/"&gt;Scrimba review&lt;/a&gt; on my 12/13/2020 post.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KPp8xx5z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/85d4b08288b8be565392fd0975170a8e/5fd3e/PerHaraldBorgen-Quote.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KPp8xx5z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://selftaughttxg.com/static/85d4b08288b8be565392fd0975170a8e/5fd3e/PerHaraldBorgen-Quote.png" alt="Per Harald Borgen Quote" width="594" height="255"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;em&gt;"That's one of the best Scrimba reviews I've ever read, &lt;a href="https://twitter.com/MikeJudeLarocca?ref_src=twsrc%5Etfw"&gt;@MikeJudeLarocca&lt;/a&gt;. Thank you! 🙏 "&lt;/em&gt;
&lt;/h4&gt;

&lt;h6&gt;
  
  
  — Per Harald Borgen, CEO of Scrimba &lt;a href="https://twitter.com/perborgen/status/1338462544143540227?ref_src=twsrc%5Etfw"&gt;December 14, 2020&lt;/a&gt;
&lt;/h6&gt;




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

&lt;p&gt;Scrimba's JavaScriptmas annual FREE event is a wonderful way to commit to coding daily. It is a fun and festive event where all participants have an equal opportunity to win prizes, regardless of their skill level.&lt;/p&gt;

&lt;p&gt;By completing all 24 coding challenges and submitting them daily by midnight (GMT) time, each submission acts as a raffle ticket, so you will have up to 24 chances to win prizes, plus unlimited more chances with submitting coding reviews!&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Let's connect! I'm active on &lt;a href="https://www.linkedin.com/in/michaeljudelarocca/"&gt;LinkedIn&lt;/a&gt; and &lt;a href="https://twitter.com/MikeJudeLarocca"&gt;Twitter&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;




&lt;h6&gt;
  
  
  &lt;em&gt;Are you now interested in participating in this year's Scrimba's JavaScriptmas? Have you already participated in last year's Scrimba's JavaScriptmas? Please share the article and comment!&lt;/em&gt;
&lt;/h6&gt;




</description>
      <category>javascript</category>
      <category>javascriptmas</category>
      <category>scrimba</category>
      <category>programming</category>
    </item>
    <item>
      <title>How HTML, CSS, and JavaScript work</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Tue, 29 Nov 2022 00:15:05 +0000</pubDate>
      <link>https://forem.com/scrimba/how-html-css-and-javascript-work-10k</link>
      <guid>https://forem.com/scrimba/how-html-css-and-javascript-work-10k</guid>
      <description>&lt;p&gt;Scrolling through web developer job descriptions, or even frontend developer courses, you’ll often find HTML, CSS, and JavaScript bundled together. Created at separate points in the internet’s early days, HTML, CSS, and JavaScript jointly form the foundation of almost every single website and web application you’ve ever interacted with.&lt;/p&gt;

&lt;p&gt;If you’re looking to pursue a web development career, it’s important to understand how they work together. That’s where we come in!&lt;/p&gt;

&lt;p&gt;In this blog post, we’ll dive into the nuts and bolts of HTML, CSS, and Javascript; and walk through an example of how to use them in practice. We’ll also take a look at how long it takes to lean HTML, CSS, and JavaScript — and round off with some practical advice on where beginners can go to learn these three foundational web languages &lt;strong&gt;without breaking the bank&lt;/strong&gt; 💰.&lt;/p&gt;

&lt;p&gt;These are the sections we’ll look at:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📍 What are HTML, CSS, and JavaScript?&lt;/li&gt;
&lt;li&gt;📍 Introduction to HTML&lt;/li&gt;
&lt;li&gt;📍 Introduction to CSS&lt;/li&gt;
&lt;li&gt;📍 Introduction to JavaScript&lt;/li&gt;
&lt;li&gt;📍 How do HTML, CSS, and JavaScript work together?&lt;/li&gt;
&lt;li&gt;📍Which web language should I learn first?&lt;/li&gt;
&lt;li&gt;📍Where can I learn HTML, CSS, and JavaScript?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let’s get stuck in!&lt;/p&gt;

&lt;h1&gt;
  
  
  What are HTML, CSS, and JavaScript?
&lt;/h1&gt;

&lt;p&gt;Before we answer this question, it’s important to first get on the same page about what programming in web development actually is.&lt;/p&gt;

&lt;p&gt;Programming is how web developers communicate with the software. A programming language is how the software knows how to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Put a sentence in bold&lt;/li&gt;
&lt;li&gt;Set a color to green, and&lt;/li&gt;
&lt;li&gt;Get a button shake when the user clicks it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Computers read programming languages in the same way that humans interpret instructions, and they behave accordingly.&lt;/p&gt;

&lt;p&gt;Now, here’s the catch: &lt;strong&gt;JavaScript is a programming language, but HTML and CSS are not.&lt;/strong&gt; HTML and CSS are web languages; meaning they all relate to, and help build experiences on, the World Wide Web. But they all play different roles — which we’ll explore in more detail over the next few sections.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction to HTML
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is HTML, and how does it work? 🤔
&lt;/h3&gt;

&lt;p&gt;HTML is an essential building block of any webpage. It describes the structure and semantics (meaning) of content rather than its appearance.&lt;/p&gt;

&lt;p&gt;After reading the previous section, you might be thinking “if HTML isn’t a programming language, what is it?” The clue is in the name: HTML stands for Hypertext &lt;strong&gt;Markup Language&lt;/strong&gt;. It’s made up of a set of markup tags and symbols which tell browsers how to display images and words on a web page.&lt;/p&gt;

&lt;p&gt;HTML tags are written in angle brackets (&amp;lt; and &amp;gt;) and tell what kind of information goes inside them, such as headings, paragraphs or lists etc.&lt;/p&gt;

&lt;p&gt;Here’s an example of what HTML looks like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8hqs2e153mgcaixtn5l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8hqs2e153mgcaixtn5l.png" alt="A screenshot of HTML 5 Boilerplate code" width="800" height="441"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvq7kw4f7vsn6nfjxa9y0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvq7kw4f7vsn6nfjxa9y0.png" alt="A screenshot of the HTML 5 Boilerlplate code interpreted on a live webpage" width="800" height="895"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Developed in 1990, HTML is truly a relic from the birth of the internet — back in the days when adding color to a landing page was seen as ‘flashy’. Nevertheless, it’s as widely used today as it has been for decades — and it’s not going anywhere.&lt;/p&gt;

&lt;h3&gt;
  
  
  What can I build with HTML? 🛠
&lt;/h3&gt;

&lt;p&gt;Most commonly, HTML is used to build websites and landing pages. HTML is a basic web language, so its functionality is limited — but it can be used to tweak existing templates, perform basic marketing tasks (like add Google Analytics tags to a website), make SEO updates, and create custom layouts on e-commerce platforms like Amazon and Shopify.&lt;/p&gt;

&lt;h3&gt;
  
  
  How long does HTML take to learn? 📚
&lt;/h3&gt;

&lt;p&gt;HTML is an industry-standard language that every developer is expected to have a solid grasp of. The good news? As well as being one of the most widely-used web languages, it’s also among the most beginner-friendly.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You can learn the basics of HTML in a matter of hours, and start confidently building web pages within a month (depending on whether you’re &lt;a href="https://scrimba.com/articles/learn-web-development-part-time/" rel="noopener noreferrer"&gt;learning part time&lt;/a&gt;).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It’s important to note that while HTML is a vital IT skill, &lt;strong&gt;learning it alone won’t make you a web developer.&lt;/strong&gt; We’ll talk more about why you should learn HTML alongside CSS in the next section.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction to CSS
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is CSS, and how does it work? 🤔
&lt;/h3&gt;

&lt;p&gt;CSS stands for Cascading Style Sheets. It’s a &lt;strong&gt;style sheet language&lt;/strong&gt; that is used for &lt;strong&gt;styling HTML elements&lt;/strong&gt;, like text.&lt;/p&gt;

&lt;p&gt;CSS can add fonts, colors, and functionality to a page — turning a series of static, plain-text pages into a fully-functioning website. It can also:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create navigation bars on web pages&lt;/li&gt;
&lt;li&gt;Define page layouts with things like columns&lt;/li&gt;
&lt;li&gt;Add animation and motion.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is why HTML and CSS are so commonly taught in tandem.&lt;/p&gt;

&lt;p&gt;One of CSS’s most popular uses is adding responsiveness to websites. Think about going viewing a website on a desktop, and then viewing the same website on your phone. The layout will change completely to accommodate for this new screen size; the navigation bar might turn into an expandable menu icon, and some elements will be pushed further down the page. That’s CSS working its magic.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F00g01dgjdihiqsp8ws4d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F00g01dgjdihiqsp8ws4d.png" alt="A screenshot illustrating how, the smaller the device, the more compactly the same information and interface elements are featured" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;CSS is also known as the time saver of web development. It can be used to control the layout of multiple web pages all at once (rather than having to write different code for each layout).&lt;/p&gt;

&lt;p&gt;This means that if there's a change in the design or structure of a page, you only have to change it in one place and it will affect every page where CSS has been applied.&lt;/p&gt;

&lt;p&gt;Here’s an example of CSS:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4kkcum2mxntg2guci0s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4kkcum2mxntg2guci0s.png" alt="A screenshot of a CSS stylesheet" width="800" height="1029"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhf2k12oty8zuprvfobu8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhf2k12oty8zuprvfobu8.png" alt="A screenshot of an HTML page using the CSS styles defined in the previous image" width="776" height="850"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What can I build with CSS? 🛠
&lt;/h3&gt;

&lt;p&gt;You can’t actually build anything with CSS on its own. As it’s a styling language, CSS needs to be used in conjunction with a markup language (like HTML or XML) so it actually has properties to style. Otherwise, it would be like setting out to paint your house without the actual paint.&lt;/p&gt;

&lt;p&gt;CSS can add interactivity and responsiveness to static web pages. When used together, CSS and HTML can be used to create responsive websites, emails, and even basic animations.&lt;/p&gt;

&lt;h3&gt;
  
  
  How long does CSS take to learn? 📚
&lt;/h3&gt;

&lt;p&gt;CSS has more technical elements than HTML, which can mean it takes slightly longer to develop a working knowledge. Luckily, CSS and HTML are almost always taught together — which makes it an even easier (and faster) web language to get the hang of. Some courses take a mere &lt;strong&gt;few hours&lt;/strong&gt; — but, like any technical skill, you’ll want to continue gaining proficiency over several months.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction to JavaScript
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is JavaScript, and how does it work? 🤔
&lt;/h3&gt;

&lt;p&gt;JavaScript is the &lt;strong&gt;programming language&lt;/strong&gt; of the Web. since it was first introduced in the mid-90s, it’s become one of the most dominant languages in use across web development today. Not bad for a programming languages that was &lt;a href="https://thenewstack.io/brendan-eich-on-creating-javascript-in-10-days-and-what-hed-do-differently-today/" rel="noopener noreferrer"&gt;created in just 10 days&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Despite its humble beginnings, JavaScript is a crucial pillar of user interfaces as we know them. JavaScript improves the user experience of a website by allowing developers add complex features and high-level interactivity to webpages and web applications. This includes elements like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Content updates&lt;/li&gt;
&lt;li&gt;Interactive maps&lt;/li&gt;
&lt;li&gt;Responsive CTAs&lt;/li&gt;
&lt;li&gt;Data visualization&lt;/li&gt;
&lt;li&gt;Animated 3D graphics&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can also store values inside variables, like when you need to set a password and there’s a suggested password in the input box.&lt;/p&gt;

&lt;p&gt;Here’s an example of JavaScript:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhlwfp5w0ceub9ly8dx05.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhlwfp5w0ceub9ly8dx05.png" alt="A screenshot of JavaScript code that increments the counter by one when executed" width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7t3azy8vc0idbj13me4o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7t3azy8vc0idbj13me4o.png" alt="A screenshot of the HTML webpage which uses the JavaScript code mentioned above" width="716" height="706"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What can I build with JavaScript? 🛠
&lt;/h3&gt;

&lt;p&gt;JavaScript is a lot more versatile than HTML or CSS, and its uses stretch beyond the web. It's used to build almost everything you see on any website or app — from simple text boxes, through to complex games like Candy Crush Saga or Angry Birds 2.&lt;/p&gt;

&lt;p&gt;Other popular digital products built with JavaScript include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💻 Popular servers, like Netflix and PayPal&lt;/li&gt;
&lt;li&gt;📱 Mobile apps like Uber and Facebook&lt;/li&gt;
&lt;li&gt;🚀 And even &lt;a href="https://www.infoq.com/news/2020/06/javascript-spacex-dragon/" rel="noopener noreferrer"&gt;rockets&lt;/a&gt; (yes, you read that right) with Space X&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It can also be used as a back-end programming language.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://scrimba.com/articles/how-long-does-it-take-to-learn-javascript/#:~:text=Most%20successful%20coders%20agree%20you,to%20adjust%20your%20expectations%20accordingly" rel="noopener noreferrer"&gt;How long does JavaScript take to learn?&lt;/a&gt; 📚
&lt;/h3&gt;

&lt;p&gt;JavaScript is a highly technical programming language, and the time it takes to master the fundamentals has been subject of widespread debate in the &lt;a href="https://scrimba.com/articles/developer-communities/" rel="noopener noreferrer"&gt;web development community&lt;/a&gt;. Depending on your learning style, it might take you 1-2 months to learn JavaScript in its basic form — but some programmers have suggested it’s taken them closer to a year to develop a solid working proficiency.&lt;/p&gt;

&lt;h2&gt;
  
  
  How do HTML, CSS, and JavaScript work together?
&lt;/h2&gt;

&lt;p&gt;Now that we understand how HTML, CSS, and JavaScript work as individual web languages, how do they work together in practice?&lt;/p&gt;

&lt;p&gt;Imagine a website as a &lt;strong&gt;car that needs to be built&lt;/strong&gt;, and web developers as &lt;strong&gt;the mechanics who’ve been tasked with building it&lt;/strong&gt;. They’ll take the blueprints —  which detail how the car should look in its final form — and turn them into a physical and functioning car that can get the driver from A to B.&lt;/p&gt;

&lt;p&gt;To carry through their vision, they have three tools in their arsenal:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML (the building blocks of the car)&lt;/li&gt;
&lt;li&gt;CSS (the style, look, and feel of the car)&lt;/li&gt;
&lt;li&gt;JavaScript (the cars engine and smart features)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;First, they’ll use HTML to construct the cars basic structure or the ‘skeleton’. They’ll create door panels, wheels, trunks, and hoods that can be welded together. Not very aesthetically pleasing or functional, but HTML will get the car components built.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzqzayperj9lzrawt6hu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzqzayperj9lzrawt6hu.png" alt="An image of a car's metal structure" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, CSS is used to embellish the car’s basic structure with style and function. Colors are added, as well as materials like leather seats, a wooden dashboard, and aluminium rims. Suddenly the car has gone from a bare-bones structure to something you’d actually want to drive.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw6abanbedzvo3lar67an.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw6abanbedzvo3lar67an.png" alt="A front-facing image of a fully built car" width="585" height="330"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now it’s time to take it from show-car to fully functioning vehicle. Using JavaScript, the developers are able to inject some much-needed functionality into the car with a powerful engine, lighting, speakers, dash, and displays. With JavaScript, the car’s finishing touches can be added — and before you know it, it’s ready to take to the roads with its sleek new look.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa7vq758hjp5nfkd11x2h.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa7vq758hjp5nfkd11x2h.gif" alt="A moving image of a speedometer needle with 'VROOM VROOM' text underneath" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Okay, a website is pretty different to a car. But this analogy has hopefully demonstrated how to use CSS and JavaScript in HTML in their most basic sense — and how each function works together to create the finished product.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftyyt22amynedy3067zxz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftyyt22amynedy3067zxz.png" alt="An image showing a car's assembly process in comparison to HTML CSS and JavaScript" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Should I learn HTML, CSS, or JavaScript first?
&lt;/h2&gt;

&lt;p&gt;If you’re on the precipice of a career change into web development, you might be wondering: &lt;a href="https://scrimba.com/articles/which-programming-language-first/" rel="noopener noreferrer"&gt;Which web language should I prioritise learning first?&lt;/a&gt; And does it matter?&lt;/p&gt;

&lt;p&gt;As we explained earlier, it makes sense to &lt;strong&gt;learn HTML and CSS together first&lt;/strong&gt;. The two go hand in hand, so it’s important to develop a working knowledge of how to apply them both as you work on real-world projects. You’ll also accelerate your skills as a web developer faster than if you’d opted to learn HTML on its own. Once you’ve got a solid foundation in HTML and CSS, you’ll be in a better position to tackle JavaScript’s slightly steeper learning curve.&lt;/p&gt;

&lt;p&gt;In some cases, you can learn HTML, CSS, and JavaScript as part of one course. Which brings us to the next section…&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to learn HTML, CSS, and JavaScript
&lt;/h2&gt;

&lt;p&gt;For an introduction to HTML and CSS, we recommend opting for a digestible, beginner-friendly short course — like our &lt;a href="https://scrimba.com/learn/htmlandcss" rel="noopener noreferrer"&gt;HTML and CSS course&lt;/a&gt; taught by Scrimba Founder (and industry-leading front-end superstar) Per Harald Borgen. The course features This course consists of 95 bite-sized lectures, which walk you through the process of using HTML and CSS to build and deploy your first website. The best part? &lt;strong&gt;It’s completely free&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Once you’ve completed the HTML and CSS course, you can move on to our &lt;a href="https://scrimba.com/learn/learnjavascript" rel="noopener noreferrer"&gt;free JavaScript course for beginners&lt;/a&gt;, which will see you master the fundamentals of JavaScript by solving 140+ interactive coding challenges and building three fun projects.&lt;/p&gt;

&lt;p&gt;If you’re looking to consolidate your introduction to web development and web languages, another approach is to find a comprehensive frontend development course that allows you to &lt;strong&gt;learn HTML, CSS, and JavaScript through one curriculum&lt;/strong&gt; — like &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;Scrimba’s Frontend Developer Career Path&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Featuring over 70 hours of top-notch tutorials, hundreds of interactive coding challenges, and tailored feedback from industry-leading developers, we’ll equip you with all the tools and skills you need to land your first web development gig (no previous experience required). You’ll also get access to an active community of other beginner developers on a similar journey.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Can you learn web development part time?</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Thu, 17 Nov 2022 01:32:41 +0000</pubDate>
      <link>https://forem.com/scrimba/can-you-learn-web-development-part-time-3k0l</link>
      <guid>https://forem.com/scrimba/can-you-learn-web-development-part-time-3k0l</guid>
      <description>&lt;p&gt;Web development is one of the hottest 🔥 careers in tech right now. Promising a great salary, innovative projects, and a future-proof career — it's no wonder an increasing number of people are considering the dev life.&lt;/p&gt;

&lt;p&gt;That said, there's (understandably) a lot of anxiety around switching careers right now.&lt;/p&gt;

&lt;p&gt;As inflation skyrockets, political systems change, and we continue to grapple with the aftermath of the pandemic — quitting a stable job to facilitate a career change is seen as risky business.&lt;/p&gt;

&lt;p&gt;Whether or not you actually need to quit your job to learn web development has been a subject of hot debate in recent years. We're here to set the record straight: &lt;strong&gt;You don't.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;More and more tech-hopefuls are realizing that learning web development part time won't make you any less credible on the job market. Even some of the industry's most highly-regarded web developers made the switch while continuing to work full time jobs.&lt;/p&gt;

&lt;p&gt;Between &lt;strong&gt;short courses&lt;/strong&gt; and &lt;strong&gt;bootcamps, coding games&lt;/strong&gt; and &lt;strong&gt;YouTube tutorials&lt;/strong&gt;: It's truly never been easier to learn in-demand web development skills part time.&lt;/p&gt;

&lt;p&gt;How, you ask? Read on to find out!&lt;/p&gt;

&lt;h2&gt;
  
  
  Can you learn web development while working full time?
&lt;/h2&gt;

&lt;p&gt;First off, let's clarify what we actually mean by 'learning web development.' Web development is a discipline that requires proficiency in multiple skills; including testing, debugging, and responsive web design. Most importantly, though, web developers need to know how to code.&lt;/p&gt;

&lt;p&gt;Web developers use web programming languages to build websites and applications — so naturally, that's the best place to start.&lt;/p&gt;

&lt;p&gt;Coding languages you'll need to learn include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🛠 HTML&lt;/li&gt;
&lt;li&gt;🛠 JavaScript&lt;/li&gt;
&lt;li&gt;🛠 CSS&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F051997ai590famow549y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F051997ai590famow549y.png" alt="The Web Development Journey" width="800" height="730"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;...as well as React, APIs, and web architecture. You'll also want to learn the practical applications of these coding languages, so you can start to build up a professional portfolio filled with web-based projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Right — back to the question at hand. Yes, you can absolutely learn web development part time. What's more, most people do.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the face of mounting economic uncertainty, quitting a stable job to facilitate a career change just isn't a viable option for everyone. Learning to code part time allows for a more graduate, planned segue into web development. This way, you can get to know the field without worrying that you don't have a financial backup plan if things change.&lt;/p&gt;

&lt;p&gt;There's even more good news: To meet the increasing demand of people wanting to learn to code without quitting their jobs, a growing number of coding bootcamps are offering options for part time, flexibly-paced learning. Today, there's an abundance of part time coding courses and programs to help you make the switch (we'll look at these a little further on).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You might be wondering, do I really need to enroll in a school or bootcamp? Or can I learn web development on my own?&lt;/strong&gt; 🤔&lt;/p&gt;

&lt;p&gt;You certainly don't need to enroll in a bootcamp program to learn web development. Not to be all 'how long is a piece of string,' but there is truly no right or wrong way to learn web development skills. Some people prefer to learn web development on their own using short courses or YouTube tutorials, while others prefer the structured curriculum and accountability that bootcamps provide.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The TL;DR?&lt;/strong&gt; It all depends on your goals, budget, and learning style.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to learn to code part time
&lt;/h2&gt;

&lt;p&gt;Before we dive into some of the ways you can start learning to code around your current schedule, it's important to note that not all coding languages are made equally. Some coding languages are harder to get to grips with than others, and might take longer to really nail. Having said that, we've rounded up some tips and tricks to get the most out of learning to code part time — no matter the language.&lt;/p&gt;

&lt;h3&gt;
  
  
  Prioritize key skills 📚
&lt;/h3&gt;

&lt;p&gt;As web developers are often expected to know multiple languages, a common struggle beginners face is deciding which coding language to learn first. The general consensus is that beginners should learn in-demand frontend languages first (HTML and CSS and JavaScript) before moving onto backend languages (Python).&lt;/p&gt;

&lt;p&gt;Another great way to prioritize the skills and languages you learn is by browsing &lt;a href="https://scrimba.com/articles/where-to-find-junior-web-developer-jobs/" rel="noopener noreferrer"&gt;junior web development job descriptions&lt;/a&gt;. You'll get a sense of what employers might expect you to know, and use that as a basis for which skills you should learn first (and by when). Remember: You don't need to know &lt;em&gt;everything&lt;/em&gt; about web development to secure your first role. Web developers are constantly learning and developing — so focus on mastering the fundamentals, and the rest will come!&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a schedule 🗓
&lt;/h3&gt;

&lt;p&gt;Learning to code part time shouldn't feel like a chore. At the same time, it's not easy to muster up the motivation to learn a new skill after a day's hard work. To keep yourself on track, it's worth creating a realistic schedule you can stick to each week.&lt;/p&gt;

&lt;p&gt;The key word here is 'realistic.' It's better to create a lighter, more manageable schedule that you can actually stick to, than pushing yourself so hard that you become overwhelmed and fall off the bandwagon altogether. Even if it's as little as 20 minutes a day, or one 'study day' a week, a schedule is a great way to avoid unintentionally de-prioritizing your studies.&lt;/p&gt;

&lt;h3&gt;
  
  
  Set goals and milestones 📍
&lt;/h3&gt;

&lt;p&gt;Behind every decision to learn to code is a 'big picture' driver. Maybe you're looking to forge a new career as a web developer. Maybe you're already in an IT role, but keen to upskill. Whatever your motivation for learning to code, make sure it's translated into actionable goals and milestones you can stick to!&lt;/p&gt;

&lt;p&gt;Because learning to code part time takes longer than learning to code full time, it can be easy to lose sight of your north star. In addition to having clear goals, make sure to attach timelines and dates to those goals. 'I want to be able to do x, by x month.' Having set milestones in your calendar will help you stick to your schedule, and give you opportunities to stop and reflect on your journey so far.&lt;/p&gt;

&lt;h3&gt;
  
  
  Lean on your community 🤝
&lt;/h3&gt;

&lt;p&gt;When it comes to learning to code, never underestimate the power of &lt;a href="https://scrimba.com/articles/developer-communities/" rel="noopener noreferrer"&gt;developer communities&lt;/a&gt;. Not only will you feel less isolated, you'll also be connected to other like minded part time learners at a similar stage in their coding journeys to you. You can even find 'coding buddies' to keep you accountable, and learn to code in tandem.&lt;/p&gt;

&lt;p&gt;Most courses and bootcamps have their own coding communities who support and uplift each other. If you're learning to code independently, you can find fellow coders on &lt;a href="http://youtube.com/" rel="noopener noreferrer"&gt;YouTube&lt;/a&gt;, &lt;a href="http://quora.com/" rel="noopener noreferrer"&gt;Quora&lt;/a&gt;, and &lt;a href="http://reddit.com/" rel="noopener noreferrer"&gt;Reddit&lt;/a&gt;. At Scrimba, we have a growing &lt;a href="https://discord.com/" rel="noopener noreferrer"&gt;Discord&lt;/a&gt; community to help beginners connect with more experienced developers. Before you know it, coding will feel more of a social activity than a solitary one (and who doesn't love socializing after work?).&lt;/p&gt;

&lt;h3&gt;
  
  
  Choose the right course ✏️
&lt;/h3&gt;

&lt;p&gt;Why 'the right' course? Because everyone learns differently. Going for a course that doesn't suit your learning style will see you struggle to absorb the material, and eventually lose motivation.&lt;/p&gt;

&lt;p&gt;When learning to code part time, it's vital you choose a course that best suits your learning needs — whether that's coding games, videos, or written tutorials. It's also worth reflecting on whether the courses you're considering tie into your goals. Will this get you where you need to be on your timeline? Will you need to supplement this course with other material?&lt;/p&gt;

&lt;p&gt;Luckily, there are plenty of free short courses that will help you figure out how you learn best, sinking thousands of dollars (or hours) into something that isn't the right fit. Which brings us to the next section...&lt;/p&gt;

&lt;h2&gt;
  
  
  The 5 best free courses to learn to code part time
&lt;/h2&gt;

&lt;p&gt;If you're looking for a shorter, more manageable, and more affordable introduction to web development, these five self-paced coding courses will get you up to speed with the basics — and serve as a great jumping off point for learning more advanced concepts.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scrimba (HTML/ CSS)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://scrimba.com/learn/htmlandcss" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9502xnt4ehcjn3vhh4lj.png" alt="Learn HTML and CSS with Scrimba" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We offer a wide selection of free, beginner-friendly coding courses — with our &lt;a href="https://scrimba.com/learn/htmlandcss" rel="noopener noreferrer"&gt;HTML and CSS course&lt;/a&gt; among the most popular. Created by industry-leading instructor Per Harald Borgen, you'll learn two of web development's core coding languages in tandem over 31 interactive screencasts. You'll be kept on your toes with interactive challenges, and you'll really feel like you're coding along with Per in real time.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; Free&lt;/p&gt;

&lt;h3&gt;
  
  
  FreeCodeCamp (HTML)
&lt;/h3&gt;

&lt;p&gt;With over 9,000 coding tutorials, FreeCodeCamp is a great platform for beginner coders — as is their Youtube channel. In &lt;a href="https://www.freecodecamp.org/news/learn-html-and-css-from-the-ceo-of-scrimba/" rel="noopener noreferrer"&gt;this brand new five-hour video course&lt;/a&gt;, you'll learn HTML and CSS with our very own Scrimba CEO. What's more, you'll find plenty of inspiring and motivating conversations in the comment section.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; Free&lt;/p&gt;

&lt;h3&gt;
  
  
  Codecadamy (HTML)
&lt;/h3&gt;

&lt;p&gt;Codecademy's &lt;a href="https://www.codecademy.com/learn/learn-html" rel="noopener noreferrer"&gt;Learn HTML&lt;/a&gt; course will see you building web pages with HTML in just 9 hours. Built-in quizzes after each lesson to keep your knowledge fresh makes it a great option for part time learners. The course is free, but if you upgrade to the pro subscription, you can get a certificate of completion to stick on your resumé or LinkedIn profile.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; Free&lt;/p&gt;

&lt;h3&gt;
  
  
  Web.Dev (CSS)
&lt;/h3&gt;

&lt;p&gt;Boasting interactive demos, self-assessments, and podcast episodes, this &lt;a href="https://web.dev/learn/css/" rel="noopener noreferrer"&gt;Learn CSS&lt;/a&gt; course breaks down the fundamentals of CSS into digestible tutorials. You'll learn CSS fundamentals like the box model, cascade and specificity, as well as functions like color types, gradients, logical properties, and inheritance.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; Free&lt;/p&gt;

&lt;h3&gt;
  
  
  Educative (CSS)
&lt;/h3&gt;

&lt;p&gt;102 lessons, 131 playgrounds, 159 illustrations — all this and more in &lt;a href="https://www.educative.io/courses/the-complete-advanced-guide-to-css?affiliate_id=5073518643380224" rel="noopener noreferrer"&gt;Educative's Complete Advanced Guide to CSS&lt;/a&gt; course. Aimed at complete beginners, this course covers all the essential concepts and lets you practice code in your browser with text-based exercises. If video isn't quite your jam, this course might be right for you.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; Free&lt;/p&gt;

&lt;h2&gt;
  
  
  The 5 best part time coding bootcamps
&lt;/h2&gt;

&lt;p&gt;Coding bootcamps are designed to transform complete beginners into job-ready web developers. Unlike individual short courses, coding bootcamps offer longer, more in-depth programs with comprehensive curriculums. This often means you're looking at a longer timeline of anything from a month to over a year.&lt;/p&gt;

&lt;p&gt;Many popular coding bootcamps can come at a pretty penny — but there are a few affordable options that still provide the mentorship and career support you need to land your first job. So let's look at which part time bootcamps are worth the price tag.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scrimba
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F84lxow6bximpcdfvkl34.png" alt="The Frontend Developer Career Path" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We've truly 'cracked the code' of how to teach motivated devs-to-be all the skills, tools, and processes they need to get hired with their &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;Front-End Career Path&lt;/a&gt;. At a fraction of the cost of competitors, we offer tailored support through talented instructors, and peer-to-peer learning with their growing &lt;a href="http://discord.com/" rel="noopener noreferrer"&gt;Discord&lt;/a&gt; community. If you want a comprehensive curriculum built to make you a confident, job-ready developer, but can't justify the cost of a more expensive bootcamp, this is the course for you.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; $30/month&lt;/p&gt;

&lt;h3&gt;
  
  
  CareerFoundry
&lt;/h3&gt;

&lt;p&gt;CareerFoundry's &lt;a href="https://careerfoundry.com/en/courses/become-a-web-developer/" rel="noopener noreferrer"&gt;Full-Stack Web Development Program&lt;/a&gt; is one of the most comprehensive options on the market. You'll learn both basic and advanced web development skills, and build a job-ready portfolio as you progress through the course. They also boast a full career services team to help you land your first web development role.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; £6,500&lt;/p&gt;

&lt;h3&gt;
  
  
  Wilde Coding School
&lt;/h3&gt;

&lt;p&gt;Wilde Coding School's &lt;a href="https://www.wildcodeschool.com/en-GB/courses/web-development-course-full-time" rel="noopener noreferrer"&gt;Web Development Course&lt;/a&gt; offers part time, remote learning for complete beginners — created to help you become a web developer in under five months. You'll benefit from a dedicated career support team and the company's growing network of employers to help you land a job upon completion.&lt;/p&gt;

&lt;p&gt;💰 Price: €6,500&lt;/p&gt;

&lt;h3&gt;
  
  
  The Jump
&lt;/h3&gt;

&lt;p&gt;The Jump's 24-week &lt;a href="https://www.thejump.tech/part-time-web-developer-course/" rel="noopener noreferrer"&gt;part time web developer bootcamp&lt;/a&gt; was created for individuals looking to make 'the jump' into web development without quitting their job. The course is taught through live Zoom calls led by industry expert instructors, rather than self-paced on-demand tutorials — making it a great option for learners who prefer live interaction.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; £6,750&lt;/p&gt;

&lt;h3&gt;
  
  
  Udemy
&lt;/h3&gt;

&lt;p&gt;Udemy's &lt;a href="https://www.udemy.com/course/the-web-developer-bootcamp/?LSNPUBID=JVFxdTr9V80&amp;amp;ranEAID=JVFxdTr9V80&amp;amp;ranMID=39197&amp;amp;ranSiteID=JVFxdTr9V80-d1.Nmshgl6K1eonUM6ORPw&amp;amp;utm_medium=udemyads&amp;amp;utm_source=aff-campaign" rel="noopener noreferrer"&gt;Web Developer Bootcamp&lt;/a&gt; is one of the cheapest and most accessible web development courses on the scene. You'll learn everything you need to know about web development over 63.5 hours of on-demand video, and graduate with a certificate of completion. If you like video-based autonomous learning, this is the course to consider.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;Price:&lt;/strong&gt; £59.99&lt;/p&gt;

&lt;h2&gt;
  
  
  Honorable mention: Apprenticeships ✨
&lt;/h2&gt;

&lt;p&gt;Fancy getting paid to learn to code part time? You might want to consider a coding apprenticeship.&lt;/p&gt;

&lt;p&gt;While apprenticeships have been around since ancient times, coding apprenticeships (also known as software apprenticeships) are relatively new to the tech industry. Rather than waiting to graduate from a bootcamp course or program and finding a job as a web developer, becoming a coding apprentice means joining a company at the very beginning of your coding journey — and learning as you go.&lt;/p&gt;

&lt;p&gt;Companies hire coding apprentices as an investment. Apprentices get to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🙇 Learn how web development is done at that specific company&lt;/li&gt;
&lt;li&gt;💰 Seamlessly transition into a web development role without having to be onboarded.&lt;/li&gt;
&lt;li&gt;💻 Apply their new-found skills to practical, real-world projects&lt;/li&gt;
&lt;li&gt;🧠 Learn to code in the best possible way: Surrounded by industry experts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In turn, company's get to develop specialist skills directly within their teams — and plug any specific skills gap they might be missing.&lt;/p&gt;

&lt;p&gt;Just ask &lt;a href="https://scrimba.com/podcast/talent-alone-is-not-enough-how-theo-ntogiakos-changed-careers-at-49-and-landed-a-paid-web-dev-apprenticeship/" rel="noopener noreferrer"&gt;Theo&lt;/a&gt;, who recently made the switch into web development as a coding apprentice with Makers Academy. In &lt;a href="https://scrimba.com/podcast/talent-alone-is-not-enough-how-theo-ntogiakos-changed-careers-at-49-and-landed-a-paid-web-dev-apprenticeship/" rel="noopener noreferrer"&gt;this podcast episode&lt;/a&gt;, Theo talks all a bout his first-hand experience of coding apprenticeships (and why they're so great):&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"[Apprenticeships] give you a very quick look at how it is to work as a team, how it is to work as a software developer. But at the same time, it gives you an idea of what stuff is out there."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpaifr7bx8bi4zx9byae.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpaifr7bx8bi4zx9byae.png" alt="Theo's I Got Hired Story" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you're curious about how apprenticeships stack up, the episode is well worth a listen!&lt;/p&gt;

&lt;h2&gt;
  
  
  The verdict 🤔
&lt;/h2&gt;

&lt;p&gt;Hopefully, this blog post has put your mind at ease about committing to learning to code part time. Between coding bootcamps, apprenticeships, and free short courses, there's no reason you can't become a fully qualified job-ready web developer without quitting your job.&lt;/p&gt;

&lt;p&gt;Get started with a &lt;a href="https://scrimba.com/allcourses" rel="noopener noreferrer"&gt;free Scrimba course&lt;/a&gt; today, and let's get your web development journey underway!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>community</category>
    </item>
    <item>
      <title>Why are web developers paid so much?</title>
      <dc:creator>Alex Booker</dc:creator>
      <pubDate>Wed, 26 Oct 2022 00:28:16 +0000</pubDate>
      <link>https://forem.com/scrimba/why-are-web-developers-paid-so-much-55i6</link>
      <guid>https://forem.com/scrimba/why-are-web-developers-paid-so-much-55i6</guid>
      <description>&lt;p&gt;A few years ago, web development was seen as a mysterious tech role where ‘nerds’ wrote lines of unsolvable code in dark rooms. Fast forward to today, and web development makes you think of images of innovative professionals who’ve coded their way to the top of the tech industry.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F92ymozpdsmdfpoid8qwr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F92ymozpdsmdfpoid8qwr.png" alt="From coding in a dark room, to being at the top of the tech industry" width="800" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Okay, both of these &lt;em&gt;are&lt;/em&gt; stereotypes — but web development is increasingly perceived as one of tech’s highest-earning roles, and many career-changers are drawn to the field because of its earning potential.&lt;/p&gt;

&lt;p&gt;So why are web developers paid so much? And can a web developer become a millionaire?&lt;/p&gt;

&lt;p&gt;In this article, we'll de-code (get it?) web developer salaries, and understand the drivers behind what makes web development such a lucrative career path. We’ll also equip you with some actionable tips to boost your web development salary, no matter what level you’re at.&lt;/p&gt;

&lt;p&gt;Let’s start with the basics:&lt;/p&gt;

&lt;h2&gt;
  
  
  How much do web developers actually earn?
&lt;/h2&gt;

&lt;p&gt;With any career change, you’ll want to know that your new skills will pay the bills. Before embarking on a journey into web development, you might be wondering: Do web developers make good money?&lt;/p&gt;

&lt;p&gt;Naturally, what ‘good money’ looks like is subjective — and the caveat of an ‘average salary’ is that it doesn’t reflect the full spectrum of web developer salaries and experience levels. If you’re wondering if you can get paid six figures as a web developer, we’ve got good news: &lt;strong&gt;You can!&lt;/strong&gt; There isn’t necessarily a cap on what most web developers can earn, as long as they continue growing and developing their skills.&lt;/p&gt;

&lt;p&gt;Nevertheless, it’s still important to get a sense of salary benchmarks. So let’s look at a snapshot of average web developer salaries in the UK (and beyond) with 2022 salary data pulled from &lt;a href="http://glassdoor.com/" rel="noopener noreferrer"&gt;Glassdoor&lt;/a&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Average junior web developer salary in the UK: &lt;strong&gt;£25,955&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Average mid-level web developer salary in the UK: &lt;strong&gt;£35,765&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Average senior web developer salary in the UK: &lt;strong&gt;£49,334&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;So, what about the average hourly wage for a freelance web developer in the UK?&lt;/strong&gt; According to &lt;a href="https://www.expertmarket.co.uk/web-design/how-much-do-freelance-web-designers-charge" rel="noopener noreferrer"&gt;Expert Market&lt;/a&gt;, freelance web developers can charge anything between £250 and £750+ per day based on experience — with expert developers charging much more.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let’s look at how this data stacks up against the rest of the world:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuu4031wgq8e7bc9ta6v3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuu4031wgq8e7bc9ta6v3.png" alt="Average web developer salary statistics" width="800" height="646"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Ireland&lt;/strong&gt;: €43,555 (£39,414)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;The USA&lt;/strong&gt;: US$73,816 (£68,931)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Canada&lt;/strong&gt;: CA$64,009 (£44,011)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Germany&lt;/strong&gt;: €52,236 (£47,269)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;France&lt;/strong&gt;: €40,000 (£36,197)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Spain&lt;/strong&gt;: €24,775 (£22,419)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;South Africa&lt;/strong&gt;: ZAR 240,000 (£12,350)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Australia&lt;/strong&gt;: A$78,000 (£47,333)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;The UAE&lt;/strong&gt;: AED 72,000 (£18,258)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;India&lt;/strong&gt;: ₹240,000 (£2,744)&lt;/li&gt;
&lt;li&gt;Average web developer salary in &lt;strong&gt;Singapore&lt;/strong&gt;: SGD 42,000 (£27,314)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Again, this is just a snapshot. If you’re curious about what web developers earn in your country, we recommend checking out your local average web developer salaries using Glassdoor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why are web developers paid so much?
&lt;/h2&gt;

&lt;p&gt;The short answer to this question is that web development is a complex and layered role, and developers work incredibly hard. The long answer is a little more well-rounded — so let’s take a look at five reasons why web developers are worth every penny.&lt;/p&gt;

&lt;h3&gt;
  
  
  Demand
&lt;/h3&gt;

&lt;p&gt;Search the web for the most in-demand tech skills in 2022, and you’re almost guaranteed to find the word ‘developer’ on every single list. A quick &lt;a href="http://indeed.com/" rel="noopener noreferrer"&gt;Indeed&lt;/a&gt; search brought up 6,654 UK based web developer jobs alone, but a more comprehensive search, including frontend and backend development jobs across &lt;a href="http://linkedin.com/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; and &lt;a href="http://glassdoor.com/" rel="noopener noreferrer"&gt;Glassdoor&lt;/a&gt;, will show infinitely more.&lt;/p&gt;

&lt;p&gt;The Covid-19 pandemic saw skyrocketing demand for developers as new emphasis was placed on digital experiences. Increasing demand meant a war for talent for talented devs, which led to higher salaries across the board. High demand gives web developers the upper hand when negotiating salaries, as there’s always an abundance of roles available.&lt;/p&gt;

&lt;h3&gt;
  
  
  Skillset
&lt;/h3&gt;

&lt;p&gt;Web development is known as a super accessible career path. Absolutely anyone can learn to code — and for free, at that. But to become a legitimate, job-ready web developer takes a fair amount of hard work. Most web developers are well-versed in more than one coding language, and will use a variety of coding languages in their work to get the job done.&lt;/p&gt;

&lt;p&gt;Web development is also a highly technical role, which requires a good dose of self-discipline to truly master. To become a web developer, you’ll need to learn skills like testing and debugging, analysis, frontend and/or backend development, technical SEO, and even responsive web design. But, as we’ve learned, your hard work &lt;em&gt;will&lt;/em&gt; pay off!&lt;/p&gt;

&lt;h3&gt;
  
  
  Responsibilities
&lt;/h3&gt;

&lt;p&gt;Web developers do so much more than just build, develop, and deploy websites. With each digital experience they create, it’s up to the web developer to balance client or company needs with the experience of the end user. To manage this, web development roles include a degree of project management, presentation, and collaboration with designers and other stakeholders.&lt;/p&gt;

&lt;p&gt;Web developers are also continually optimizing their digital products; finding ways to improve how the website runs, and coming up with quick and efficient ways to fix bugs. This is highly technical and collaborative work which requires developers to solve complex issues on an ongoing basis.&lt;/p&gt;

&lt;h3&gt;
  
  
  Adaptability
&lt;/h3&gt;

&lt;p&gt;In addition to being versatile, web developers also have to be incredibly adaptable. Technology — and the internet — is always changing fast. User needs are also continuously evolving, and web developers are part-responsible for meeting and anticipating those needs. As a result, a career in web development means &lt;strong&gt;continuous learning&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Web developers have to be in the know of new developments, trends, tools, practices, and techniques. They’re also expected to regularly upskill and improve in order to stay abreast of the ever-changing technological landscape. For all these reasons (and more) the approach and mindset developers bring to tech teams is extremely valuable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Specializations
&lt;/h3&gt;

&lt;p&gt;Many web developers decide to specialize in a specific type of web development, which has an impact on their earning potential. For example, the average UK frontend developer salary is slightly higher than a general web developer salary at &lt;strong&gt;£44,833&lt;/strong&gt;. Backend developer salaries are even higher, averaging at &lt;strong&gt;£50,358&lt;/strong&gt; in the UK. Many have also become specialists in specific areas of web development, like JavaScript frameworks or DevOps. This makes their work more valuable, which is reflected in their salaries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who earns more: Web developers or software engineers?
&lt;/h2&gt;

&lt;p&gt;Maybe you’re interested in learning to code, but can’t seem to wrap your head around the seemingly endless list of developer and software engineer job titles. Web development, software development, and software engineering are often bundled up as part of the same discipline. In some cases, the terms are even used interchangeably.&lt;/p&gt;

&lt;p&gt;Technically, there is a lot of overlap. Both web developers and software engineers rely on similar coding languages and technologies to build, design, and deploy digital experiences. The difference lies more in the nature of the work itself.&lt;/p&gt;

&lt;p&gt;Web developers work primarily on web experiences, web applications, and desktop programs. On the other hand, software engineers tend to work on a wider variety of IT programs and computer systems, including hardware. Because of this, software engineering is generally seen as more technical — which is reflected in their take-home. In the UK, the average software engineer salary sits at &lt;strong&gt;£48,891&lt;/strong&gt; (13k more than web developers).&lt;/p&gt;

&lt;p&gt;While this might seem like compelling data, there’s a payoff on both sides. One reason so many opt for web development is because it’s a slightly less stressful career path, and generally easier to get started with. Plenty of challenges to keep you on your toes, but &lt;a href="https://scrimba.com/articles/do-you-need-a-computer-science-degree-to-be-a-web-developer/" rel="noopener noreferrer"&gt;the skills are more accessible for complete beginners&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Web development can also be a solid stepping-stone into more technical and specialized programming career paths. As there are so many shared skills between the two disciplines, there’s no reason a web developer couldn’t become a software engineer (and vice versa).&lt;/p&gt;

&lt;h2&gt;
  
  
  How do I increase my salary as a web developer?
&lt;/h2&gt;

&lt;p&gt;As with most entry-level positions, a junior web developer role won’t see you rolling in cash. With experience, your salary will naturally increase — but there are also a few additional ways you can maximize your earning potential as a web developer:&lt;/p&gt;

&lt;h3&gt;
  
  
  Upskill
&lt;/h3&gt;

&lt;p&gt;One of the best ways to make yourself more profitable as a web developer is to update your skills arsenal. This could be something straightforward, like learning a new coding language. But if you really wanted to push the boat out, you could &lt;a href="https://scrimba.com/learn/design" rel="noopener noreferrer"&gt;learn web design&lt;/a&gt;. Web developers who can both build — and design — a website are indispensable to tech teams and clients, as it means they can hire one person instead of two (and avoid the hassle of friction-filled handoffs). Demand for developers who also design is high, which puts them in a good position to earn more. As in, &lt;em&gt;a lot&lt;/em&gt; more.&lt;/p&gt;

&lt;p&gt;If you’re not able to take on some more responsibility in your current role, freelancing is a great way to gain new skills and build up your portfolio.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a personal brand
&lt;/h3&gt;

&lt;p&gt;If you thought you had to be an influencer to create a personal brand, you’re wrong. More and more tech professionals are building personal brands that attract employers, grow followers, and boost credibility. You also don’t have to be an industry leader or senior developer to create a personal brand: Personal brands are all about storytelling, and everyone has a story to tell — even junior developers. If you want to get your name out there to higher-paying employers or clients, and showcase that you’re up to date with the latest tools and techniques, this is a vital step.&lt;/p&gt;

&lt;h3&gt;
  
  
  Build a niche
&lt;/h3&gt;

&lt;p&gt;If you’re new to web development, your focus will be about getting as much industry exposure as possible. But the further you get along your career, the pickier you can be about the industries you work in. As a follow-on from building a personal brand, you might want to consider choosing a niche that makes you an ideal candidate for specific web development roles. This could be a specific industry you’ve really gotten to know, an approach you’ve mastered, or a web development skill you feel you’ve really nailed. Having a specific niche will give you a competitive edge on the tech job market, and will likely mean clients and employers within that niche will pay top dollar to secure you.&lt;/p&gt;

&lt;h3&gt;
  
  
  Switch companies
&lt;/h3&gt;

&lt;p&gt;Sometimes the best solution is the most simple one, and it might be that your company simply isn’t paying you enough — especially if there aren’t any raises or promotions on the horizon. Continuous learning and professional development are important pillars of the development community, so it’s also important to recognise when you’re stagnating in your role — and the projects you’re working on aren’t challenging you.&lt;/p&gt;

&lt;p&gt;If you follow some of the above steps, you’ll be in a much better position to negotiate a higher salary in your new role.&lt;/p&gt;

&lt;h3&gt;
  
  
  Increase your visibility
&lt;/h3&gt;

&lt;p&gt;The web development community is big, supportive, and vocal. If you’re looking for ways to get your name out there, start there. There’s an abundance of ways to network and get more involved; including attending webinars and meet-ups, answering questions on coding forums like &lt;a href="https://discord.com/" rel="noopener noreferrer"&gt;Discord&lt;/a&gt;, going to Hackathons — the list is endless. Not only will you meet gain fresh perspectives and learn new skills, you’ll also start to be seen as an industry expert — which will help legitimize your quest for a higher salary.&lt;/p&gt;

&lt;h2&gt;
  
  
  The verdict
&lt;/h2&gt;

&lt;p&gt;As you segue into web development, it’s important to &lt;strong&gt;manage your expectations&lt;/strong&gt;. Yes, web developers can earn six figures, and even become millionaires. But, as is the case with any new career, you have to start somewhere.&lt;/p&gt;

&lt;p&gt;We’re &lt;em&gt;definitely&lt;/em&gt; not going to say ‘money isn’t everything’ because, as exciting as it is, no one would work as a web developer for free. But there are other important factors to take into account in your decision to pursue web development; like whether or not web development is future-proof (it is), if web developers are in high demand (they are), and whether web development would be a fulfilling career path for you (if you’re reading this blog post, we’d wager that’s a yes!).&lt;/p&gt;

&lt;p&gt;Web development has a lot to offer. If you’re wondering what to get started with, we recommend a &lt;a href="https://scrimba.com/learn/learnjavascript" rel="noopener noreferrer"&gt;free beginners course to learn JavaScript&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>career</category>
      <category>salary</category>
    </item>
  </channel>
</rss>
