Home > Design - Imagery, Banners & Landers > Landing Pages

VIDEO: Creating A Responsive Lander In 10 Minutes (41)

06-23-2016 01:11 PM #1 caurmen (Administrator)
VIDEO: Creating A Responsive Lander In 10 Minutes

I run you through making a responsive lander based on a popular one I spied today, using Microsoft Visual Studio Code.

Visual Studio Code is free, and you can download it here for Windows, Mac and Linux

06-24-2016 08:33 PM #2 shepherd (Member)

The link gives me a 'not found' message. Browsing from ipad so that might be it, otherwise theres something up with the link!

Edit: Checked from desktop and the link seems to be broken. However, the embed does work correctly!

06-27-2016 11:06 AM #3 caurmen (Administrator)

Oh, yeah, sorry about that. In order to prevent videos being stolen and reposted (or at least make it a bit harder) that video's embed-only.

Let me know if you can't view the embed, folks. I can always work out another way.

06-27-2016 10:44 PM #4 mykeyfocus (Member)

Awesome! I love your pace at going through the video.
Hadn't heard of Visual Studio Code before, looks useful.
Very nice "Milligram framework" you recommend - will give this a try for sure.

06-28-2016 10:18 AM #5 caurmen (Administrator)

Visual Studio Code is the dog's bollocks (translation from British: it's really good). I'm super-impressed with it.

It's been really weird, actually - whenever it gets mentioned in coding circles people pop up saying "I'm a lifetime Linux supporter and I hate Microsoft, but this tool has made my life so much better..."

06-29-2016 08:07 AM #6 sahil19 (Member)

What's the img width tag in style?

I can not see it even in HD

06-29-2016 10:05 AM #7 caurmen (Administrator)

@sahil19 - It's

img {width:100%}

One of my favourite really quick hacks for responsiveness, along with using vh and vw for sizing.

06-29-2016 10:15 AM #8 sahil19 (Member)

Thanks Caurmen

My LP looks good in mobile mode. http://prntscr.com/bmio4g

But, the image covers the fold in desktop mode. http://prntscr.com/bmiovs

Any suggestions ?

Edit: found the solution online.
img {max-width:100%} solves the issue.

06-29-2016 04:02 PM #9 vincent9 (Member)

hey

is dream dreamweaver any good for making landing pages?

i learn mused but then realized it was maybe not so great for mobile landers.

thnaks

06-29-2016 04:35 PM #10 tpm767 (Member)

I'd like to know this as well for creating mobile banners/landers.

Originally Posted by vincent9

hey

is dream dreamweaver any good for making landing pages?

i learn mused but then realized it was maybe not so great for mobile landers.

thnaks

06-30-2016 10:07 AM #11 caurmen (Administrator)

Dreamweaver's pretty good. It's complex, and it can produce somewhat bloated code (reoptimise your images in Photoshop or similar AFTER running them through Dreamweaver) but it's a good tool if you know how to use it.

On the other hand, the time investment in learning Dreamweaver well is probably not that much less than the time investment in learning to code HTML and CSS by hand.

07-06-2016 10:00 AM #12 wiifmdude ()

Nice tutorial but horrible video quality, even in 720p HD I can't read your text...

Do you have the finished LP to check your code ?

Thanks,

07-06-2016 04:42 PM #13 pratchett (Member)

Here you go mate, the finished code (without the Milligram CSS framework added to the <style>):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.img{width: 80%;}
h1 {font-size: 3rem;font-weight: 600;}
h2 {font-size: 2.2rem;}
.button {font-size: 2rem;}
.column {position: absolute; top: 50%; transform: translateY(-50%);}
</style>

<title>Document</title>

</head>
<body>
<div class = "container">
<div class = "row" style = "position: relative; height: 100vh;">
<div class = "column" style = "text-align: center">
<h1>Is Your Device Battery Draining Faster?</h1>
<h2>New update for Android phones</h2>
<img src="whatever-your-image-is.png" alt="">
<ul>
<li>Apps run faster</li>
<li>Longer battery life</li>
<li>Feels like a new phone</li>
</ul>
<a href class = "button">Optimise Phone Now</a>
</div>
</div>
</div>
</body>
</html>

07-21-2016 06:53 AM #14 mrmali (AMC Alumnus)

Hi,

you can load your page direct from Visual Studio Code with CTRL + SHIFT + B

Steps:
1- Use ctrl+shift+p to open "Command Palette".

2- Type in Configure Task Runner, then click Enter.

3- choose others

The tasks.json file opens up with Hello World example, delete this script example and replace it by the following:

