Tools for Lightning Web Component Development

 Below are the tools required for Web Component Development

1. Chrome Browser (Prefered)

You can download it from Google

2. Visual Studio Code Editor

You can get VS from the below link download based on OS which you have

https://code.visualstudio.com/Download

3. Liver Server Extension in the visual studio code 

The above will run the code automatically without refresh

😃😃 Happy Learning 😃😃

 Fundamentals of HTML and CSS

HTML - Hypertext Markup Language

•  Hypertext refers to how web pages(HTML documents) are linked together.
• The markup language is a computer language that uses tags to define elements within a document.
• HTML DEscribes the structure of a WebPage.
• HTML elements tell the browser how to display the content.

Most commonly used HTML Elements 

<tagname> - Start tag

content  

</tagname> - End tag

Example : 

<H1> Hello World </H1>

<div> - This tag defines a division in an HTML document.

<p>    - This tag is used for the paragraph that starts on a new line and adds some margin before and adds some margin before and after a paragraph

<h1> to <h6> - These tags are used to give headings of different size

<a>   - These tags help you to insert an image into the web page

<ul>  - This will list items using plain bullets

<img> -These tags help you to insert an image into the web page

HTML Attributes

• HTML attributes provide additional information about HTML elements.
• Attributes are always specified in the start tags.
• Attributes usually come in name/value.

Example:

<a href="https://www.salesforce.com">Salesforce</a>

HTML data Attribute

    The data attribute is used to store custom data private to the page or application

Example:

<div data-name="Test">Username</div>

HTML Block Level

    Element always starts on a new line and occupies the full width.

Example : <div>,<p>,<h1> to <h6><ul>,<header>,<article>

HTML Inline Level

    The element does not start on a new line and it only takes up as much width as necessary 

Example : <span>,<img>,<a>,<label>,<strong>

CSS - Cascading Style Sheets

It is used to control the style of the web page

CSS Syntax

selector{property: value}

• Selector - it is used to find the HTML element you want to style

1. Element Selector - use of the HTML tags for styling

        p{color: blue;}

      2. ID Selector - uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash(#) character, followed by the id of the element 

        #idofthetag{color:blue;}

      3. Class Selector - uses the class attribute of an HTML element to select a specific element. To select an element with a specific class, write a dot(.) character, followed by the class of the element.

        .classname{color:blue;}

• Property - CSS Property you want to apply like size, color, border etc
• Value - It is the value assigned to a property for color property value is red etc

Types of CSS Styles

There are three types of CSS styles 

1. Internal CSS - not used in LWC

2. Inline CSS

3. External CSS or third-party library like Bootstrap, salesforce lightning design system

😃😃 Happy Learning 😃😃