<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ravi Teja</title>
    <description>The latest articles on DEV Community by Ravi Teja (@insidert).</description>
    <link>https://dev.to/insidert</link>
    <image>
      <url>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%2F127313%2F08ab616e-06b4-4e16-8c91-c905ed3b84de.jpeg</url>
      <title>DEV Community: Ravi Teja</title>
      <link>https://dev.to/insidert</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/insidert"/>
    <language>en</language>
    <item>
      <title>Fix cURL error 60 in WampServer</title>
      <dc:creator>Ravi Teja</dc:creator>
      <pubDate>Thu, 03 Dec 2020 14:04:41 +0000</pubDate>
      <link>https://dev.to/insidert/fix-curl-error-60-in-wampserver-5a2k</link>
      <guid>https://dev.to/insidert/fix-curl-error-60-in-wampserver-5a2k</guid>
      <description>&lt;p&gt;It is frustrating to see &lt;em&gt;cURL error 60: SSL certificate problem: self signed certificate in certificate chain&lt;/em&gt; error while calling external APIs from your PHP project. Well, the fix is easy. But, sometimes, especially when multiple PHP versions are available in WampServer, extra care should be taken to install it correctly. Follow along:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://curl.haxx.se/docs/caextract.html"&gt;Download&lt;/a&gt; the latest cacert.pem file.&lt;/li&gt;
&lt;li&gt;Move the file to the desired location. I keep it inside the wamp64 folder. My path to the file is &lt;em&gt;D:/wamp64/cacert.pem&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Now we need to add this path in

&lt;code&gt;php.ini&lt;/code&gt;

files located in different folders.
4. Left-click the wampserver icon in the system tray. Select PHP &amp;gt; php.ini. (This file is located inside the Apache folder.) And add the path to &lt;em&gt;curl.cainfo&lt;/em&gt; setting as below.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="p"&gt;;&lt;/span&gt; A default value &lt;span class="k"&gt;for &lt;/span&gt;the CURLOPT_CAINFO option.
&lt;span class="p"&gt;;&lt;/span&gt; This is required to be an absolute path.
curl.cainfo&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"D:/wamp64/cacert.pem"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Don't forget&lt;/strong&gt; to uncomment the line by removing &lt;strong&gt;;&lt;/strong&gt; at the beginning of the line.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Now go to D:/wamp64/bin/php folder. You can see all the available PHP versions. You need to change the same line in two php.ini files. One in the php5.6.40 folder and the other in your latest version / the version you are using.&lt;/li&gt;
&lt;li&gt;Go to php5.6.40 folder and find and open

&lt;code&gt;php.ini&lt;/code&gt;

file, change &lt;em&gt;curl.cainfo&lt;/em&gt; setting as above.
7. Go to the latest php version, as of this writing, the latest version on my system is 7.4.6. Find and open

&lt;code&gt;php.ini&lt;/code&gt;

file, change &lt;em&gt;curl.cainfo&lt;/em&gt; setting as above.&lt;/li&gt;
&lt;li&gt;Restart the wamp server and you are done.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Originally &lt;a href="https://insidert.com/snippets/fix-c-url-error-60-in-wamp-server/"&gt;published&lt;/a&gt; on my blog. &lt;/p&gt;

</description>
      <category>php</category>
      <category>laravel</category>
      <category>curl</category>
    </item>
    <item>
      <title>Build your first webpage. The foundations.</title>
      <dc:creator>Ravi Teja</dc:creator>
      <pubDate>Tue, 25 Feb 2020 05:35:55 +0000</pubDate>
      <link>https://dev.to/insidert/build-your-first-webpage-the-foundations-45b6</link>
      <guid>https://dev.to/insidert/build-your-first-webpage-the-foundations-45b6</guid>
      <description>&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; I have originally written this post on &lt;a href="https://coderbootcamp.in"&gt;Coder Bootcamp&lt;/a&gt; for &lt;em&gt;absolute beginners&lt;/em&gt; and is a part of the &lt;a href="https://coderbootcamp.in/full-stack-course"&gt;free full-stack curriculum.&lt;/a&gt; This post guides you on what to learn first to build your first webpage and expects a self-learning approach. It uses handpicked Mozilla documentation references more.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;About the project&lt;/li&gt;
&lt;li&gt;End goal&lt;/li&gt;
&lt;li&gt;
Theory

&lt;ul&gt;
&lt;li&gt;Introduction to web and web pages&lt;/li&gt;
&lt;li&gt;Browsers&lt;/li&gt;
&lt;li&gt;Markup with HTML&lt;/li&gt;
&lt;li&gt;Styling with CSS&lt;/li&gt;
&lt;li&gt;Interactivity with JS&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Prerequisites&lt;/li&gt;
&lt;li&gt;
Milestones

&lt;ul&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  About the project
&lt;/h2&gt;

&lt;p&gt;The foundations project helps you get started with the front-end. You will know about browser technologies and how to build websites with HTML and CSS. It is better to work on a simple project like your resume or your family details. You can check some of the &lt;a href="///posts/static-website-project-ideas-for-beginners.md"&gt;project ideas here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  End goal
&lt;/h2&gt;

&lt;p&gt;You should build web pages with heading, paragraph and list tags and style them using the above rules. Add images to your pages and also link two or more different HTML pages with anchor tags. Get clear understanding of CSS class which is the base for Bootstrap project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Theory
&lt;/h2&gt;

