<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Frontend on Flavio Silva</title><link>https://fsilva.me/tags/frontend/</link><description>Recent content in Frontend on Flavio Silva</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><managingEditor>flavio1110@gmail.com (Flavio Silva)</managingEditor><webMaster>flavio1110@gmail.com (Flavio Silva)</webMaster><lastBuildDate>Tue, 11 Apr 2023 14:00:00 +0100</lastBuildDate><atom:link href="https://fsilva.me/tags/frontend/feed.xml" rel="self" type="application/rss+xml"/><item><title>🔥 Improve your Frontend skills with Frontend Mentor</title><link>https://fsilva.me/posts/improve-your-fe-skills-with-frontendmentor/</link><pubDate>Tue, 11 Apr 2023 14:00:00 +0100</pubDate><author>flavio1110@gmail.com (Flavio Silva)</author><guid>https://fsilva.me/posts/improve-your-fe-skills-with-frontendmentor/</guid><description>&lt;img src="https://fsilva.me/posts/improve-your-fe-skills-with-frontendmentor/four-card-feature-files.webp" alt="Featured image of post 🔥 Improve your Frontend skills with Frontend Mentor" /&gt;&lt;figure class="aligncenter"&gt;
 &lt;video autoplay loop muted playsinline&gt;
 &lt;source src="https://fsilva.me/images/design-responsive.mp4" type="video/mp4" /&gt;
 &lt;/video&gt;
&lt;/figure&gt;
&lt;p&gt;When studying HTML, CSS, and Javascript it&amp;rsquo;s hard to practice with real-world examples, so oftentimes we get stuck trying to come up with a good design and then building it.&lt;/p&gt;
&lt;h3 id="frontend-mentor-to-the-recue"&gt;Frontend Mentor to the recue!
&lt;/h3&gt;&lt;p&gt;&lt;a class="link" href="https://www.frontendmentor.io/" target="_blank" rel="noopener"
 &gt;Frontend Mentor&lt;/a&gt; offers front-end coding challenges and interesting projects to practice your HTML, CSS, and JavaScript. It is as close as it gets to work on a professional real-world project.&lt;/p&gt;
&lt;p&gt;After creating your account, you can start one of its &lt;a class="link" href="https://www.frontendmentor.io/challenges" target="_blank" rel="noopener"
 &gt;challeges&lt;/a&gt;. There are many free challenges that can get you started and give you plenty of things to play with. However, if you want take one step further, have access to premium challenges, figma and sketch design files, and private solutions, you can subscribe to the &lt;a class="link" href="https://www.frontendmentor.io/pro#pricing" target="_blank" rel="noopener"
 &gt;pro developer&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id="how-does-it-work"&gt;How does it work?
&lt;/h3&gt;&lt;p&gt;Once you start a challenge, you will download a zip for that challenge. For example the challenge &lt;a class="link" href="https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK" target="_blank" rel="noopener"
 &gt;Four card feature section&lt;/a&gt;, will give you a zip file containing the instructions, necessary images, basic design details, and the most important the design images for desktop and mobile!&lt;/p&gt;
&lt;figure class="aligncenter"&gt;
 &lt;img src="four-card-feature-files.webp" alt="File tree for Four cards feature section challenge" /&gt;
&lt;/figure&gt;
&lt;p&gt;These files are all you need to start hacking your front end!&lt;/p&gt;
&lt;p&gt;After the challenge is complete you can submit it and get feedback from the community! That&amp;rsquo;s excellent!&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve been playing with some challenges myself, (the image of the banner is from &lt;a class="link" href="https://github.com/flavio1110/frontendmentor/tree/main/four-card-feature-section-master" target="_blank" rel="noopener"
 &gt;my own implementation&lt;/a&gt; of the Four Cards feature section).&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;m not a Frontend specialist by no means, but you can find my solutions so far on &lt;a class="link" href="https://github.com/flavio1110/frontendmentor" target="_blank" rel="noopener"
 &gt;my GitHub repository&lt;/a&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;What about you? Do you know any other tool that offers such an immersive and near-real-world experience?&lt;/p&gt;</description></item></channel></rss>