In Day 71 of the Salesforce Bootcamp, Sanjay Gupta delves into HTML and CSS fundamentals essential for Lightning Web Components (LWC). The session covers ID and class selectors, list creation in HTML, and practical coding examples, preparing participants for upcoming JavaScript lessons and further development in Aura and LWC.
Hello everyone, I am Sanjay Gupta, and I welcome you to Sanjay Gupta Tech School. Today marks Day 71 of our Salesforce learning boot camp, where we will focus on HTML and CSS, crucial for developing Lightning Web Components (LWC). This week, we will complete our discussions on HTML and CSS, and next week, we will transition into JavaScript.
For those who are joining this boot camp for the first time, I want to take a moment to introduce myself. I have dedicated my efforts to teaching and sharing knowledge with the community, and I hope to make a positive impact through this boot camp.
To maximize your learning experience, I encourage you to follow these virtual learning best practices:
As we complete week number 20, we will soon start our journey into JavaScript, followed by Aura and LWC. I appreciate the feedback and reviews shared by participants, which motivate me to continue providing free educational content.
We began our session by discussing CSS selectors, specifically the ID selector. The ID selector allows you to style elements uniquely by using a hash symbol (#) followed by the ID name. For example:
<style>
#para1 {
text-align: center;
color: red;
}
</style>
<p id="para1">This is a paragraph styled with an ID selector.</p>
This method is effective for applying styles to a single element. However, if you want to apply the same style to multiple elements, you should use the class selector, which is defined with a dot (.) instead of a hash. This allows for greater flexibility in styling multiple elements:
<style>
.name {
text-align: center;
color: red;
}
</style>
<p class="name">This is a paragraph styled with a class selector.</p>
<h1 class="name">This is a heading styled with the same class.</h1>
Next, we explored how to create lists in HTML. There are three types of lists:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milkshake</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milkshake</li>
</ol>
You can also create nested lists, which allow for more complex structures:
<ul>
<li>Drinks
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</li>
</ul>
We also discussed how to incorporate links within list items. This can be done by nesting anchor tags within list items:
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
The div element is a block-level container that can hold other HTML elements, allowing for styling and layout control. For example:
<div style="background-color: black; color: white; padding: 10px;">
<h2>Title</h2>
<p>Content goes here.</p>
</div>
In contrast, the span element is an inline container used to style a specific part of text without breaking the flow:
<h1>This is a <span style="color: red;">red</span> word.</h1>
In conclusion, understanding HTML and CSS is fundamental for anyone looking to work with Lightning Web Components. We covered essential concepts such as selectors, lists, and the use of div and span elements. As we move forward into JavaScript next week, these foundational skills will be invaluable.
If you have any questions or need further clarification, feel free to reach out in the comments or in our Telegram group. Thank you for your participation, and I look forward to our next session!
