As you can see in the above code, I have first of all created a lightning-card with a title ToDo List. I added a lightning-button-icon in the actions slot of the card with the icon of sync. I used slds icons to find out which icon I should use for this purpose. Next, I created the card body using lightning-layout and also created a paragraph which I added to the footer slot of the card.

Let's learn in detail about the card body first, inside the lightning-layout, I added a lightning-layout-item with padding as around-small in order to give equal padding from the border to all the list items and I specified the size to 12 as each row in lightning-layout can be divided into 12 columns at max, so, I wanted the card body to take/cover the maximum width available.

After that, I created an unordered list by referring to the slds code shown here and under each list item, I again created a lightning-layout as I wanted to divide the list item into two parts, one for the task name and other for the delete button which will be used to delete the task. This lightning-layout has a vertical-align property of center so that the text (task name) is aligned middle in vertical direction to look good with delete button and also, I specified a horizontal-align property to spread as I want the items in the task row i.e. the task name and delete button to spread evenly in the width available.

As specified above, each lightning-layout under the list item has two lightning-layout-item one for task name and one for delete button. I have given the padding as horizontal-small to both these lightning-layout-item so that they're properly spaced from each other and also from the corners. I again used lightning-button-icon in order to create delete button for each task.

Moving onto the footer code, I again used lightning-layout but this time I specified a property named as pull-to-boundary as small in order to make sure that the text field and the button that I am going to create should stick with their boundaries irrespective of the width. I created two lightning-layout-item inside that. Again, these two are having a padding of horizontal-small so that they're placed away from each other and from the footer corners as well.

In the first lightning-layout-item, I added the property of flexibility as grow because I want the input field to grow as the width increases, I didn't add this property to the second lightning-layout-item where I am going to place the button because I want the button to have a fixed width as it shouldn't grow depending on the container width.

Finally, I added a lightning-input field to the first layout item with a placeholder as Enter new task so that it's shown as a hint and I also specified the variant as label-hidden as I didn't want a label for this field. I also made this field required as it's important to add a task name before adding it to the todo list. For the second layout item, I just added a simple lightning-button with variant as brand as I wanted it to be blue in color. I specified the label of this button as Add, as this button will be used to add elements to the todo list.

The output of the above code i.e. the final design is shown below:-

Getting Started with Lightning Web Components | LWC | Salesforce from Rahul Malhotra

As you can see in the above code, I created a simple lighting-card that consist of a lightning-input field with a label Write your Name. This field has an onchange handler associated which is calling my updateName method present in the javascript file. The value of this field is binded with the name variable which we're going to define in our js file. Below that, we just have displayed a text as:- Hello {name}, Welcome to your first LWC Component. In this statement everything is static except the name variable which is declared in the JavaScript file and being used here, by specifying it within curly braces{}.

As you can see above, I have just created a name variable which is having a default value empty. Below that we have our updateName method defined which is responsible to udpate the name variable with the value of the input field as this method will be called automatically whenever the value of input field is changed by reacting to the onchange handler. The onchange event will be passed onto this method automatically and inside this method, we're getting the reference to the HTML element which is changed by using event.target. As, we need the value of that HTML element, we're getting that using event.target.value. We're assigning that value to the name variable that will automatically cause the HTML to re-render as the name variable used in HTML as {name}, is updated now.

The component will look like this initially:-