Well in our last blog, we have learned about the basics of CSS, and now it’s time to go a step ahead and learn how to make few interesting things out of it.
So in this article, we will be learning about how to make a basic introduction page with your social media links, like this ⬇ and that too from complete scratch.
Ok so get yourself a coffee and let’s start 😉
Setting Up Basic Files and Adding Boiler Plate Code
Create an index.html with basic Html code and link it with a CSS file (here style.css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riddhi Suteri</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
The layout of the Page
Let’s define the layout/structure of our page
Let’s give this rough structure using divs in Html
<body>
<div id="background">
<div id="image">
</div>
<div id="intro">
</div>
<div id="icons-container">
</div>
</div>
</body>
Setting up the Background Page
Now for adding Background Image in CSS we will make use of the following properties
background-image – to set background image,
background-size – to set size of background image,
background-position – to set position of background image,
background-repeat – to set/unset repeating background image
Also since we want the background image to cover the whole viewport of the screen, hence we will be setting heights and widths accordingly
height: 100vh (vh means viewport height)
Width: 100vw (vw means viewport width)
(here 100 means to 100% of the visible height and width)
Hence the CSS part will look like this
body {
margin: 0%;
background-image: url("https://images.unsplash.com/photo-1622812727979-4709bfd21513?ixlib=rb -1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80");
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
}
(Note margin:0% is set to remove all the initial margin given in default by the Html)
Moving Forward
Now that the background image is set! Let’s quickly fix an image and write a quick intro
Here is how the code will look after you have added an image and a short introduction
<div id="background">
<div id="image">
<img src="https://randomuser.me/api/portraits/men/61.jpg" height="300px" width="300px"/>
</div>
<div id="intro">
<p>Hi! I am Riddhi Suteri 😉😉</p>
</div>
<div id="icons-container">
</div>
</div>
Now here comes an interesting part i.e using icons for social media links…
For this purpose, we will be using fontsawesome (it is a free site from where you can use icons for your site).
For using it’s icons you just have to add a link of it in HTML file
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Now you can simply go on to the site and pick the icon you like and copy its HTML and can start using it freely on your site.
Also add links of your profile using <a> </a> tag.
After doing all the above modifications our code will look something like this …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riddhi Suteri</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="background">
<div id="image">
<img src="https://randomuser.me/api/portraits/men/61.jpg" height="300px" width="300px"/>
</div>
<div id="intro">
<p>Hi! I am Riddhi Suteri 😉😉</p>
</div>
<div id="icons-container">
<a href="https://twitter.com/ridsuteri"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/ridsuteri"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/ridsuteri"><i class="fab fa-instagram"></i></a>
<a href="https://linkedin.com/in/riddhi-suteri"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</body>
</html>
body {
margin: 0%;
background-image: url("https://images.unsplash.com/photo-1622812727979-4709bfd21513?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80");
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
}
Positioning and Additional Styling
Now there something really important that is still missing ..yeah center aligning all elements and carving image to oval/circle
Let’s do it
To Center all the content we will be treating the whole background as a grid and place the items in its center, this can be done using
#background {
display: grid;
place-items: center;
padding-top: 70px;
}
Padding to maintain a gap from the top
And for curved edges,
img {
border-radius: 50%;
}Now the text looks so tiny and too common, let’s change the text style and give it a bigger size
We have used have Roboto Mono from Google Fonts and font size of 40px
font-family: "Roboto Mono", monospace;
font-size: 40px;
Adding Hover Effects
a:hover {
color: red;
font-size: 80px;
}
The above code will add a red color and make the font go 80px when the mouse hovers over the selector.
After doing all the necessary changes, check back your webpage …
And tadaaa !! We have made completed our project 😉
This is how it will look at the end
Finalised code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riddhi Suteri</title>
<!-- for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- for fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="background">
<div id="image">
<img src="https://randomuser.me/api/portraits/men/61.jpg" height="300px" width="300px"/>
</div>
<div id="intro">
<p>Hi! I am Riddhi Suteri 😉😉</p>
</div>
<div id="icons-container">
<a href="https://twitter.com/ridsuteri"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/ridsuteri"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/ridsuteri"><i class="fab fa-instagram"></i></a>
<a href="https://linkedin.com/in/riddhi-suteri"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0%;
font-family: "Roboto Mono", monospace;
font-size: 40px;
background-image: url("https://images.unsplash.com/photo-1622812727979-4709bfd21513?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80");
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
}
img {
border-radius: 50%;
}
#background {
display: grid;
place-items: center;
padding-top: 70px;
}
a:hover {
color: red;
font-size: 80px;
}
If you’re a beginner and have landed directly on this page, then we would recommend you to first go through our 1st article on web development, to start from the basics: https://www.meusec.com/dev/web-development-1/
Sometimes we include links to online retail stores and/or online campaigns. If you click on one and make a purchase we may receive a small commission.
Comments:
1 reply on “Web Development Phase 4: Advanced CSS(Cascading Style Sheets)”
great article !!