In 60 minutes, build a stunning responsive landing page.

I'm so excited because I'm really pleased on how it turned out.

I followed Traversy Media's example on how to do the project and I really believe this is really awesome.

Are you building an app?

This stunning responsive landing page is especially good for music apps or digital content.  It's very versatile in terms of its usability.

The layout is super simple, so it's perfect for beginners.  The setup is easy.  No hard installations involved, just straight coding.  It's just straight HTML, CSS, minor Javascript and JQuery.  In fact, part of the setup is going to Codepen and copying parts of some code to get up and running fast.  Trust me other people do it all the time.

I consider myself a work in progress, so it's nice to find projects out there to get down and dirty in coding a website from scratch.

I hope you find this tutorial useful because it shows how it's always important to keep practicing no matter what.  Never stay stagnant in this profession because technology moves at a constant pace that is never going to slow down.

Before we get started I just wanted to add that whenever you are designing a website or anything at all, think about what is your main purpose and goal for the website.

Make some notes and make sure you're having fun doing it.  The last thing you want is for your project to suck real badly.  If you miss the mark of your goal or more importantly your client's goal, then everything is worthless.  Therefore, think about the process, the goal and the components you need in order to make it happen.  Always consult yourself and reflect on what you're doing before making rash decisions.

Okay lets start.

What the stunning responsive landing page will have?

This is the landing page we are going to build.  It imitates Apple, but we made it our own and called it Orange myTunes.  We also have several sections in the landing page, such as the Music section, the video section, the entertainment section, gift card section and the footer section.

 

landing page

 

REALLY HUGE IMPORTANT NOTE!!! -->  DOWNLOAD FILES FROM GITHUB HERE!

********Trust me it's worth it to follow along.*********

1. Copy Nav from codepen

I know what you're thinking.  Why are you copying the nav from codepen?  One reason is because I don't want to waste anytime creating the navigation.  Plain and simple I look for easy way to do things and so do other developers.

The stunning responsive landing page navigation system is sleek and simple at the top.

First, you need to view the code in an uncompiled Haml

It's not the right version, so make sure it's in HTML.

Click on the drop down arrow to the right.  See picture below

landing nav

 

 

 

2. Create HTML markup - stunning responsive landing page

Copy and paste code into your editor.  I am using brackets from Adobe as my code editor.   

It's a free editor and Brackets is one of my favorite editors because it works well with Photoshop, which is another great tool from Adobe.

Create a showcase area for the main canvas.  If you want to copy the same tutorial.

Go to my github and download the files.

Both with a showcase and Nav section. Get pictures for each section in my github files.

landing page HTML

 

3. Create Music section - stunning responsive landing page

For a stunning responsive landing page we are going to create this next section.  Oops I already see a mistake!

Where it mentions Apple, delete it and call it Orange.  We don't want to get in trouble here.  Besides this is just for practice.

 

landing page

 

4. Create video section - stunning responsive landing page

To create a stunning responsive landing page, you need a video section.  This will enable the user to see what your product or service is all about.  Videos are an excellent way of explaining about yourself too.

Next, create a video section by using the section tags with a

<section id="video" class="section bg-light">

</section>

 

Read more --> How to create a html5 contact form in php form scratch

 

 

landing page

 

5. Create an Entertainment section - stunning responsive landing page

This section has a background with stars.  The content is super simple, but it adds awesomeness for the greatest user experience.  What do you think?

You don't see the image right now and that's because we haven't styled it yet in CSS.

 

6.Create a gift card section - stunning responsive landing page

To make things easy, copy the code you see below.  The section tags create a container or specific area.  We have specific content, so users are able to purchase things for their device.  However, dummy content was inserted into the paragraph tags to create something for the time being to make the page fuller.

To get dummy content go to ipsum.com

Sometimes code editors may have lorem ipsum as an extension, so you can look for it that way too.  This makes inserting text a lot easier to include in your project.

 

Read more -->  The most powerful and effective way to build a responsive email template

 

landing page

 

 

7. Create a footer section - stunning responsive landing page

 

Some of you guys may be thinking "hey why don't you use the footer element?"  Apparently, I've discovered it wasn't working on my desktop, so I finally gave up and used the section tag instead.  As I was styling the CSS, it wouldn't work in the browser.  Maybe it had something to do with browser compatibility, but it took me a good hour to figure it out.

So this is conclusion of the markup.

Next, is the CSS styling.

 

landing page

 

landing page

 

landing page

 

 

Finally these are the CSS files need to style the landing page.

See github for complete files.

I almost forgot you need to go to Google fonts and import the PT Sans font.

landing page

landing page CSS 2
landing page 3
landing page 4
landing page 5
landing page 6
landing page 7

Finally, include Javascript files in main.js

landing page Javascript