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.
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.
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
2. Create HTML markup - stunning responsive landing page
Both with a showcase and Nav section. Get pictures for each section in my github files.
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.
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
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.
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.
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.