https://www.creativebloq.com/web-design/what-is-sass-111517618
https://www.w3.org/standards/webdesign/htmlcss
https://fonts.google.com/specimen/Merriweather?selection.family=Merriweather
In this tutorial we will learn how to get command over the latest CSS technologies that put our web design to the ultimately new level. We will see how the latest CSS frameworks put essence and uniqueness to our CSS design. We will also have a look at how to create a amazing responsive web project in this course which is Course-City.
It is basically a website that offers users a new way of learning programming languages. It provides different courses and students will get book a course according to their needs. At the end of the tutorial we will complete this project.
Now we have to install the code editor for our project. I recommend using Visual Studio Code but you can use Sublime, Atom or any other code editor that meets our requirements.
First of all create the project folder and create a basic HTML file with some references to the css styles and has font details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Merriweather":100,300,400,700,900" rel="stylesheet">
stylesheet" href="css/style.css">
Course-City | Educating People With The Latest Skills
header">
This is our project "Course-City"
</header>
</body>
</html>
Now this Is our basic HTML file which give the details about the HTML character type. It tells about the title of our project and it has a header section as well.
We are now move to CSS and open styles.css.First thing is to perform the basic reset and normalize the css. In order to make cross browser reset so that every browser render the page in the exact same way. Doing so, is still valid but its no longer necessary to do it as browsers are now getting better and modified.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Merriweather", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
We are using universal selector to reset. It will select each and every element on the page and then applies declaration to the project.
Applying some margin of 0 pixels and then padding of 0 pixels as well. By default browser apply some margin and padding to elements. Like on H1 elements some margin that is applied by browser and we don’t want these margins and padding.
Box sizing property used to border box. Box-sizing change the box model so that the borders and the padding are no longer to the total width and height that specifies for a box.
Font property applies in the body element selector and why we do this in this way because the property related to fonts is usually inherited so we using the power of inheritance here. Font-family applies to the parent element and then it is inherited by all the Childs of the family. We set it to Merriweather as it we are using in the HTML
Font weight is set to be 400 pixels and font size is 16 pixels, line height is set to 1.7 which means that it is 1.7 bigger than the predefined line height that we would have without this.
Color tag is used to apply the color we set it to 777 which is grey in the RGB.
With this code we performed a reset and project wise font definitions because they all be inherited to their child elements
CSS Inheritance significantly decreases the time needed to develop a website. Think about just how much CSS you would need to write to put the color on almost all children of the body tag. This could be time intensive, fault prone, and hard to hold. Likewise, you can imagine such a nightmare it might be in case you had been pushed to set the actual font-family or even font-size on every child element of the container.
The Class selector within CSS , which references the class attribute utilized on HTML elements. The Class selector starts with a dot(.) and then a class name that you choose. As opposed to the id attribute, several elements might share exact same class name, additionally an element may possibly belong to multiple class.
Now we are going to formatting the header element and remember it has a header class so we have class selector and then the header.
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
#26D1F3,
#A6F1FF),
url(../img/bgcc.jpg);
background-size: cover;
background-position: top;
}
Height is set to 95 vh and it means at every point height of the box of this element should be 95% of the view port height. Now we could put 100% here so the element will be exactly the same height but we choose 95% to get the almost 100%
Background image that we want is in our img folder and we select this image by writing url and then the path to the image. Since we are currently in the css folder and we have to go up one folder to be in the project folder that’s why we type ../img/bgcc.jpg
Background size is set to be cover and what cover does is whatever the width of the viewport or the element. It always tries to fit the element which is inside the box.
Our background image is adapted nicely to the viewport and it does perfect. You can see the white bar is the remaining 5% of the viewport height. So, 100% fills every point. Also you can see the text we put at the top and it is styled with Merriweather font-family and 16 pixels in size with grey color.
Background position is set to top and it insures that whatever the viewport size the top of the image is remains at the top of the container. We can also change it to bottom and center
Linear gradient is added in the background image property by specifying linear gradient in the background image tag. So we put linear gradient with colors that we want with our image.
We choose three colors with contrast of blue and then specifying each color separating by comma. So, we have basically two images one on top of the other. First one is the linear gradient going from the first color to the other. After that is our bgcc image in the background.
We have changed the colors hexa code to rgba format and adjust the opacity of our image. So, that it will be visible on the screen
rgba(37, 209, 244, 0.8),
rgba(168, 242, 255, 0.8),
Another parameter in the linear gradient is the position where it go and place it as to right bottom. Now are gradient goes to right bottom corner
To make our image and header looks more prominent we should add some padding here:
padding: 30px;
Now header looks like this after updating the colors and padding,
.header {
height: 95vh;
background-image: linear-gradient
to right bottom,
rgba(37, 209, 244, 0.8),
rgba(168, 242, 255, 0.8)),
url(../img/bgcc.jpg);
background-size: cover;
background-position: top;
padding: 30px;
}
Now we used clip-path to specify a polygon to make the image visible. So we make sure that it looks perfect with our header.
The polygon() function is required in order to define more advanced arbitrary shapes applying any number of points. The function takes in some coordinate pairs (x y, x y), each set indicating the positioning of a point. The 1st argument signifies the x-position of a point, along with the 2nd argument represents the y-position. The particular set of points make up the shape. The web browser will link the last vertex within the list using the first vertex in the list to close the polygon.
Clip-path: polygon(0 0, 100% 0, 100 75vh, 0 100%)
After adding polygon function our header looks like this:
.header {
height: 95vh;
background-image: linear-gradient(to right bottom, rgba(37, 209, 244, 0.8), rgba(168, 242, 255, 0.8)), url(../img/bgcc.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
We don’t want to move the X-Axis so we assign 0,0 in first coordinate. In the second place we want change in the X-Axis so we assign it to 100% of the width of the element from the left side. In third the X-Axis will be same but there is change in the Y-Axis so we assign this value to the viewport height. In Fourth point X-Axis back to 0 here and Y-Axis becomes 100%
This is the first part in this tutorial, when further tutorials will create then they will be place here.
In this tutorial we have learned about the our project creation that is Course-City. A website that provides development courses. We have learnt how to create a header with some margins and padding. How to align a webpage and render it to different sizes. We also studied about how can we make webpage looks interesting and promising. In the later parts of the tutorial we will see how we add SASS to our project and also keyframes.We will create our project more effective in the next part of the tutorial
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Merriweather":100,300,400,700,900" rel="stylesheet">
stylesheet" href="css/style.css">
Course City | Educating People With The Latest Skills
header">
This is our project "Course City"
</header>
</body>
</html>
style.css
/*
dark blue: #26D1F3 rgba(37, 209, 244, 0.8),
light blue: #A6F1FF rgba(168, 242, 255, 0.8), medium blue:#81EBFF
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Merriweather", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
padding: 30px;
}
.header {
height: 95vh;
background-image: linear-gradient(to right bottom, rgba(37, 209, 244, 0.8), rgba(168, 242, 255, 0.8)), url(../img/bgcc.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}