# WHAT I LEARNED BUILDING A PRICING PAGE USING HTML AND CSS

**Introduction**

In web development, HTML which stands for Hpertext Markup Language and Cascading Style Sheets (CSS) are the language, or code, used to change and place text, graphics, frames, and other web page elements. The imporatnce of the Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) in web development cannot be over emphasised because they are two of the most crucial technologies for building Web pages. While CSS offers the (visual and aural) layout for a range of devices, HTML provides the website structure. In other words, the foundation for building Web pages and Web applications is HTML and CSS in web development, together with other more advanced languages such as the JavaScript.

**Understanding the basics of HTML and CSS in order to build a pricing page**

To be able to build a simple web page, the web designer must be able to understand some fundamental tags/elements in the HTML. In HTML, the `< > `symbols are called angle brackets. They are used to enclose HTML tags, which define elements in an HTML document. For example,` <p>` is an opening paragraph tag, and` </p> `is a closing paragraph tag.
It is crucial to understand HTML tags and their syntax in order to properly structure web pages. The HTML tag consists of three main parts namely:
*Opening tag:* `<tagname>` — Defines the start of an element.
*Content:* The actual text or elements inside the tag.
*Closing tag:* `</tagname>` — Marks the end of the element (except for self-closing tags).

The HTML tags often include attributes in the opening tag to provide additional information. The main example of HTML attributes is the `<a href=""></a> `which is an anchor tag to create a hyperlink and the href attribute specifies the URL (destination) of the link.

One of the most effective tools for creating web pages is CSS. Building professional-looking websites is made easier by knowing the CSS properties, box model, and responsive techniques. Casading Style Sheets (CSS)is used to style the HTML. The CSS controls layout, spacing, colors, fonts,and other 'visal-appealing' features of a webpage. CSS consists of selectors and declaration blocks which is represented thus:
Selector{
property: value;
}
An example is:
body{
color: blue;
font-size: 16px
}

**Building A Pricing Page: What I learnt and the Challenges Encountered**

Creating a website's pricing page is a vital task that needs to be carefully planned, designed, and carried out. I created a pricing page using just HTML and CSS, and I learned a lot in the process. Some of the most important lessons I learned from my experience are:

*Structuring the HTML properly.* For your website or the pricing page in this instance to be readable, navigable and also make sense, you need to properly structure the HTML by using the semantic HTML elements. A semantic element is an HTML element that makes its meaning clear to both the developer and browser. These elements enhance accessibility and readability of the code. In building my pricing page, the most common semantic elements I used includes the following:
`<div>` for grouping items and related contents
`<section>` to divide different parts of the page
`<h1>` `<h2>` and `<h3>` for clear and hierarchical headings
`<ul>` and `<li>` (unordered list) for listing features and
`<button>` elements for call-to-action buttons. All these elements helped in giving a stucture to my pricing page.

Another learning point was remembering to use the tags (opening and closing tags). When the tags are wrongly used, it may lead to disrption of the webpage , layout problems, broken functionality or even misalignment.

For styling, the properties mostly used in my pricing page to make it visually appealing were:
* display: flex; used to create flexible layouts with elements that you can align and distribute vertically or horizontally.
* Flexbox is a layout method for arranging items in rows or columns. This makes it easier to design a flexible responsive layout structure, without using float or positioning.
* Margins, Gaps and Padding: Proper use of margins, gaps and padding ensured that elements had enough spacing.
* Colors, Background Colors and Borders: were used to differentiate pricing plans using subtle background colors and border styles to make the page more visually engaging.
* Font properties: Selecting the right fonts and sizing and using CSS properties like font-size, font-weight and line-height helped improve readability of the pricing page.
* The width and height property of the CSS helped to control how much space an element takes up on a webpage.

When using the CSS property it is important to follow the correct CSS syntax to avoid errors.

**Challenges Encountered in Building this Project**
In the course of building the pricing page, I encountered different challeges but the major one was getting the different items in the pricing page to come together and knowing which style property to implement at the different stages. It was a tasking and time consuming project for me being an aspiring developer trying to grasp and understand the workings of the various CSS property; but with continous research and practice, I know I will overcome these challenges and get better at working with the HTML and CSS with minimal difficulty.

**Conclusion**
In summary, creating a pricing page with just HTML and CSS was a really instructive and educative experience for me. It helped me develop a better grasp of front-end development best practices by effectively organizing the layout and making it aesthetically pleasing and easily navigable. The importance of structuring and simplicity in web design was reaffirmed by this project. I look forward to  honing my skills by using JavaScript to add animation and interactivity to future projects.