RECREATING AN ABSTRACT HELP CENTRE USING HTML AND CSS

INTRODUCTION

Front end Practise (https://www.frontendpractice.com/) is a site that provides frontend developers with the necessary ideas to help improve their skills. This platform is aimed at helping individuals to become a better Frontend developers by providing you with the inspiration and resources to create beautiful websites. At Frontend Practice, there is great value in recreating real websites as a form of coding practice. With their large collection of hand-picked projects to choose from, we'll be recreating the Abstarct Help Center (https://help.abstract.com/hc/en-us).


WHY IT IS IMPORTANT

With constant practise, it is believed that there is always a form of improvement that is why building an Abstract Help Center is important because it creates an avenue for one to sharpen his/her frontend skills.

LEARNING PROCESS

At front end practise, the learning methodology is friendly ranging from level 1 to 3 depending on your level. Each project on Frontend Practice comes with a recommended course and helpful resources, including color palettes, reference images, and links to free photo assets and icons. Frontend practise also provideas a list of what you can learn from each project and unique challenges specific to each project, making it easy for you to focus on the skills you want to improve. To get started, we'll need to launch HTML and CSS in our Visual studio code (VS code) editor.


CHALLENEGES

Building the Abstract Help center was so challenging due to the new features encountered. Some of which are the search input, fixed help button and Learn more arrow. Also, as the variety of devices accessing the web grows, creating a website that looks great on every screen can be daunting. Responsive design requires a delicate balance between flexibility and control. Utilizing fluid grids, flexible images, and media queries is essential.

MOST USEFUL HTML AND CSS CONCEPTS

HTML Concepts

HTML is the basic building block of the web, providing a foundation for web development. HTML concepts also provides a way to structure and organize content on the web, making it easier for users to access and understand. Some of these concepts include using HTML semantic elements like ``<header>``, ``<nav>``, ``<main>``, ``<footer>``, to define the structure of content. Header Tags, using ``<h1>``, ``<h2>``, ``<h3>`` to define headings and subheadings. The anchor ``<a>`` tags to create links to other pages. Image ``<img>`` tags to add images to a website. Div and Span Tags, using ``<div>`` and ``<span>`` tags to group and style elements.


CSS Concepts

CSS concepts can be used to create visually appealing and engaging web pages some of which are CSS selectors like h1, .class, to target specific HTML elements. Properties like color, font-size, background-color, and values like red, px, #fff, to style HTML elements. Understanding the box model, which includes margin, padding, border, and content. Layout properties like display, position, to control the layout of HTML elements. Typography properties like font-family, font-size, font-weight, text-align, to style text. Color and background properties like color, background-color, to add colors and backgrounds to HTML elements. Media queries to create responsive designs that adapt to different screen sizes and devices. Pseudo-classes like :hover, to add interactivity and visual effects to HTML elements. Transitions and Animations to add smooth and engaging effects to HTML elements.


STYLING TECHNIQUE

CSS is used to control the appearance of web pages. The styling technique can either be Inline, Internal or External. In this project, we'll adopt the use of External CSS styling.


REFLECTION AND IMPROVEMENT

The purpose of this practise is to enhance my skills by building real websites, test and improve my frontend knowledge through various challenges, improve my problem-solving skills and learn new concepts.

CONCLUSION

Frontend practice is an essential part of becoming a proficient frontend developer. Through consistent practice, I can improve my coding skills, stay up-to-date with industry trends, and develop a portfolio of projects that demonstrate my expertise. So, i'll keep practicing because the only way to improve is through hands-on experience and hard work.