Check how to code a new landing page using only HTML5 + CSS3 + JS

Introduction

Developing landing pages from scratch is considered a good exercise to practice your skills in web development, by doing this you have hands on the web development life cycle, which involves gathering relevant information about the project or client, planning sitemap and wireframe, designing the layout, development stage, testing review and launch the website and in the end gather feedback.

CodeBoost

This course has had a huge impact on my career since I started studying web development with William Moreira (https://willmoreira.com.br/) and I would recommend it to everyone, does not matter if you are a beginner or have experience in the area it will definitely aggregate knowledge.

Structure of the project

This is one of the most advanced landing pages that I have done, it was really useful to implement all features listed below and to use as a reference for future projects.

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
• Keyframes animations and CSS advanced animations
• Using WordPress as CMS (Content Management System)
• Mobile menu navigation
• Header scroll change colors
• Swiper Slide – the most modern touch slides in JS
• Design template created on Figma in 2022 (Portuguese)

Design Template

Structuring your design and dividing it into sections in Figma is something really important if you want to keep the design process professional and easy to solve your client’s issues.

• The cover page is just a thumbnail of the project.
• Inspiration page I will gather some designs for reference and have an idea about colors, images, and features to use.
• The guide is usually the style guide about colors, typography, and spaces between sections.
• The wireframe is the first design created in black/white colors to get the client’s approval.
• Resources are usually images, vectors, icons, and small components that I will be using when developing.
• UI is the interface created, fully responsive, and all screens that the client requested.
• Social is usually sharing media for social media in general.
• Backup is an optional page for backup purposes.

Style guide hand-off makes the life of the developer easier because you can code components, variables, titles, reset, and mixins easier.

Development of the project

I will describe below step by step how I started to develop the landing pages:

• Prepare environment to code using VsCode and Sass
• Coding Resets, Variables, Mixins, Grid, and Fonts
• Exporting all assets in .webp format (more performance for the web) and SVG for logos
• Creating components (features that will repeat in the code)
• Code Header, Section Hero, Section NEON Card, Section Testimony, Section Digital, and Footer
• Responsive website to all devices and screen sizes
• Using AOS animate library to improve user experience
• Animations using keyframes

SEO and Implementation

In order to improve the performance of the website I did validate all the coding in the W3C validator, implemented MetaTags to improve Google ranking SEO, and also used Lighthouse to check the performance, accessibility, and SEO features.

For me at the moment to ensure the performance you should do the following tasks:

• Check the code validation for syntax errors.
• Use Lighthouse Google Dev tools to ensure you have 95+ in performance, accessibility, SEO, and best practices.
• Use metatags.io to use the correct metatags.
• Use correct image formats such as webp and SVG.
• Host if possible using AWS services such as Lightsail and Route53.

Check the resources

🌍 Check the Project online: https://ruivergani.github.io/lp-neon/

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

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

🌍 AOS Animate: AOS Animate

🌍 Swiper Slide JS: https://swiperjs.com/

Contact me

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

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