flex: we will use this utility class to display children elements in a horizontally aligned manner (side-by-side) using CSS Flexbox. container: we will use this utility class in every section to make sure that the inner elements do not exceed a certain width which we'll specify in CSS On the div wrapping the elements inside this section (the navbar), we register the container and flex class. The Navigation Bar section is going to be comprised of our site's name as well as two navigation links: Log in and check courses. If you created an HTML biolerplate by yourself, copy the following link tag and paste it into your head tag: This will allow you use Font Awesome icons in your project Let's Get Startedįirst, make sure that your stylesheet file (.css) is properly linked to your HTML page. If not, you can copy this boilerplate code and paste it into your code editor: Īs you can see in one of the shots, we will be using some font icons to give better swap to our service section.įor this, we will be using font awesome from the CDN. If you have emmet installed in your IDE, you can generate an HTML boilerplate for your project by typing ! and clicking the enter or tab key on your keyboard. And finally, we'll learn how to make the page responsive so that it works on all screen sizes.Įach of these sections will teach you some new CSS and web development skills and tools. We'll also cover many other CSS concepts. This tutorial will teach you how to use and implement CSS Flexbox and CSS Grid alignment. In this tutorial, we are going to build a simple landing page for an online education platform called Skilllz.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |