Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the new bootstrap 4 framework. Ideal for students of all skill-sets, from total beginners or students that simply want to brush up on their coding skills.
Code a professional landing page and build a strong foundation in the Bootstrap 4 framework with HTML & CSS with this brand new course.
This course will help you create a perfect bootstrap responsive landing page for your own personal portfolio, or for your business. You will ideally have a little knowledge of HTML & CSS, however it isn't essential as I will walk you through every step of code to ensure you have the right understanding of the bootstrap framework, and the tools to further your learning after you have completed the course.
You will not only create a modern professional looking bootstrap 4 landing page, you will also take your skills further by adding animation and custom fonts to make sure your landing page stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We cover the famous bootstrap grid system and media queries to ensure your new page looks, and displays, correctly on all devices.
You will take the learn-by-doing approach which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure.
By the end of this course you will have hand coded a modern & professional landing page using HTML & CSS and built a solid understanding of the bootstrap framework to help you develop your own pages in the future.
We have a brief overview of the bootstrap 4 and have a look at the framework.
We have an in-depth look at the final landing page that you will be creating with HTML & CSS
We have a look over the bootstrap components, including the updated components in bootstrap 4.
We get to understand the famous bootstrap grid system and go though an example so you get to grips with how it all works.
We take a look at the powerful media queries that are included with bootstrap 4.
In this lecture we will download bootstrap to get up and running.
In this lecture we ensure all the essential files are in place for us to start building our page.
Here we install Font Awesome so we are able to use certain icons throughout the lectures.
In this lecture we download the images that are required for this course and place them into our project folder.
Here we look at the bootstrap navbar and create our very own version.
We style the navbar we have just created to match our branding.
Download the navbar section files for use or reference.
In this lecture we add in all the elements we need to build our full screen header section within our bootstrap page.
We style our header section of our bootstrap page within our stylesheet.
Here we code our mini 'about' section to our bootstrap landing page.
In this lecture we style our mini about section to match the rest of our page.
In this lecture we add our next section, which lets you show off your projects, designs or products on the page.
We style our 'work' section and add our overlays for each image.
Here we add our next section that lets you promote your skills or services for the user.
We style the 'why' section within our stylesheet.
In this lecture we add our customer quotes section, allowing you to display testimonials or reviews on your landing page.
We style the 'quotes' section to match the brand of the page.
In this lecture we add another essential piece to any agency or portfolio, which is the 'pricing' section.
Here we style our 'pricing' section to match the rest of our page.