Building a landing page

So based on my previous post, Work holts on the app, you may have seen that my next goal is to build a landing page for the Git CodeCommit app. Now I don’t particularly have any money for this project so I guess it’s down to the drawing board and building a website from scratch myself.

Again, Angular is my goto framework for any web development, it may not be the smallest framework but it is the tool I know the best so I will stick with it for now.

An hour later and I have a new app initiated, it’s just a bare bones template with routing and some basic components ill need on the landing page boxed out.

All I should need for this landing page is a banner (that will contain the signup), a features section and a footer. I may put another signup after the features too.

As you can see from the gif above, I have also added smooth scroll driven by some buttons that will be on the title bar. The code for this is simple, the button click on the title bar just calls this scroll function with a class name and it will smooth scroll into view.

  scroll(className: string) {
    const elementList = document.querySelectorAll('.' + className);
    const element = elementList[0] as HTMLElement;
    element.scrollIntoView({ behavior: 'smooth' });
  }

I will use mail chimp for collecting the email addresses as I do for those who sign up to my newsletter on this blog.

The MailChimp service was pretty quick to put together

I’ll need a form entry component for the user to input the email address so it can be sent off to MailChimp. The angular materials form entry email input is a nice little widget and will do perfectly for this.

This will work well, next to hook up the input and the service.

Processing…
Success! You're on the list.


Categories: Git Project

Tags: , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: