<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css Archives - Linux Windows and android Tutorials</title>
	<atom:link href="https://www.osradar.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.osradar.com</link>
	<description>tutorials and news and Seurity</description>
	<lastBuildDate>Sat, 11 Jul 2020 04:51:22 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.8.13</generator>
	<item>
		<title>How to install Brackets in Windows 10 plus extensions</title>
		<link>https://www.osradar.com/how-to-install-brackets-in-windows-10-plus-extensions/</link>
					<comments>https://www.osradar.com/how-to-install-brackets-in-windows-10-plus-extensions/#respond</comments>
		
		<dc:creator><![CDATA[roger]]></dc:creator>
		<pubDate>Sat, 11 Jul 2020 04:51:20 +0000</pubDate>
				<category><![CDATA[Applications]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[OpenSource]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[brackets]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascritpt]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[Windows 10]]></category>
		<guid isPermaLink="false">https://www.osradar.com/?p=21572</guid>

					<description><![CDATA[<p>Hello! Brackets is an open-source code editor designed by Adobe for web developers. Additionally, it has a very simple and modern interface capable of handling HTML, CSS, and JavaScript. Besides, it&#8217;s very complete, light, and free. Some of its features involve the use of a theme to color the letter according to the structure of [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://www.osradar.com/how-to-install-brackets-in-windows-10-plus-extensions/">How to install Brackets in Windows 10 plus extensions</a> appeared first on <a rel="nofollow" href="https://www.osradar.com">Linux  Windows and android  Tutorials</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Hello! Brackets is an open-source code editor designed by Adobe for web developers. Additionally, it has a very simple and modern interface capable of handling HTML, CSS, and JavaScript. Besides, it&#8217;s very complete, light, and free. Some of its features involve the use of a theme to color the letter according to the structure of the code. However, its most interesting feature is the ability to show in real-time the changes made to the code. Without the need to save the changes or refresh the browser. Well, in this post we will see how to install Brackets in Windows 10 plus extensions.</p>



<h2>How to download and install Brackets in Windows 10.</h2>



<p>This is a multi-platform software so the installer for Windows is available from the project <a rel="noreferrer noopener" href="http://brackets.io/" target="_blank">website</a>. The installation wizard is very simple, as it works like any other program for Windows. Please just check the two boxes when you start the installation. The installation wizard is very simple, as it works like any other program for Windows. Please just check the two boxes when you start the installation. In effect, these boxes correspond to adding the program to the path for command line use. And the other one is to add the use of brackets to the context menu.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="772" height="600" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra.png" alt="Please check both boxes for installation" class="wp-image-21573" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra.png 772w, https://www.osradar.com/wp-content/uploads/2020/07/bra-300x233.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra-768x597.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra-696x541.png 696w" sizes="(max-width: 772px) 100vw, 772px" /><figcaption>Please check both boxes for installation</figcaption></figure>



<p>After a few moments the installation is completed.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="772" height="600" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra2.png" alt="" class="wp-image-21574" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra2.png 772w, https://www.osradar.com/wp-content/uploads/2020/07/bra2-300x233.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra2-768x597.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra2-696x541.png 696w" sizes="(max-width: 772px) 100vw, 772px" /></figure>



<h2>Launching Brackets for the First Time</h2>



<p>After installing the program, simply type your name in the search bar to launch it.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="835" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra3-1024x835.png" alt="Launching Brackets for the First Time" class="wp-image-21575" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra3-1024x835.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra3-300x245.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra3-768x626.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra3-696x568.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra3-1068x871.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra3.png 1177w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Launching Brackets for the First Time</figcaption></figure>



<p>The Windows Firewall warning window will be displayed immediately. Please allow access for optimal functioning of the editor</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="790" height="571" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra4.png" alt="Please authorize access to the network through the firewall" class="wp-image-21576" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra4.png 790w, https://www.osradar.com/wp-content/uploads/2020/07/bra4-300x217.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra4-768x555.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra4-696x503.png 696w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption>Please authorize access to the network through the firewall</figcaption></figure>



<p>We have highlighted that the most attractive feature of this editor is that it shows a preview of the live work. With this in mind, you need to have installed Google Chrome. In addition, when the editor is launched, two sample files called<strong> index.html </strong>and <strong>main.css </strong>will be displayed. Well, once you have selected the HTML file, just click on the lightning bolt. The Chrome will then display the HTML file in a window. Additionally, any changes we make in the editor will be displayed in the browser. The process is demonstrated in the video below:</p>



<figure class="wp-block-video"><video controls src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra.mp4"></video></figure>



<h2>Creating a new project in Brackets.</h2>



<p>As mentioned, Brackets can add extensions that facilitate its operation. But before you try it, please create a new project to test the extensions. With this intention, create a folder and place it wherever you want. Then from the menu <strong>File</strong>, click on <strong>Open Folder</strong></p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="543" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra6-1024x543.png" alt="" class="wp-image-21578" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra6-1024x543.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra6-300x159.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra6-768x408.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra6-1536x815.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra6-696x369.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra6-1068x567.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra6.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Now it&#8217;s time to create the <strong>index.html</strong> file. With this in mind, press the right button on your mouse and click on <strong>New File.</strong></p>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="1024" height="545" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra7-1024x545.png" alt="" data-id="21579" data-full-url="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra7.png" data-link="https://www.osradar.com/?attachment_id=21579" class="wp-image-21579" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra7-1024x545.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra7-300x160.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra7-768x408.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra7-1536x817.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra7-696x370.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra7-1068x568.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra7.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" width="1024" height="550" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra8-1024x550.png" alt="" data-id="21580" data-full-url="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra8.png" data-link="https://www.osradar.com/?attachment_id=21580" class="wp-image-21580" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra8-1024x550.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra8-300x161.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra8-768x412.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra8-1536x825.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra8-696x374.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra8-1068x573.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra8.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li></ul></figure>



<p>Now repeat the process to create the <strong>styles.css</strong> file</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="550" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra9-1024x550.png" alt="" class="wp-image-21581" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra9-1024x550.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra9-300x161.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra9-768x412.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra9-1536x825.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra9-696x374.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra9-1068x573.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra9.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>With this pair of files, you&#8217;re ready to encode.</p>



<h2>How to add extensions</h2>



<p>Now it&#8217;s time to add extensions. This process is very simple and intuitive. Since it is enough to click on the plugin block. For this example, I will add the <strong>Custom Works </strong>extension that allows to organize the files in tabs. To do this, enter the name in the search engine and then press Install. Finally, wait while downloading and installing the extension</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="550" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra11-1024x550.png" alt="" class="wp-image-21582" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra11-1024x550.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra11-300x161.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra11-768x412.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra11-1536x825.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra11-696x374.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra11-1068x573.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra11.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Installing the Custom Works extension</figcaption></figure>



<p>Follow me, you can see the extension showing the content in tabs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="550" src="//1723336065.rsc.cdn77.org/wp-content/uploads/2020/07/bra12-1024x550.png" alt="" class="wp-image-21583" srcset="https://www.osradar.com/wp-content/uploads/2020/07/bra12-1024x550.png 1024w, https://www.osradar.com/wp-content/uploads/2020/07/bra12-300x161.png 300w, https://www.osradar.com/wp-content/uploads/2020/07/bra12-768x412.png 768w, https://www.osradar.com/wp-content/uploads/2020/07/bra12-1536x825.png 1536w, https://www.osradar.com/wp-content/uploads/2020/07/bra12-696x374.png 696w, https://www.osradar.com/wp-content/uploads/2020/07/bra12-1068x573.png 1068w, https://www.osradar.com/wp-content/uploads/2020/07/bra12.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Conclusion</h2>



<p>At the end of the day, we have seen how to install Brackets in Windows 10 plus extensions. From now on, you can edit your projects and see the results in real-time. I hope you find this post useful before I say goodbye I invite you to see our post about <a rel="noreferrer noopener" href="https://www.osradar.com/how-to-analyze-the-network-with-ip-tools-for-android/" target="_blank">IP Tools </a>for Android. See you soon!</p>
<p>The post <a rel="nofollow" href="https://www.osradar.com/how-to-install-brackets-in-windows-10-plus-extensions/">How to install Brackets in Windows 10 plus extensions</a> appeared first on <a rel="nofollow" href="https://www.osradar.com">Linux  Windows and android  Tutorials</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.osradar.com/how-to-install-brackets-in-windows-10-plus-extensions/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
