Introduction

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda dolorem sed consequatur dicta optio ratione delectus et ipsum accusamus animi?

Three things to grasp with you:

Basics

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis omnis vero, cumque nihil, beatae est labore quia incidunt veniam harum mollitia minus, odit voluptate sed maiores ex sint laudantium atque aspernatur facere. Voluptate voluptatibus optio aperiam officiis, soluta quo maxime autem cupiditate sed libero iure?

Three things to grasp with you:

HTML

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos soluta molestias esse eum vitae beatae magni natus, fuga omnis asperiores assumenda facilis culpa illo sapiente hic, ea ut id vel est laborum quibusdam distinctio ratione tempore debitis. Ut, delectus aspernatur.

                
                   < h1>Hello World!< /h1> 
                   < p>My name is Harry Potter.< /p>
harry 
                
                    < img src="harry.jpg" alt="harry" id="image">

Three things to grasp with you:

CSS

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus omnis sit voluptatibus consequatur quasi iste quas soluta optio deleniti nulla ipsum, perferendis ducimus quae sequi eaque autem aperiam, vel ipsam rerum error at repudiandae voluptates saepe. Cupiditate, quasi omnis?

           
                < style>
                img{
                    height: 50%;
                    width: 50%;
                }
                < /style>
harry

Elements can also be addressed by their unique ids. Then a #hashtag is used. This is handy when you want to apply some features to only this element and not for example to all your images. The following code defines a frame for the picture: 5 pixels, black color and solid. To make it an ellipse, border-radius attribute can be used. 

            
                #image{
                    border: solid black 5px;
                    border-radius: 50%;
                }

Three things to grasp with you:

Responsiveness

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique libero autem eum quae aperiam eligendi nulla facilis ipsum amet assumenda.

Three things to grasp with you:

            
                @media (max-width: 766px){
                    img{
                        height: 20%;
                        width: 20%;
                    }
                }