# HOW I REPLICATED 'ABSTRACT' WEB-PAGE IN FRONTEND PRACTICE USING HTML AND CSS: CHALLENGES AND SOLUTION(s)

A webpage can be replicated by copying its functionality, layout, and/or design. In replicating a website, you have to pay attention to every detail that concerns the page. I replicated the Abstract web page by utilizing HTML and CSS to recreate the visual appearance while maintaining the layout, colors, fonts, and styles of the original page as possible.
Below is a link to the webpage replicated by me:
`https://help.abstract.com/hc/en-us`

**Using HTML for the Webpage:**
HTML means Hpertext Markup Language. To learn more about this, refer to my previous post here [https://hackmd.io/RkSLssDhRs6_Vm47VLTO0A](https://).
I have learned a lot from just using the HTML and CSS to build a web page and with constant practice and research, it has become easier. In the course of building the web page, I observed that many divs were used to coordinate different elements of the webpage and they were given classes to help in the styling with CSS.
Example of div and class is

<div class="body">
    
</div>

The above example makes it easier for the developer to select the name of the element during styling. Many of my HTML elements were grouped into divs to help in the structuring and organization of content on a webpage.
Also, another important HTML element I used was the anchor tag or `<a></a>` tag.
This is essential for creating hyperlinks, which is the backbone of web navigation. The `<a></a>` tag helps Users navigate between multiple webpages or navigate sections within a single page.

Other important HTML elements used includes: the Paragraph/ `<p> `
`</p>` elements. This helps in the structure and organization of text in the web page, thereby making it easier to read.

Images on a webpage are displayed using HTML's `<img> `tag. It is crucial for encouraging user engagement and adding visual materials to the web page. The image tag makes it easier for the developer to add logos and other visual contents such as pictures and videos to the webpage.

The navigation section represented as `<nav></nav>` in HTML contains links to different pages or sections within the same web page. These are links to the Home page, About page, Contact and even buttons `<button></button>`.

In essence, proper structuring and organization of the index.html is the first step to getting the webpage to respond well to whatever styling property that may be implimented later on.

**Using CSS for the Webpage:**
Cascading Style Sheets (CSS) is basically used for styling our webpage to make it visually appealing. The CSS is very vast and has lots of properties. Selecting the correct HTML element and using its correct name (CSS naming convention) is one of the crucial steps to making your webpage appear coordinated and well structured. Also important is using the correct property, otherwise the page may not respond to the command.

For the purpose of this webpage, some CSS properties used in styling it include: color, margin, padding, width, height, display: flex, flex-direction, align-items, justify-content, font-size, gap and many more. Some are explained below:

* Color: Sets the text color.
* Font-size: Defines the size of the font.
* Font-family: Specifies the font style to use.
* Text-align: Aligns text (e.g left, right, center, justify).
* Width / height: Sets the width and height of elements.
* Margin: Defines outer space around an element.
* Padding: Defines inner space inside an element.
* Border: Sets a border around an element.
* Display: Defines how an element is displayed (e.g block, inline, flex, grid).
* Flex: Used with flexbox for flexible layouts.
* Justify-content: Aligns items along the main axis (e.g flex-start, center, space-between).

All these properties must be properly used for it to have the expected affect on the webpage.

**Challenges Encountered while building the Abstrat Webpage**

One major issue I faced while building the Abstract web page was that some elements refused to align as expected and it look time for me to be able to identify the mistake and make the necessary adjustment. Also, I had difficulty in knowing what CSS property to apply at a particular section to get the web page to respond accordingly. In all, though the task was time consuming, it was still doable with proper research.

**Solution:**

The major solution to some of the challenges faced as a result of building a webpage is to make extensive research to guide you on how to go about doing different tasks. This includes making online research through watching related videos, or reading up articles on simialr contents and asking from people who understand the steps better. Solutions are bound to be found when thorough researches are carried out.

**What I Learnt and Conclusion:**

In summary, though the building of this webpage was time consuming for me as an aspiring web developer who is still trying to build her foundations and find her feet in the field, it was still very educative and a good learning process for me.
I learnt that it is always advisable to use a good naming convention in CSS to help keep styles organized, readable, and maintainable. The task also broaden my knowledge on different CSS properties and the ways they can be used to achieve the desired results.
It helped me to be more focused and to pay attention to every detail so as to get the exact out come or close to the original webpage as I can.

In all, I hope to continue to build myself by carrying out research on all that has been taught to me and beyound and practice with as many web pages as I can to get more understanding and perspective with the different projects. I believe that understanding the basics very well, will help me cope better with more advanced courses such as Javascript and others.