Need help with assignment how can I write this program on notepad++? The steps are below:

Consider This Your turn

1. Style Your Personal Portfolio WebsitePersonal

Part 1: In Chapter 3, you added content for your personal portfolio website on the portfolio .html webpage. In this exercise, you will update the page with an external style sheet that includes the following updates: (Note: includes the following updates: (Note: includes the following updates: (Your instructor may want you to use the Data Files for Students provided for this exercise instead.)

1.Create an external style sheet with the name portfoliostyles04.css and save it in the styles folder within the your_turn_1 folder.

2.Add your name and the current date as a comment to the first line of the portfoliostyles04.css file.

3.Open your portfolio.html file in your HTML editor and float the image in the header section to the left by adding the attribute of class="float-left" to the tag and a corresponding .float-left {float: left;} rule to the external style sheet.

4.Add a tag to the

section of the portfolio.html file to link the external style sheet to the portfolio.html page as follows:Save both the CSS and HTML files, and open the portfolio.html le in your browser to make sure the style sheet is linked and the image is oating properly.

5.Add some space between the image and the content that is floated to the right by adding the following rule to the style sheet:img { margin-right: 3%; }Also remove the bullets on the list items within the nav section by adding the following rule to the style sheet:nav li { list-style-type: none; }

6.Center the content on the page by containing all of the content within the body by surrounding it with

...

tags.

Add a comment after the closing tag to identify that section as follows:Style the outerwrapper in the external style sheet to take up 70% of the available space on the screen and to center it within that space as follows:#outerwrapper { width: 70%; margin: 0 auto 0 auto; }

7.To make sure the webpage will render successfully in all browsers, identify the main section using the

and

tags versus

and

, and include three pairs of

tags in that section that mark up the headings of Strengths, Technologies, and Other.

8.Clear the float with the main content by adding the following style to the style sheet:#main { clear: both; }

9.Push the content below the image by adding the following declaration to the img selector in the style sheet:margin-bottom: 2%;

10.Style your name at the top of the webpage with a large Futura then Calibri then generic sans-serif font by adding the following class to the opening

tag that contains your name. class="myname" and by adding the following corresponding styles to the stylesheet:.myname { font-family: Futura, Calibri, sans-serif; font-size: 2em; }

11.Add a light background color to the #main selector that goes well with the colors in your image.

12.Add styles for padding and a border with rounded corners to the #main selector as follows:padding: 3%;border: 2px black solid;border-radius: 25px;

13.Link your style sheet to any other pages you have created in your portfolio website.

14.Add any other styles that you think would improve your portfolio webpages.

15.Validate and correct your HTML and CSS files, and then submit your assignment in the format specified by your instructor.