learning how to make a website.

@abimaelyahudahApr 04.2017

Hello. I am currently teaching myself how to do coding for web designing, using HTML & CSS. I have a beginners book that I am using. I truly don’t know much as yet, but I am still taking my time to learn what I can without overloading myself, because there are tons of information out there which can get confusing. I have an idea for a website, but just don’t know where to begin in order to implement it. This is the idea:

I want to have an intro video to play just a soon as someone visits my website, but also giving them the option to skip intro and enter site if they don’t want to always have to view the video. Is this something that can be done using HTML & CSS or will I need to know some other form of scripting? And how would I go about doing that?

Thanks for the help ?

to post a comment

HTML

19 Comments(s) _↴

@morris_wmApr 05.2017 — #Essentially, what you're trying to create is a "landing page" - where visitors can watch the video, or skip it, right?

You'd create the page with HTML and CSS, with the video embedded (it's just a media file, afterall).

You then set the video control to autoplay using the HTML tag... A quick Google for "autoplay video html" gave me the right link from the W3C - this is the relevant link: https://www.w3schools.com/tags/att_video_autoplay.asp

I'd recommend thoroughly reading through the W3C site, and practising, to give you a thorough foundation from which to build your career :-)

@MyDigitalFarmApr 05.2017 — #codecademy is a great resource for beginners or anyone in need of a refresh.

@abimaelyahudahauthorApr 05.2017 — #Thanks very much for responding. I'm not sure if it's called a landing page, but I would like to have the page where visitors have the option of either watching it or just click enter page or skip intro. The concept is for when someone types in, for e.g., www.mypage.com, it takes them to the intro page which is the video and also gives them the option of either watching it to the end or just clicking skip intro to enter site, etc.... Is that what a "landing page" does?

@abimaelyahudahauthorApr 05.2017 — #Thanks for the reminder of this site. This site is truly a great site indeed to learn from.

@abimaelyahudahauthorApr 05.2017 — #Thanks for the help on this. I don't know if it's called a "landing page". Is the "landing page" the same as an intro page? Will this page react in the way that if a user, for e.g., go to my page www.mypage.com it will open up with the intro page first, and then give them the option of either skipping the intro or to continue watching it?

@Kevin2Apr 05.2017 — #OK, I'll be the curmudgeon here. Yes, it's technically possible to build what you envision. The broader issue is [i]should[/i] you.

All the cool kids were creating similar "intro" or "splash" pages -- in 1999. The problem with them, and the reason you don't see them anymore, is that they weren't effective. They did not draw people into a site, they chased them off. Even with a "Skip Intro" link/button.

The web is an "instant gratification" vehicle. You have about 3 seconds to engage your potential user. That means something of interest to them is on-screen and viewable/usable. After 3 seconds you start losing users at a fairly prodigious rate until at about 12-15 seconds almost all are gone. Your video file will probably be multi-multi-megabytes in size. Guaranteed it won't load in 3 seconds, probably not even 12-15. "Oh, but people can click on 'Skip Intro'." Some will, most won't. They'll be hitting their browser's Back button and running away. So if you're extremely lucky, about 10% of visitors will see the opening few frames of the video then either leave or skip it. Far fewer will actually watch the whole thing -- perhaps 1%. The ROI here is pitifully miniscule.

All that is NOT to say "don't use video" or "don't use [i]that[/i] video" on your site. Go ahead and use it somewhere, but let the user make the decision as to whether or not she or he wants to even start to load it and play it. Preferably with some warning about how large the file size is and/or how long the video lasts. Let YouTube be your guide. YouTube always states the playing time of a video and lets the user/viewer decide whether or not to play it.

Lastly, using a video as your domain's/website's opening page will kill your SEO and any hope for ranking. Search engines crave textual content. "Skip Intro" is not textual content. If that's not a concern for you, well, OK. But everything else still applies.

@Kevin2Apr 05.2017 — #[...]

the right link from the W3C - this is the relevant link: https://www.w3schools.com/tags/att_video_autoplay.asp

I'd recommend thoroughly reading through the W3C site [...][/QUOTE]
w3schools.com is in no way shape or form associated with the W3C (https://www.w3.org/). This is unfortunately a common, but very understandable misconception.

@abimaelyahudahauthorApr 05.2017 — #Hey thanks Kevin. You're not being a curmudgeon to me man. I don't know what I am doing yet, so it's a good thing that I asked for help. Everyone's responses have been edifying to me. Thanks again. I looked at both links. The one from Morris_wm and the one from you, and I can see the misunderstanding. Nevertheless, which one can I learn from the best?

@Kevin2Apr 05.2017 — #Don't take my comment about W3Schools not being related to W3C as ragging on W3Schools. It is actually (now) a pretty decent learning source, especially for beginners. Most explanations they give are short, concise, in relatively understandable terms and provide simple coding examples to work with. Even after 20-odd years of doing this web-dev stuff I refer to W3Schools occasionally to look up the exact syntax of something, or remind myself how to code something I don't use every day.

Once you have some basics down MDN (Mozilla Developer Network) is also an excellent source, although somewhat more "techy" oriented both in language and example code. Even W3C has gotten into the act and has some good documentation and example code on its Wiki.

Of course there are myriad tutorials out there, both free and payed, but my opinion is that you learn best by doing, failing, trying again, (repeat as necessary), and eventually succeeding.

And your favorite search engine is your best friend. When I look something up I will preface my search term with the language I'm working in. For example, "CSS text color". Or "Javascript loop". Those are 2 almost too basic examples, but you're smelling what I'm stepping in. ?

Good luck!

@abimaelyahudahauthorApr 06.2017 — #Sounds good man. Thanks for the tips.

@Martin_SmithApr 18.2017 — #W3schools is the best website to learn about developing a website..

@MirilApr 18.2017 — #It's really easy to build a website. There are plenty of information and tips on how to create a website by yourself. Patience and hard-working will help you to figure ot out, good luck!

@Raj_SharmaApr 19.2017 — #Yes, you can add a skip button to redirect user from video to the web content. There are a lot of learning websites like w3c schools, solo learn , and tutorials point where can get ideas for adding skip button to your video

@abimaelyahudahauthorApr 20.2017 — #Thanks for the info. I have been checking it out as well. It's pretty decent.

@abimaelyahudahauthorApr 20.2017 — #Yes, you can add a skip button to redirect user from video to the web content. There are a lot of learning websites like w3c schools, solo learn , and tutorials point where can get ideas for adding skip button to your video[/QUOTE]

Ok. Thanks Raj Sharma. All the advice has been helpful.

@abimaelyahudahauthorApr 20.2017 — #It's really easy to build a website. There are plenty of information and tips on how to create a website by yourself. Patience and hard-working will help you to figure ot out, good luck![/QUOTE]

Thanks Miril. Doing the hard work now, but still working on the patience part.

@foxprodesignsApr 27.2017 — #Hello,

How are you today? Well, best beginner guide book is w3c school. It is very easy and get sample code for learning. Happy learning.

?

@QucoApr 27.2017 — #Many thanks?

@ross03May 15.2017 — #Here are some list of cousre you can follow:

[url=https://magento.com/]Magento[/url]

Codecademy

Udemy

[url=https://www.magestore.com/magento-extensions.html]Magento Plugins[/url]|[url=https://www.magestore.com/magento-2-extensions.html]Magento 2 Plugins[/url]

Also in #HTML _↴

Good free WYSIWYG editor for use in SaaS product?How to put a menu at the left side in a div with a video?Stopping a sound from playing when window minimised

Success!

Help @abimaelyahudah spread the word by sharing this article on Twitter...

Tweet This

learning how to make a website.

19 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

learning how to make a website.

19 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #HTML _↴