TDV Web Design is a landing page for new or existing Ecommerce businesses to solicit the services of a proffessional Ecommerce web designer. The TDV Web Design landing page outlines the features that will be included in the finished design of a website, including Responsiveness and uniqueness.

Users of this site will be able to find all the information they need to know regarding the services of the web builder and how to contact them. The site is targeting towards business owners who are looking to have a unique and proffesionally designed webstore.

Featured at the top of the page, the navbar contains the name of the business (TDV Web Design) in the far left of the navbar.

Located in the top right are links to the three different sections of the page (Home, Features, Contact).

The navbar is in a font consistent with the page and a simple white color that fits the overall colour scheme of the site.

The navbar clearly portrays the name of the business and the links.

It is responsive, turning to a burger menu when the site is used on narrower screens to allow to site to be easily accessible to users from any device.

The header shows the name of the business and a short description of the services provided.

Here is where I first used a gradient I created in CSS. It goes from a dark navy to a light blue.

I used a copyright free image from unsplash.com. I used this image primarily because it fitted my colour scheme but it also somewhat represents the services of the business.

I used two buttons titled Read More and Contact Me for an alternative route to the different sections of the page.

These buttons are in light blue and a deep green as I believe these soft colours suit the overall tone of the site.

This section is where I first used a CSS wave effect created through createwaves.io. I used this effect at the bottom of this section to create a nice effect and divison between the sections of the site.

Here I display a list of companies from left to right.

This section is used to display companies the business may have worked with in the past to give the customer/ user a understanding as to the quality they may expect from TDV

I used companies that would immediately be familiar to the user.

The Features section gives a simple descripton and introduction of the features that will be implemented to the final design of a site built by TDV Web Design.

Here I used the same design philsophy as in the header, Using a stock photo that both matched the colour scheme and the business.

I also used the gradient as a background in this section to keep a consistent colour scheme to the site.

I again used the wave design at the top and bottom of this section to again create clear divison between the prior and upcoming section.

In this section I used icons found on fontawesome to create three simple and easy to read icons and headings further describing the services of the business.

I used the gradient I created in CSS to surround the icons in a circle to keep consistency within the site.

Here continued with the trend of section being half stock photo, again using a photo that fit the colour scheme of the site.

I used a bootstrap Email compontent to create a way for the user to contact the business directly from the webpage.

I created a small send button beneath the email.

I again used the gradient as a background for this section with the wave design used at the top and bottom.

I created a simple footer with links to social media platforms.

I linked facebook and twitter.

I customised these icons using CSS.

I tested that the page works in the primary browsers used on desktop and mobile. (Edge, Chrome, Firefox and Safari)

I confirmed that the project is perfectly responsive and works on all screen sizes using Developer Tools on Google Chrome.

I confirmed that all sections are readable and easy to access.

I confirmed that all elements are working, ie. Navbar, buttons and Email Form.

I initially had issues with images appearing on the deployed page, I fixed this issue by using proper relative paths in my img elements.

Code pre fix:

Code post fix:

I used the W3C validator to check for any issues in the code and to quickly resolve said issues.

I used the Jigsaw Validator to check for any CSS issues and to again quickly resolve them.

I confirmed with the Lighthouse Tool in chrome that my site is easily readable and accessible.

No unfixed bugs

The site was deployed through Github pages.

I used the following steps to deploy my page:

1. Use GitHub Directory, navigate to the Settings Page.
2. From the Settings menu select Pages.
3. From the Source option select Main Branch and Root Folder
4. Click save.
5. Wait a couple of minutes and the page is live.

The livelink can be found here https://tylerdevries.github.io/TDV-Web-Design/#

I used the following sites as sources for images, CSS, HTML and Bootstrap components.

unsplash.com

getbootstrap.com

fontawesome.com

getwaves.io

cssgradient.io