Hello beautiful people. Today I am very excited to share this brand new web design that I created for my Client. In the beginning of the design I was realy nervous, how this design came out at the end but finally In The end result is in front of you.
I created this design A week ago but now I am sharing this design with you.

![screencapture-alfalahonlineacademy-2023-11-02-19_17_51 (1).jpg](https://images.hive.blog/DQmNzWuZS2aMdY6HntWzMPwek9ivWYeNoWJQWcCwtkbJPgU/screencapture-alfalahonlineacademy-2023-11-02-19_17_51%20(1).jpg)

<h2>The Process Of Building Each Section</h2>

<h3> During Designing Header of The Site</h3>


![111.png](https://images.hive.blog/DQmVMVLFoucdypCCV5xHSyaaDJbsMoCKrNAahs8iM8cuvMr/111.png)

<h3> After Completing The  Designing Header </h3>

![tj.png](https://images.hive.blog/DQmezA9X6kKkFQwW1A5VJ1tiEAVT4twhkhjgiYg4VAHkZEj/tj.png)
Its look Pretty now. The Designing Of Header is difficult as compare to other secions because it contain the logo and other nav menu link

<strong> Here Is the mobile version of Header Look </strong>

![kl.png](https://images.hive.blog/DQmccLi9BgLwyV7o9LxvrbZn3StSGMsF2LWoKNTco9U8MRF/kl.png)

After Creation of header I started to build the home page. In the Home Page the banner is most important in whole side because this is a place where visitors see first when he land on the website.

<h3> During Designing Home Page Banner </h3>

![tjtj.jpg](https://images.hive.blog/DQmeXGk4gQtaaxPpuzYLg7zXsRM7xtAjfbEmvry6TqpBGs7/tjtj.jpg)

<h3> After Completion of Home Page Banner Design </h3>

![fat.jpg](https://images.hive.blog/DQmZFUREDpZnJR1Ef1YcmtWBSJNhZXt2Ts2HYQABWesKAVN/fat.jpg)
It took to much to time because I used gradient color as a overlay and mixture of two color is difficult because it needs more concentration to create gradient overlay.  
After That I Created some more sections Here is the pic of Before and after for all the sections.

<h3> During Designing of About Section </h3>
![gnn.png](https://images.hive.blog/DQmWSsukYB3hDwN6APbB4cSvAnZ9nqZZzb1yXtgnSgTvGGC/gnn.png)

<h3> After Completion  of About Section </h3>

![tjjj.png](https://images.hive.blog/DQmV3jsj38wnQKo1hLTfaaBuYFisQWEUT9xzJWe5jFWrEjp/tjjj.png)

You can see the clear difference of Colors padding and margins . During process of designing we design every pixel . In this section I did same margin and padding to Increase the look of this section and now this section is ready. I designed each and every thing like border colors, border width, button, each and every thing.

 <h3> During Designing of Trial Section </h3>

![Screenshot 2023-11-02 194609.png](https://images.hive.blog/DQmXyjcECCPHMQ8SweikXV44VsZV4yxXVo7H3Jse1aGqDpH/Screenshot%202023-11-02%20194609.png)

<h3> After Completion  of Trial Section </h3>


![Screenshot 2023-11-02 194800.png](https://images.hive.blog/DQmfZ7HMui3mLEx2jnjDdKRGnHVSJceeEtGHbWeCFEUWhzf/Screenshot%202023-11-02%20194800.png)

 <h3> During Designing Why Chose Us Section </h3>

![Screenshot 2023-11-02 195039.png](https://images.hive.blog/DQmbGvjBdGkE55cCk5ep3JEgoFgyyipn5vRHrAChWFJpESM/Screenshot%202023-11-02%20195039.png)

 <h3>  Completion Of  Why Chose Us Section </h3>

![Screenshot 2023-11-02 195149.png](https://images.hive.blog/DQmTjbKcS3vrnparHywUAPKbYTyPrtWBpqRPYX4wkYKfnLe/Screenshot%202023-11-02%20195149.png)

 <h3> During Designing Blog Section </h3>


![Screenshot 2023-11-02 195348.png](https://images.hive.blog/DQmVFsEtaV5sn94kJ6Jq42dqG7wQ1Pw1WuUgTQmm2GTudGu/Screenshot%202023-11-02%20195348.png)

 <h3>  Completion Of  Blog  </h3>

![gggg.png](https://images.hive.blog/DQmY7cJLtPkADNdBv883M4VYcNT32UrL3XBS6yra48MDesK/gggg.png)

Now Blog is fully ready. spacing padding margin fonts everything is perfect now.

 <h3> During Designing Last Section Of the Home Page </h3>

![bbbbb.png](https://images.hive.blog/DQmPxYpuui1oqw9UWagKeJUePRTh3YeG3HLmKVPnj5ufiYG/bbbbb.png)

 <h3>Completion of  Last Section Of the Home Page </h3>

![qqq.png](https://images.hive.blog/DQmcJVbRjSUxBj56T32rzchoSyjMghqH3zCihCWZZWqZX1B/qqq.png)

 <h3> During Designing Of Footer </h3>

![kl.png](https://images.hive.blog/DQmZg8etDKgk8wUiKefyvwZPQC2Q6NNYVFkeNrevY73hVKP/kl.png)

 <h3> Now Footer Is Ready </h3>

![gggggggg.png](https://images.hive.blog/DQmaUvicnB9SHNieUkfKF2iYneJvSWXhnGxRYa3NLb8xMwJ/gggggggg.png)

In The Whole Process of building this page Took Alot of Time because I fixed every pixcel, every fonts, used colors in  a good manner, used different fonts with different typography and sizes.

Now In The last I sharing mobile version with you because majority of the people used mobile phones and they visit site thorough mobile . So it's compulsory for us to make mobile responsive site .

  
![screencapture-alfalahonlineacademy-wp-admin-post-php-2023-11-02-20_02_07 (1).jpg](https://images.hive.blog/DQmUekpjKsHofixehuJH9jmfDEAJymq2AG9D9RaGnbwwyFW/screencapture-alfalahonlineacademy-wp-admin-post-php-2023-11-02-20_02_07%20(1).jpg)

You Can See How this site will look on mobile. It's fully responsive for mobile user .Margin Paddings is equally distributed between the section 
Thanks I hope you will Appreciate my work