The latest articles on Forem by Abhishek Baliyan (@abhishekbaliyandev). https://forem.com/abhishekbaliyandev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1199145%2F474a764b-7199-4f31-8ae6-8ad7a0f004fc.jpeg https://forem.com/abhishekbaliyandev en Abhishek Baliyan Thu, 14 Dec 2023 06:59:43 +0000 https://forem.com/abhishekbaliyandev/challenge-11-single-price-grid-component-frontend-mentor-284f https://forem.com/abhishekbaliyandev/challenge-11-single-price-grid-component-frontend-mentor-284f <h2> Challenge: 11, Frontend Mentor - Single price grid component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc" rel="noopener noreferrer">Single price grid component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout for the component depending on their device's screen size</li> <li>See a hover state on desktop for the Sign Up call-to-action</li> </ul> <h3> Screenshot </h3> <p><a href="https://media.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%2Fffn97p83qw6hcyht3xxc.png" class="article-body-image-wrapper"><img src="https://media.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%2Fffn97p83qw6hcyht3xxc.png" alt="Desktop View"></a><br> <a href="https://media.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%2Fwvlc9w0nqya7ye098c2x.png" class="article-body-image-wrapper"><img src="https://media.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%2Fwvlc9w0nqya7ye098c2x.png" alt="Mobile View"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Single-price-grid-component" rel="noopener noreferrer">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Single-price-grid-component/" rel="noopener noreferrer">Live</a> </li> </ul> <h2> My process </h2> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>CSS Grid</li> <li>Mobile-first workflow</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com" rel="noopener noreferrer">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev" rel="noopener noreferrer">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan" rel="noopener noreferrer">@Abhi___baliyan</a> </li> <li>Dev.to - <a href="https://dev.to/abhishekbaliyandev">@abhishekbaliyandev</a> </li> </ul> html css frontend webdev Abhishek Baliyan Mon, 04 Dec 2023 13:36:53 +0000 https://forem.com/abhishekbaliyandev/challenge-10-four-card-feature-section-frontend-mentor-1jea https://forem.com/abhishekbaliyandev/challenge-10-four-card-feature-section-frontend-mentor-1jea <h2> Challenge: 10, Frontend Mentor - Four card feature section solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK">Four card feature section challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout for the site depending on their device's screen size</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U4mHdbRo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl0zrz92a0gahv9onytb.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U4mHdbRo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl0zrz92a0gahv9onytb.png" alt="Desktop View" width="800" height="441"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kCRnnY2P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1eu41f3908o0a0989iy.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kCRnnY2P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1eu41f3908o0a0989iy.png" alt="Mobile View" width="800" height="2092"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Four-card-feature-section">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Four-card-feature-section/">Live</a> </li> </ul> <h2> My process </h2> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>CSS Grid</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <p>More experince with flexbox and grid.</p> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> <li>Dev.to - <a href="https://dev.to/abhishekbaliyandev">@abhishekbaliyandev</a> </li> </ul> html css webdev Abhishek Baliyan Fri, 01 Dec 2023 07:02:09 +0000 https://forem.com/abhishekbaliyandev/challenge-9-social-proof-section-frontend-mentor-1ifi https://forem.com/abhishekbaliyandev/challenge-9-social-proof-section-frontend-mentor-1ifi <h2> Frontend Mentor - Social proof section solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA">Social proof section challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout for the section depending on their device's screen size</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KkdKntwN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i91f31fprt7q3222n9wu.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KkdKntwN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i91f31fprt7q3222n9wu.png" alt="Desktop View" width="800" height="440"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MwgQVA_K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjlhy4aru9ys2qsmk0aj.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MwgQVA_K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjlhy4aru9ys2qsmk0aj.png" alt="Mobile View" width="800" height="2249"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Social-proof-section">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Social-proof-section/">Live</a> </li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>More experince in layout with flexbox.</li> </ul> <h3> Continued development </h3> <ul> <li>Grid</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> <li>Dev.to - <a href="https://dev.to/abhishekbaliyandev">@abhishekbaliyandev</a> </li> </ul> frontend frontendmentor css html Abhishek Baliyan Thu, 23 Nov 2023 10:25:52 +0000 https://forem.com/abhishekbaliyandev/challenge-8-profile-card-component-frontend-mentor-23n5 https://forem.com/abhishekbaliyandev/challenge-8-profile-card-component-frontend-mentor-23n5 <h2> Challenge 8, Frontend Mentor - Profile card component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ" rel="noopener noreferrer">Profile card component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> <li>Built with</li> <li>What I learned</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>Profile card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.</p> <h3> The challenge </h3> <ul> <li>Build out the project to the designs provided</li> </ul> <h3> Screenshot </h3> <p><a href="https://media.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%2F8itzs3n324kmgokxzxpp.png" class="article-body-image-wrapper"><img src="https://media.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%2F8itzs3n324kmgokxzxpp.png" alt="Desktop View"></a><br> <a href="https://media.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%2Fvnlrgehefjxmf04g1sxb.png" class="article-body-image-wrapper"><img src="https://media.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%2Fvnlrgehefjxmf04g1sxb.png" alt="Mobile View"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Profile-card-component" rel="noopener noreferrer">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Profile-card-component/" rel="noopener noreferrer">Live</a> </li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>I learned how to add images on background, How to position them &amp; how to stick them same place with vw/vh. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(../</span><span class="nt">images</span><span class="o">/</span><span class="nt">bg-pattern-bottom</span><span class="nc">.svg</span><span class="o">)</span> <span class="nt">top</span> <span class="err">50</span><span class="nt">vh</span> <span class="nt">left</span> <span class="err">44</span><span class="nt">vw</span> <span class="nt">no-repeat</span><span class="o">,</span> <span class="nt">url</span><span class="o">(../</span><span class="nt">images</span><span class="o">/</span><span class="nt">bg-pattern-top</span><span class="nc">.svg</span><span class="o">)</span> <span class="nt">bottom</span> <span class="err">43</span><span class="nt">vh</span> <span class="nt">right</span> <span class="err">51</span><span class="nt">vw</span> <span class="nt">no-repeat</span><span class="o">;</span> </code></pre> </div> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com" rel="noopener noreferrer">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev" rel="noopener noreferrer">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan" rel="noopener noreferrer">@Abhi___baliyan</a> </li> <li>Dev.to - <a href="https://dev.to/abhishekbaliyandev">@abhishekbaliyandev</a> </li> </ul> Abhishek Baliyan Wed, 22 Nov 2023 14:40:20 +0000 https://forem.com/abhishekbaliyandev/challenge-7-3-column-preview-card-component-frontend-mentor-228k https://forem.com/abhishekbaliyandev/challenge-7-3-column-preview-card-component-frontend-mentor-228k <h2> Challenge 7, Frontend Mentor - 3-column preview card component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-">3-column preview card component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>3-column preview card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.</p> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout depending on their device's screen size</li> <li>See hover states for interactive elements</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6aOSmVY_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au11ocacism6fjlvdmpc.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6aOSmVY_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au11ocacism6fjlvdmpc.png" alt="Desktop View" width="800" height="439"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2Lbxlvln--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80vf722c0p78zk3u0bn9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2Lbxlvln--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80vf722c0p78zk3u0bn9.png" alt="Mobile View" width="800" height="2276"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-3-column-preview-card-component/">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-3-column-preview-card-component/">Live</a> </li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <p>While i was trying to match the design and code, I learned width adjusting.</p> <h3> Continued development </h3> <p>I want to learn more about the min width for responsiveness.</p> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> html css 100daysofcode beginners Abhishek Baliyan Wed, 22 Nov 2023 13:31:17 +0000 https://forem.com/abhishekbaliyandev/challenge-6-stats-preview-card-component-frontend-mentor-5d95 https://forem.com/abhishekbaliyandev/challenge-6-stats-preview-card-component-frontend-mentor-5d95 <h2> Challenge: 6, Frontend Mentor - Stats preview card component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62">Stats preview card component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>Stats preview card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.</p> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout depending on their device's screen size</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RGYi7Zxo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g9csbgxgn2sv9il0vfq.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RGYi7Zxo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g9csbgxgn2sv9il0vfq.png" alt="Desktop View" width="800" height="439"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oJMQP9mY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t9k9f84tx7bjxr7xhjd.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oJMQP9mY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t9k9f84tx7bjxr7xhjd.png" alt="Mobile View" width="750" height="1548"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Stats-preview-card-component">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Stats-preview-card-component/">Live</a> </li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>If there are rows/columns interchangable in mobile/desktop view. Then should put them in container in html.</li> </ul> <h3> Continued development </h3> <ul> <li>I want to learn more about how to put color overlay on image without using opacity.</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> 100daysofcode frontend html css Abhishek Baliyan Wed, 22 Nov 2023 05:16:07 +0000 https://forem.com/abhishekbaliyandev/challenge-5-order-summary-component-frontend-mentor-420e https://forem.com/abhishekbaliyandev/challenge-5-order-summary-component-frontend-mentor-420e <h2> Frontend Mentor - Order summary card solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj">Order summary card challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> <li>Built with</li> <li>What I learned</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>Order summary card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.</p> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>See hover states for interactive elements</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gQrUQbim--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmoeuh1xywezkg5so78f.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gQrUQbim--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmoeuh1xywezkg5so78f.png" alt="Desktop View" width="800" height="439"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t6jwcyCH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwdcatoboca0iyojk9w6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t6jwcyCH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwdcatoboca0iyojk9w6.png" alt="Mobile View" width="750" height="1334"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-Mentor-Challenge-Order-summary-component">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-Mentor-Challenge-Order-summary-component/">Live</a> </li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>Box shadow</li> <li>Background-position</li> <li>background-image</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> frontend webdev 100daysofcode Abhishek Baliyan Wed, 15 Nov 2023 05:41:29 +0000 https://forem.com/abhishekbaliyandev/challenge-4-nft-preview-card-component-frontend-mentor-3gk7 https://forem.com/abhishekbaliyandev/challenge-4-nft-preview-card-component-frontend-mentor-3gk7 <h2> Frontend Mentor - NFT preview card component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U">NFT preview card component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> <li>Useful resources</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>NFT preview card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.</p> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout depending on their device's screen size</li> <li>See hover states for interactive elements</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3TUDNOhk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a3a60ktfas1k3bod71b.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3TUDNOhk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a3a60ktfas1k3bod71b.png" alt="Desktop View" width="800" height="439"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Va4pH0bn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alcdhx4xzk7rk1fwh56x.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Va4pH0bn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alcdhx4xzk7rk1fwh56x.png" alt="Mobile View" width="800" height="1404"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-NFT-preview-card-component">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-NFT-preview-card-component/">Live</a> </li> </ul> <h2> My process </h2> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <p>I learned how to Overlay icon on the image.</p> <h3> Useful resources </h3> <ul> <li> <a href="https://www.w3schools.com/howto/howto_css_overlay.asp">How to overlay</a> - This helped me for overlay.</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> frontend 100daysofcode webdev beginners Abhishek Baliyan Sat, 04 Nov 2023 11:22:56 +0000 https://forem.com/abhishekbaliyandev/challenge-3-qr-code-component-frontend-mentor-35lc https://forem.com/abhishekbaliyandev/challenge-3-qr-code-component-frontend-mentor-35lc <h2> Frontend Mentor - QR code component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H">QR code component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects. </p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> </ul> </li> <li>Author</li> </ul> <h2> Overview </h2> <p>QR code challenge by Frontend Mentor, Coded by Abhishek Baliyan. In this challenge I use flexbox for centering vertically and horizontally. I used CSS variables.</p> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--laHpiqGu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yh0xs63v93ec7zlrban.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--laHpiqGu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yh0xs63v93ec7zlrban.png" alt="Desktop View" width="800" height="439"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yIDSyOwH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnx4gjk4shl042vx8749.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yIDSyOwH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnx4gjk4shl042vx8749.png" alt="Mobile View" width="800" height="1404"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-QR-code-component">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-QR-code-component/">Live</a> </li> </ul> <h2> My process </h2> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <p>I learned CSS variables, Min-width, Max-width.</p> <h3> Continued development </h3> <p>How to implement responsive font size.</p> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> frontend 100daysofcode webdev beginners Abhishek Baliyan Thu, 02 Nov 2023 10:58:58 +0000 https://forem.com/abhishekbaliyandev/challenge-1-product-preview-card-component-frontend-mentor-4l82 https://forem.com/abhishekbaliyandev/challenge-1-product-preview-card-component-frontend-mentor-4l82 <h2> Frontend Mentor - Product preview card component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa">Product preview card component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects. </p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> <li>Useful resources</li> </ul> </li> <li>Author</li> <li>Acknowledgments</li> </ul> <h2> Overview </h2> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout depending on their device's screen size</li> <li>See hover and focus states for interactive elements</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BUdLcP53--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eitz7wc3ck4bp2ifklct.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BUdLcP53--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eitz7wc3ck4bp2ifklct.png" alt="Desktop View" width="800" height="439"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5Mb5xrKX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7skf1jqy5d8a849vmls.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5Mb5xrKX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7skf1jqy5d8a849vmls.png" alt="Mobile View" width="800" height="877"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Product-preview-card-component">Github</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Product-preview-card-component/">Gihub Pages</a> </li> </ul> <h2> My process </h2> <ul> <li>First, I See the design then thought, how do I lay that out in html</li> <li>Then I wrote the HTML</li> <li>Second, how can i use CSS to achieve the layout</li> <li>Then I wrote the CSS for layout</li> <li>Third, how should each element be styled</li> <li>Then I wrote CSS for each element</li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>Screen Reader - Visually hide</li> <li>How to add img/icon on button</li> </ul> <h3> Continued development </h3> <ul> <li>CSS Grid</li> <li>In depth CSS</li> </ul> <h3> Useful resources </h3> <ul> <li> <a href="https://stackoverflow.com/questions/12142386/replacing-an-image-in-an-img-tag-using-css">Image replace using css content property</a> - This helped me for image replacement in media query.</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> <h2> Acknowledgments </h2> <p>The stackoverflow guide of image replacing by css solved my problem.</p> frontend 100daysofcode Abhishek Baliyan Wed, 01 Nov 2023 11:04:38 +0000 https://forem.com/abhishekbaliyandev/challenge-1-results-summary-component-frontend-mentor-57id https://forem.com/abhishekbaliyandev/challenge-1-results-summary-component-frontend-mentor-57id <h2> Frontend Mentor - Results summary component solution </h2> <p>This is a solution to the <a href="https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV">Results summary component challenge on Frontend Mentor</a>. Frontend Mentor challenges help you improve your coding skills by building realistic projects. </p> <h2> Table of contents </h2> <ul> <li> Overview <ul> <li>The challenge</li> <li>Screenshot</li> <li>Links</li> </ul> </li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> <li>Useful resources</li> </ul> </li> <li>Author</li> <li>Acknowledgments</li> </ul> <h2> Overview </h2> <h3> The challenge </h3> <p>Users should be able to:</p> <ul> <li>View the optimal layout for the interface depending on their device's screen size</li> <li>See hover and focus states for all interactive elements on the page</li> <li> <strong>Bonus</strong>: Use the local JSON data to dynamically populate the content</li> </ul> <h3> Screenshot </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NfDqcDf0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4mxra3lnwa1qs7zbu72.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NfDqcDf0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4mxra3lnwa1qs7zbu72.png" alt="Desktop View" width="800" height="448"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9txDAE6G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g9fomlpg40sjhmkx39v.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9txDAE6G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g9fomlpg40sjhmkx39v.png" alt="Mobile View" width="800" height="906"></a></p> <h3> Links </h3> <ul> <li>Solution URL: <a href="https://github.com/abhishek-baliyan-dev/Frontend-mentor-challenge-Results-summary-component">Solution</a> </li> <li>Live Site URL: <a href="https://abhishek-baliyan-dev.github.io/Frontend-mentor-challenge-Results-summary-component/">Live site URL</a> </li> </ul> <h2> My process </h2> <ul> <li>First, I See the design then thought, how do I lay that out in html</li> <li>Then I wrote the HTML</li> <li>Second, how can i use CSS to achieve the layout</li> <li>Then I wrote the CSS for layout</li> <li>Third, how should each element be styled</li> <li>Then I wrote CSS for each element</li> <li>Finally I refactored the css</li> </ul> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS</li> <li>Flexbox</li> <li>Mobile-first workflow</li> </ul> <h3> What I learned </h3> <ul> <li>CSS Layout, Responsiveness, transparency, flexbox</li> </ul> <p>This code below took some time<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"bg-circle"</span><span class="nt">&gt;</span> <span class="nt">&lt;h2&gt;</span>76<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;p&gt;</span>of 100<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nf">#bg-circle</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">20px</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">26px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">126px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="n">hsla</span><span class="p">(</span><span class="m">256</span><span class="p">,</span> <span class="m">72%</span><span class="p">,</span> <span class="m">46%</span><span class="p">,</span> <span class="m">1</span><span class="p">),</span> <span class="n">hsla</span><span class="p">(</span><span class="m">241</span><span class="p">,</span> <span class="m">72%</span><span class="p">,</span> <span class="m">46%</span><span class="p">,</span> <span class="m">0</span><span class="p">));</span> <span class="p">}</span> </code></pre> </div> <h3> Continued development </h3> <ul> <li>CSS Grid</li> <li>In depth Flexbox</li> </ul> <h3> Useful resources </h3> <ul> <li> <a href="https://www.youtube.com/playlist?list=PLYQSCk-qyTW37zDPzcAyzCsnypFQrhUcq">Frontend Web Development for Beginners</a> - This help me alot in the revision of HTML, CSS, JS.</li> </ul> <h2> Author </h2> <ul> <li>Website - <a href="https://www.abhishekbaliyan.com">Abhishek Baliyan</a> - Coming soon</li> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/abhishek-baliyan-dev">@abhishek-baliyan-dev</a> </li> <li>Twitter - <a href="https://twitter.com/Abhi___baliyan">@Abhi___baliyan</a> </li> </ul> <h2> Acknowledgments </h2> <p>I really appreciate the tutorial <a href="https://www.youtube.com/playlist?list=PLYQSCk-qyTW37zDPzcAyzCsnypFQrhUcq">youtube playlist</a> of Frontend Web Development from <a href="https://www.youtube.com/@zachgoll">Zach Gollwitzer</a>.</p> webdev 100daysofcode html css