The latest articles on Forem by the webdev guy (@the_webdev_guy). https://forem.com/the_webdev_guy 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%2F613808%2F13aaec3d-0af5-4947-96cc-fcdaccdc39b0.jpeg https://forem.com/the_webdev_guy en the webdev guy Tue, 26 Apr 2022 05:57:20 +0000 https://forem.com/the_webdev_guy/freecodecamp-responsive-web-design-projects-4nl7 https://forem.com/the_webdev_guy/freecodecamp-responsive-web-design-projects-4nl7 <p>FreeCodeCamp is one of the best free learning platform. For people who are beginners/learners in Front end Development then they can build these 5 projects and gain a certificate from FreecodeCamp.</p> <p>This is complete free course where you learn about Responsive Web Design</p> <h2> 1. Build a Personal Portfolio Web Page </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--d2OjvNSb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05kzamnxc0tib8a6b9uy.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d2OjvNSb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05kzamnxc0tib8a6b9uy.jpg" alt="FreeCodeCamp Solution - Build a Personal Portfolio Web Page The webdev guy" width="880" height="410"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/rx2QMs0RyJk</a></p> <h2> 2. Build a Technical Documentation Page </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ydGb7Vlg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xibaqlmrpaeyzxfj30f0.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ydGb7Vlg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xibaqlmrpaeyzxfj30f0.jpg" alt="FreeCodeCamp Solution - Build a Technical Documentation Page The webdev guy" width="880" height="414"></a></p> <p>Tutorial Link -<a href="">https://youtu.be/6AgIfLu8zq0</a></p> <h2> 3. Build a Product Landing Page </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KZthYxdR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd5pqt01xd081gmc3s1h.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KZthYxdR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd5pqt01xd081gmc3s1h.jpg" alt="FreeCodeCamp Solution - Build a product Landing Page The webdev guy" width="880" height="414"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/6O40tRgELAk</a></p> <h2> 4. Build a Survey Form </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lvUkamt3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g1tncy7r7h1swx6m7xz.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lvUkamt3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g1tncy7r7h1swx6m7xz.jpg" alt="FreeCodeCamp Solution - Build a Survey Form The webdev guy" width="880" height="420"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/pv9ORPWAnX8</a></p> <h2> 5. Build a Tribute Page </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nef-KVmb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0e5fjtpanc71uqpgpvi.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nef-KVmb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0e5fjtpanc71uqpgpvi.jpg" alt="FreeCodeCamp Solution - Build a Tribute Page The webdev guy" width="880" height="415"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/smoVjG3OyFc</a></p> html css webdev the webdev guy Wed, 29 Dec 2021 06:22:26 +0000 https://forem.com/the_webdev_guy/10-small-projects-to-practice-html-and-css-42km https://forem.com/the_webdev_guy/10-small-projects-to-practice-html-and-css-42km <p>Html and CSS are the basic building blocks in front end development. Having a good command in both of them can help to be a great front end developer. Practicing different Project can help you to learn and grow. <br> These are 10 Projects with attached tutorial.</p> <h2> 1. Build Animated and Creative Our Teams Section </h2> <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%2F8rig28gtm5djtveew1z4.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%2F8rig28gtm5djtveew1z4.png" alt="Project Image"></a></p> <p>Tutorial Link - <a href="">https://www.youtube.com/watch?v=T0RBuU_jclU</a></p> <h2> 2. About Us Section </h2> <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%2Fnsw6wv7pgra31mri6p3n.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%2Fnsw6wv7pgra31mri6p3n.png" alt="About Us Image"></a></p> <p>Tutorial Link -<a href="">https://youtu.be/cWHWJyHunD0</a></p> <h2> 3. Accordion - Create FAQ Section </h2> <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%2F19b1lkiujryh5joqb5bn.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%2F19b1lkiujryh5joqb5bn.png" alt="Accordion the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/JnYVgNe_Bx0</a></p> <h2> 4. Course Enrollment Card </h2> <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%2F5vcvk0wakjxutrc3dsxz.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%2F5vcvk0wakjxutrc3dsxz.png" alt="Course Enrollment the webdev guy"></a></p> <p>Tutorial Link - <a href="https://youtu.be/uMccYWjLMh8" rel="noopener noreferrer">https://youtu.be/uMccYWjLMh8</a></p> <h2> 5. Newsletter Subscription Form </h2> <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%2Fe5nebdznwhyl6dw80maq.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%2Fe5nebdznwhyl6dw80maq.png" alt="Newsletter Subscription the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/K90-ihhUZRc</a></p> <h2> 6. Portfolio Card </h2> <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%2Fe4w4xolfnm7osyjne1rw.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%2Fe4w4xolfnm7osyjne1rw.png" alt="Portfolio Card the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/5KdgpMr0CmU</a></p> <h2> 7. Preview Components </h2> <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%2Fc68e9jf33e9wt6m4mdme.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%2Fc68e9jf33e9wt6m4mdme.png" alt="Preview Components the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/-YcERQVI1Lw</a></p> <h2> 8. Pricing Cards For Website </h2> <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%2Ft0m3o4p6l6j4d1rgydlt.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%2Ft0m3o4p6l6j4d1rgydlt.png" alt="Price Cards the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/plT52cddvGA</a></p> <h2> 9. Our Skills Section </h2> <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%2F6ir4xpst2bv5ffclftfg.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%2F6ir4xpst2bv5ffclftfg.png" alt="Our Skills the webdev guy"></a></p> <p>Tutorial Link - <a href="">https://youtu.be/Pu2yIVpHp5I</a></p> <h2> 10. Event Registration </h2> <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%2Fay8yj2dshbh7g0imc3ms.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%2Fay8yj2dshbh7g0imc3ms.png" alt="Event Registration the webdev guy"></a></p> <p>Tutorial Link - <a href="https://youtu.be/_E4--gQ1lRg" rel="noopener noreferrer">https://youtu.be/_E4--gQ1lRg</a></p> html css webdev beginners