Today in my class I learned about the project, name of portfolio.so, I'll share about what's are the simple steps of portfolio project.
PORTFOLIO:
Portfolio means is a collection of documents, designs or projects to show your achievements and skills.Example a designer's portfolio includes his innovative design,best projects, existing skills and their achievements
STEPS TO CREATE A PORTFOLIO:
1.First open the visual studio code or w3schools,to create a new html program.HTML have to parts one is head and another one is body.so open on the head tag.
2.We have to consider our portfolio into a layout or blueprint,it's easy to makes in our project what to do in next.I have split into three parts,they are header,section and footer.In this blog only about header.
3.Then we give the title in header part,I give portfolio this is my title of this project
4.Next we have to work on body section.so,create a body tag
5.Then open the header tag . because we working on header section.Next open the h1 tag this tag used for big heading lines and also h2,h3,h4,h5 are small heading lines,we have to open the heading tag what size you want.I want to bigger heading,so I open the h1 tag
5.In my project I having the naive bar.so,I open the nav tag.then give the specific details of yours.I give my about, projects,contact and login page
6.Next open the ul tag to insert my details about, project,contact and login page.ul means unordered list.then open the li tag it means list and then give the anchor tag (a href) to insert about, project,contact and login page,because the anchor tag is used for links.these are the simple steps of HTML program.Next add to style of this content.
CSS OF THIS ABOVE CONTENT:
1.First erase the unwanted space of this project to give the tag of padding 0; and margin 0; this make sure to erase the unwanted space of your project.Next give the box-sizing;border-box this makes scroll bar not exist your project and border won't to go out of your margin and border compressed in the margin to don't have a scroll bar.
2.Next give the colour of the heading.so, select the h1 tag to add the colour and give text align center tag to center the heading
3.Then the details are having the style give the list style type none this makes no style in the list elements.next give the colour and fix the center use of text align center or give display flex tag.This tag is used for allign a items or gives space to row and column direction.This tag having two commands they are justify-content and align- items.Justify content is working on flex default direction row.align items working on opposite of flex direction.these are the major difference of this two commands.I have to move row,so I used flex default direction justify content.
4.Next the details are having the underline in bottom.So we have to check,which tag contains the details.anchor tag contains the details so, select a anchor tag (a) to give the tag of text-decoration none this tag is used for erase the underline.then give the colour of the anchor tag.
5.Moving on next to give a background colour and space on heading.So,give the background colour you want and if you want the space in inner box using padding and want the outer box using margin.I want to space inner box ,so give the tag of padding pixels what you want.these are the steps of styles in above program.I only write the header section.I'll share about next blog in rest of two parts.
Top comments (0)