Learn how to develop responsive web pages using CSS pre-processors

Introduction

The KingHost landing page’s purpose was mainly to practice SASS implementation. By using Scout-App as a translation engine to process SASS I could implement new features and speed up the development process.

Structure of the project

We have SASS and LESS as the most popular CSS pre-processors, it is really useful to separate and organize the code in different files, so troubleshooting and code management are easier, also allows a lot of nesting which speeds up the development process and avoids code repetition.

Check the new features used in this landing page redesign.

• Using HTML5, CSS3 and JS
• CSS libraries such as SASS automate the process of development
• Using WordPress as CMS (Content Management System)
• Responsive Mobile iPhone X
• Design template created on Figma in 2021

SASS Features

• CSS Compatible, all versions.
• Feature Rich.
• Mature, supported for more than 16 years.
• Industry Approved.
• Large community.
• Frameworks such as Compass, Bourbon, and Susy are using SASS.

Responsive Template

Sometimes developing as mobile first is really useful when you do not have the design for desktop or tablet. Have a look below at the Figma design for mobile versions:

Development of the project using SASS

The main goal of this landing page was to learn how to use CSS pre-processor SASS. Considered to be one of the most mature, stable, and powerful professional-grade CSS extension languages in the world.

• Installing SASS
• Import
• Variables
• Chaining
• Mixins
• Responsive and Media Queries

How to use Animations in CSS

• Create the keyframes to animate in the direction that you want to use, usually starting with opacity 0 and finishing in opacity 1 and also using the animation CSS feature.

@keyframes leftRight {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

animation: leftRight 0.8s ease 0s 1 normal forwards;

Check the resources

🌍 Check the Project online: https://ruivergani.github.io/hostinger-project/

🌍 SASS Library: https://sass-lang.com/

🌍 SEO Metatags: https://metatags.io/

Contact me

• E-mail: ruiverganineto@gmail.com
• LinkedIn
• GitHub

1. * Website developed in 2021 for learning and training purposes, by Rui Vergani Neto