&lt;p&gt;A little bit of background to understand websites and browser technologies.&lt;/p&gt;

&lt;h3&gt;
  
  
  Introduction to web and web pages
&lt;/h3&gt;

&lt;p&gt;The World Wide Web is a collection of digital pages where you can browse the pages and its read contents. You can also hop from one page to another. The collection of these digital pages as a set, identified by a root URL is called a website. If it can handle the data dynamically, we call it a web app.&lt;/p&gt;

&lt;h3&gt;
  
  
  Browsers
&lt;/h3&gt;

&lt;p&gt;Browsers are a piece of software to access the websites using the World Wide Web. As a developer, you are responsible to build those websites and you need to build them in a way browsers can understand.  Luckily browsers can understand only three things.&lt;/p&gt;

&lt;h3&gt;
  
  
  Markup with HTML
&lt;/h3&gt;

&lt;p&gt;The first one is the markup. How to render elements on the webpage? When we write on a white paper, we write some text, we draw figures, diagram etc. If we have to translate the same white paper digitally we need to render the text and diagrams digitally. There are many ways to render elements digitally but we can render for browsers with the help a markup language called HTML. HTML stands for HyperText Markup Language and contains tags to render different kinds of elements like text, images, audio, video etc. Browsers can understand what a page is made up of using HTML.&lt;/p&gt;

&lt;h3&gt;
  
  
  Styling with CSS
&lt;/h3&gt;

&lt;p&gt;The second thing is the styling of the elements. When we are writing on a paper we add borders, we increase the text size for headings, we make the letters bold to emphasize and sometimes small to de-emphasize and also add colours to bring more appearance. We can do the same thing to the elements of the browser but we need a way to tell the browser what kind of styling we need for an element like font size, font colour etc. That is done with CSS - Cascading Style Sheet. It holds the styling rules for HTML elements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Interactivity with JS
&lt;/h3&gt;

&lt;p&gt;The third thing is the interactivity of the page. We cannot make any dynamic interactions on the white paper nor change the content dynamically whenever needed based on some user interaction. But we can do that on digital pages i.e. HTML pages. Browsers can understand what interactivity is needed for HTML and CSS elements using a scripting language called JavaScript. Changing the colour of the button when clicked, showing the menu when we hover the mouse of a link is done using JS. We can do a lot more with JS which we will cover in future lessons.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;You need a browser to see the webpages and a code editor to make the webpages. &lt;a href="https://dev.to/posts/static-website-project-ideas-for-beginners/"&gt;Refer to this post&lt;/a&gt; for more details.&lt;/p&gt;

&lt;h2&gt;
  
  
  Milestones
&lt;/h2&gt;

&lt;p&gt;These are the milestones you need to achieve for this foundations project.&lt;/p&gt;

&lt;h3&gt;
  
  
  HTML
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Draw a layout.&lt;/strong&gt; Spark your imagination and decide on how your website should look like and what to put inside a page like headings, text and images. Use a pencil/pen and paper to sketch some layouts. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"&gt;Read more.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create a project folder.&lt;/strong&gt; Always create a new folder for every project. I recommend you keep all your project folders, software installations in a drive other than the OS drive. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"&gt;Read more about the folder and file structure.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create HTML files.&lt;/strong&gt; Open the project folder in VS Code or Sublime Text and create a new file called index.html. It is better to create the files from the editor itself. The HTML file is just like a text file. The text file has .txt as the extension and HTML file has .html as the file extension.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Understand the structure of the HTML.&lt;/strong&gt; HTML is treated by the browsers as a document and it is generally divided into two major sections. The head block and the body block. Both blocks are created using the head and body tags. We include the meta tags, document title, external, internal styles and scripts in the head block. The content goes into the body block. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"&gt;Read more about the structure&lt;/a&gt; and &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"&gt;anatomy of tags&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Learn tags to render these elements.&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"&gt;Headings, paragraph, lists&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML"&gt;Images&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"&gt;Div&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"&gt;Section&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Links HTML pages with the anchor tag.&lt;/strong&gt; The heart of the web is to move from one page to the other page. The anchor tag takes us from one page to the other page. The href part takes care of the destination file. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  CSS
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Style the elements.&lt;/strong&gt; We will make the HTML elements beautiful with the CSS. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics"&gt;Read what CSS can do.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Attach CSS.&lt;/strong&gt; We can attach the styles to HTML elements in three different ways. Internal - styling rules written inside the style tag with selectors, External - all the styling rules in a separate file and referencing the file in the HTML - and Inline - rules written inside the opening tag of an element. Each has its precedence and advantages. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured"&gt;Know how can you attach the CSS.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Select elements and apply styling rules.&lt;/strong&gt; We need to select the element(s) first to apply the rules. Selecting is very important in CSS. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors"&gt;Know how can you select the elements.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ID and Class.&lt;/strong&gt; Apply the styles by selecting the element specifically with an ID and apply common styles to many elements with a Class. &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors"&gt;Read how to select with ID and Class.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Practice the following rules and use them to style the webpages.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"&gt;Font color&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"&gt;Font size&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"&gt;Background color&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"&gt;Border&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"&gt;Border radius&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"&gt;Padding&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"&gt;Margin&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
