<p>You can use the built-in screenshot tool in Chrome or browsers based on the Chrome. This feature allows you to capture screenshots without the need for external extensions or programs.</p>

<blockquote>
<p>This feature indeed offers great convenience, especially when capturing the screenshot of an entire page or a specific element. It saves you the trouble of dealing with Photoshop when an element is too long to fit on the screen. The built-in screenshot tool in Chrome or Chrome-based browsers allows you to capture the full page by scrolling automatically and stitching together the individual sections.</p>
</blockquote>

<h2>How to screenshot on Google Chrome</h2>

<p>1 - To open Developer Tools, you can use the following keyboard shortcuts:<br />
<strong>For Windows:</strong> Press Ctrl + Shift + I.<br />
<strong>For Mac:</strong> Press Command + Option + I.</p>

<p>2 - After opening Developer Tools, you can access the Run Command panel using the following keyboard shortcuts:<br />
<strong>For Windows:</strong> Press Ctrl + Shift + P.<br />
<strong>For Mac:</strong> Press Command + Shift + P.</p>

<p>3 - Once the Run Command panel appears, type &quot;screenshot&quot; into the panel. You will see four different options related to screenshots:</p>

<p><img alt="Screenshot in Chrome" src="https://farukipek.com/blog/screenshot-in-chrome.webp" style="height:372px; width:688px" /></p>

<h2>How to screenshot a whole page with a custom size</h2>

<p><strong>Capture Area Shot:</strong> This option allows you to select and save a specific area of the screen. After choosing this option, you can draw a box with your mouse and save the area you have selected.</p>

<p><strong>Capture Full Size Screenshot:</strong> You capture a screenshot of the entire page from top to bottom.</p>

<p><strong>Capture Node Screenshot:</strong> It allows you to capture the screenshot of a specific element selected in the Element Inspector. After selecting the desired element in the Inspector, you should execute the command and choose this option.</p>

<p><strong>Capture Screenshot:</strong> It is similar to taking a standard screenshot.</p>

<p>You can select any of these options to complete the screenshot capture process.</p>

Take a screenshot in Chrome

Learn how to capture screenshots in Chrome effortlessly. No need for extensions. Capture full page or specific elements easily.

<p>I&#39;ve been longing to start a blog for years, but I&#39;ve always struggled to take the first step. This post is my very first article!</p>

<p>Today, I&#39;ll be discussing how to deploy the repositories we upload to GitHub to <a href="https://vercel.com/" rel="noopener" target="_blank">Vercel</a>. Vercel supports numerous frameworks, including Astro, React, Gatsby, Next, Nuxt, Remix, Svelte, and Vite.</p>

<p>In addition, you can easily deploy your HTML websites to Vercel. For the purpose of this article, I&#39;ll be focusing on the deployment process for an HTML site.</p>

<p>To get started with Vercel, you can sign up using your GitHub account or create an account with your email address and then link it to your GitHub account.</p>

<h2>1. Adding a Project</h2>

<p>After logging in, navigate to the menu and select &quot;Add New &gt; Project&quot; to proceed.</p>

<p><img alt="Vercel Projects Screenshot" src="https://farukipek.com/blog/to-deploy-a-project-to-vercel.webp" style="height:628px; width:1400px" /></p>

<h2>2. Selecting the Repository</h2>

<p>If you have granted access to all repositories, you will be able to see your repository in the list. If you have limited access, you can search for the repository name and click on the &quot;Adjust GitHub App Permissions&quot; link to adjust the permissions for that specific repository. Once you have selected the desired repository, click on &quot;Import&quot; and proceed.</p>

<p><img alt="Vercel Import Screenshot" src="https://farukipek.com/blog/to-deploy-a-project-to-vercel-import.webp" style="height:1161px; width:1400px" /></p>

<h2>3. Project Settings</h2>

<p>After selecting the repository, you can make any necessary settings here. If you&#39;re working with HTML, you can simply click the &quot;Deploy&quot; button.</p>

<p><img alt="Vercel Project Settings Screenshot" src="https://farukipek.com/blog/to-deploy-a-project-to-vercel-project-settings.webp" style="height:690px; width:1400px" /></p>

<h2>4. Success!</h2>

<p>Deployment is successful! You can now preview your website by accessing the link under the &quot;Domains&quot; section.</p>

<p><img alt="Vercel Project Deploy Success" src="https://farukipek.com/blog/to-deploy-a-project-to-vercel-success.webp" style="height:686px; width:1400px" /></p>

<h2>5. Additional Information</h2>

<ul>
	<li>You can update the domain of your website by going to Settings &gt; Domain page.</li>
	<li>Whenever you make a new commit to your GitHub repository, Vercel will automatically be triggered, and your website will be updated to the new version. Note: You will still have access to each site you previously deployed. You can review them on the Deployments page.</li>
	<li>If you have any &quot;Environment Variables&quot; used in your project, you can enter them on the Settings &gt; Environment Variables page. Note: After entering these values, don&#39;t forget to redeploy your project!</li>
</ul>

<p>I highly recommend deploying them to Vercel. By providing a live demo of the websites you code, you can easily showcase what you have built to anyone reviewing the repository. Videos, GIFs, or images may not fully capture the interactive experience that a live deployment can offer.</p>


Deploying a Project to Vercel

I will be discussing how to deploy the repositories we upload to GitHub to Vercel. Also you can easily deploy your HTML websites to Vercel.

Hey! I'm Faruk, a front-end developer based in Charlotte, USA.

I've been building stuff on the web since 2016. I've worked with clients in various countries and industries.

BLOG

PROJECTS