{
"version": "0.1.0",
"command": "google-chrome",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

You have only to replace "google-chrome" with your favourite browser.

07-25-2016 02:48 PM #15 caurmen (Administrator)

@mrmali - yes, that's a good tip! Didn't want to complicate things too much in the video, but you're right, and it's an excellent way to speed things up.

(You can also use a meta-refresh tag to auto-reload the page frequently - another good trick - but do remember to take it out before uploading! )

07-25-2016 03:22 PM #16 Mr Payne (Member)

Just a blurb, but I recently stumbled upon a free text/web dev software called Brackets. It's simple, has a clean and easy to use interface. A few great features include, split screen to work on two documents at once (html/css or html/js - etc) and a live preview mode that opens in a separate window and auto refreshes each time you resave the file, allowing you to see changes in real-time.

It's become one of my favs because it's designed very well.

Check it out: http://brackets.io

08-02-2016 01:59 AM #17 medabor (Member)

Might be a silly question but how did you open " ! " first ? lol

08-02-2016 03:28 AM #18 Gordon (AMC Alumnus)

Originally Posted by medabor

Might be a silly question but how did you open " ! " first ? lol

I think you need Emmet: http://emmet.io/

08-02-2016 10:58 AM #19 caurmen (Administrator)

@medabor & @Gordon - Emmet's actually built into Visual Studio Code. Literally all you do is create a file, save it as .html, then type ! and press TAB - bingo, all the boilerplate HTML you need to get started.

Emmet is a thing of beauty, and makes coding from scratch almost infinitely easier.

@mrpayne - I too have heard very good things about Brackets. Haven't checked it out yet but I will at some point!

08-21-2016 04:14 AM #20 medabor (Member)

Originally Posted by caurmen

Thanks Caurmen so the tab was the key

i tried Brackets and like it too. It helps typing code faster ..

05-08-2017 08:23 PM #21 shynepapin (Member)

Originally Posted by caurmen

Can't see the video....? Don't know why.

05-08-2017 11:04 PM #22 Tyoussef_PureLander (Member)

Originally Posted by shynepapin

Can't see the video....? Don't know why.

same here , i think the video is deleted from the channel

05-09-2017 01:54 AM #23 shynepapin (Member)

Originally Posted by Tyoussef_PureLander

same here , i think the video is deleted from the channel

And I really needed this info so bad. Let's see if it's reposted.

05-10-2017 09:18 AM #24 caurmen (Administrator)

Sorry about this. We're having a technical issue with this Vimeo vid - look for it to come back shortly.

05-16-2017 05:09 PM #25 shynepapin (Member)

Originally Posted by caurmen

Sorry about this. We're having a technical issue with this Vimeo vid - look for it to come back shortly.

Hey Caurmen, finally had it load up and was able to watch it. I know know what you were refering to in Recreate a spied Lander rather than have to deal with any hidde redirect code that migjt be i the ripped Lander.

Please confirm if I'm right and is this the process you do it using Visual Studio.

05-18-2017 10:57 AM #26 caurmen (Administrator)

Yup - don't use the original code, because that's potentially suspect. Recreate the design and you know you don't have anything dodgy going on there.

06-13-2017 03:09 AM #27 poker007 (Member)

Very helpful video guide Caurmen, thanks! Can you please link me to the mobile lander guide where you posted the viewport snippet? I'm not sure which thread that is and would like to read it

06-13-2017 04:31 AM #28 anhtitbeo (Member)

Hi Caurmen,

I keep getting "Sorry, Because of its privacy settings, the video cannot be played here" message. Can you check it?

06-17-2017 07:40 AM #29 corpsquid (Member)

I can't get this video to load, no error I hit play and it looks like it's getting ready but never goes anywhere. A mirror would be super appreciated, the content seems awesome and just what i'm looking for.

06-17-2017 10:39 AM #30 caurmen (Administrator)

Sorry about that. I'm in transit just now but will look into it on Mon.

06-20-2017 11:45 AM #31 caurmen (Administrator)

Are you viewing on Chrome or FF (or another browser) and are you on Mac or Win? That'll help us narrow the problem down.

09-27-2017 02:37 PM #32 buck johnson (Member)

This is awesome, thanks.

10-12-2017 09:48 AM #33 f4marketing (Member)

I finally managed to play the video (chrome on mac did not work, firefox did). And it is just brilliant. Thank you caurmen!

10-12-2017 10:28 AM #34 caurmen (Administrator)

Cool! Glad it was useful.

03-11-2018 01:37 PM #35 2redemption (Member)

Hi Caurmen

I don't know why I can't see the video. I mean, it's not that I tried to play and cannot see the video, it's that there is no video at all in your original post, not even a link. Maybe you know why I can't visualize it? (I'm using Chrome if can help)

Thanks a lot!

03-11-2018 05:24 PM #36 zeno (Administrator)

Originally Posted by 2redemption

Try checking your Flash settings for stmforum.com and setting it to allow -- the Vimeo player embed seems to want to use Flash, hence it may be blocked in browsers by default.

03-12-2018 03:55 PM #37 2redemption (Member)

Originally Posted by zeno

Try checking your Flash settings for stmforum.com and setting it to allow -- the Vimeo player embed seems to want to use Flash, hence it may be blocked in browsers by default.

It worked. Thank you so much.

08-23-2018 01:10 PM #38 2redemption (Member)

Hi Caurmen

could you tell me why i cannot see the video anymore? I see only this:

I have already flash settings allowed for stm, any other suggestions?

Thanks in advance

08-25-2018 01:49 AM #39 vortex (Senior Moderator)

Originally Posted by 2redemption

Hi Caurmen

could you tell me why i cannot see the video anymore? I see only this:

I have already flash settings allowed for stm, any other suggestions?

Thanks in advance

Thanks for your interest! But it seems the video isn't available anymore.

This is an old thread from over 2 years ago. And caurmen is no longer with us (at least not on the physical plane - he passed away earlier this year).

Most landers nowadays are built to be mobile responsive. The best and easiest way would be to just download landing pages from a spy tool and modify them for your purposes.

Please do check out other valuable threads by caurmen and other experienced members.

Amy

Sent from my SM-G930W8 using STM Forums mobile app

08-25-2018 12:58 PM #40 2redemption (Member)

I'm very sad to hear that. For the little that i've known and seen and read about him on this forum he seemed to me very kind, and most of all, an incredibly clever person.

I'll surely check other resourses, thanks Amy for letting me know.

08-25-2018 02:35 PM #41 vortex (Senior Moderator)

Originally Posted by 2redemption

Thank you for the kind words - he is indeed incredible!

(To me he's still around - thus the present tense when I refer to him.)

https://stmforum.com/forum/showthread.php?t=39463

Amy

Sent from my SM-G930W8 using STM Forums mobile app

Home > Design - Imagery, Banners & Landers > Landing Pages