Back to Browse

30. Building the footer using CSS - Full stack web development Tutorial Course

23.1K views
May 25, 2018
18:02

In this FullStackWebDevelopment tutorial video, We are going to learn about how to make better #footer using custom #css for new #website. This is the last section of our website. The footer tag in HTML is used to define a footer of HTML documents. This section contains the footer information (author information, copyright information, carriers, etc). The footer tag is new in the HTML5. The footer elements require a start tag as well as an end tag. We can have several footer elements in one document. It has a default display of block. Here we will be creating a container containing 4 columns. Each column has a heading and an unordered list. To style these text elements we put them inside a class. To remove bullets from ul lists by setting the CSS list-style-type property to none. As a result, the bullets disappear from the list. Also to provide spacing from the left side of the screen we add some padding to the footer container. We will see the difference in how adding a margin and padding can bring different changes to our footer. To make the footer mobile compatible we grab the different column class instead of directly addressing the column and give it a width of 50% instead of 100%. Now that’s it. We have successfully built our first website using HTML and CSS styling properties. So this was a wrap of the CSS section. We have covered pretty much all the major parts of CSS and HTML and basic elements required to build and design a website. Next, we will be moving towards JavaScript. Below is the quick summary of what we have covered in the CSS part. Summary Of the CSS section(video 22-30): Video 22: A quick overview of the website we will be building along with CSS features we will be working on. Video 23: Building the navbar of our website. Video 24: Making the navbar responsive i.e. mobile compatible. Video 25: Making the navbar responsive by adding functionality Video 26: How to make a form group using custom CSS Video 27: Working with iframes to add youtube video to our website. Video 28: Working with Headers, CSS images and box-shadows Video 29: Learning and working with text and image spacing. Video 30: Building the footer for the website. ---------------------------- Week 1: Day 5 Section 4: Advanced CSS: Building and styling website Tutorial 30: Building the footer ---------------------------- Do subscribe and hit Bell Icon ---------------------------- Follow us in social media handles for opportunities and code related support. Instagram: https://www.instagram.com/wb.web/ Facebook: https://www.facebook.com/wbweb/ Twitter: https://twitter.com/wbweb_in/ LinkedIn: https://www.linkedin.com/company/wbweb/ ---------------------------------------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for internship or freelancing opportunities. For consultation or partnership, related queries drop a mail to [email protected].

Download

0 formats

No download links available.

30. Building the footer using CSS - Full stack web development Tutorial Course | NatokHD