Skip to main content

Creating a Landing Web Page using HTML, CSS and JavaScript

Prerequisites:

1. A text editor. You can use any text editor such as Notepad, VS Code, Sublime Text, Atom, Brackets, etc. As a beginner start using simple text editors like Notepad (Windows), Text Edit(Mac) or Gedit (Linux).

2. A modern browser, compatible of HTML5, JavaScript5 and CSS3. I would recommend you to use latest version of Chrome or Firefox.

Getting started:

You can learn HTML, CSS, JavaScript, SQL, PHP, jQuery, XML, Bootstrap etc. from the w3schools website.

What is HTML?

  • HTML is the standard markup language for creating Web pages.
  • HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages i.e. <div>, <p>, etc.
  • HTML elements are represented by tags i.e <>
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page
  • HTML file has an extension of '.html' or '.htm'

What is CSS?

  • CSS stands for Cascading Style Sheets.
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files.
  • CSS file has an extension of '.css'
What is JavaScript?
  • JavaScript is the programming language of HTML and the Web.
  • JavaScript can change the content of an HTML element.
  • JavaScript is one the most important languages of Web Development.
  • JavaScript is a bit harder than HTML and CSS.
  • JavaScript and Java are completely different languages, both in concept and design.
  • JavaScript file has an extension of '.js'

Creating a Landing Web page:

Creating a web page is very easy and we are going to create a basic web page with only HTML, CSS and JS, we are not using other web development languages.
Landing Page


Conclusion:

This project is hosted on codepen.io. A simple but efficient landing page that tells you how much time left to completion of the website. 

Work for you:

  1.  Change the 'Logo' text at the top left to an icon of your site.
  2.  Change the 'background-color' to an 'background-image'.
  3.  Insert some text at the bottom left corner of the page.
  4.  Change the JavaScript code to the time of completion of you website i.e. change the parameter value of (Mar 31, 2018) to something else.
Labels:

Comments

Post a Comment

Popular posts from this blog

Creating a Web Browser With Integrated Chromium using C#

Final Output Introduction: In this post, we shall start a project to build a C# application integrated with Chromium in Visual Studio. I shall be using Visual Studio Express For Windows Desktop 2013. But the minimum requirements are mentioned below. We shall create a Windows Forms C# project from scratch and integrate Chromium Embedded Framework (CEF) in our application, basic navigation options and much more. Minimum Requirements and Prerequisites: Visual Studio 2012 or Higher that supports NuGet Package Manager. A decent internet connection. Basic Knowledge of C#. Knowlege in using Windows efficiently. Creating A Visual Studio Project: First, create a Visual Studio C# Project through File > New Project > Installed > Visual C# > Windows > Windows Forms . Name the file whatever you want, for example ' Web Browser '. New Project Customising the Form: Now customize the main form by changing its  Properties  like Text to 'Web...
7 comments
Read more

Complete Guide to Downloading and Installing Windows 10 Using ISO or Media Creation Tool

Source: Softonic Note: This article is for Windows users only. If you want an article on Installing Windows 10 from Linux, comment in the comment section below. Minimum Requirements: Processor : 1 gigahertz (GHz) or faster. RAM : 1 GB (32-bit) or 2 GB (64-bit) Free hard disk space : 16 GB. Graphics card : Microsoft DirectX 9 graphics device with WDDM driver. A Microsoft account and Internet access .( ISO File Size : About 3.5 GB and Upgrade File Size : No Info) Recommended Requirements: Processor : 2 GHz or faster. RAM : 4 GB or higher (32-bit or 64-bit). Free Hard Disk Space : 20 GB. Graphics Card:  Microsoft DirectX 10. Stable Internet Connection and about 1024 bits/second, and also around 5 GB of internet package from the ISP. Note: Recommended requirements are not necessary to run Windows 10. But if you have those, you can run your Windows efficiently. How to check your system requirements for Windows 10? If you do not kn...
7 comments
Read more

Creating a Login Form Using Bootstrap and HTML - Front End

Login Form UI Introduction: In this post, you will get an idea how to create a Login User Interface with the help of a popular Front End Web Framework named Bootstrap. Steps: Open up a text editor and save the file with extension '.html'. Type it out with the basic HTML code. Add Bootstrap CDN between the opening and close <head> tags. You can get the Bootstrap from the Bootstrap website here . It will be somewhat like the snippet below. Now add some custom styles just before the closing head tag. We are using -webkit-linear-gradient for chrome only, you can add -moz-linear-gradient and include the same color parameters to it. Let's come to <body> tag and edit it.  First creating a card using bootstrap class called 'card'. Go to Bootstrap's website documentation for further details. Then refer to the code as follows: We are done and the final code will be look like this: Conclusion: We have created th...
Post a Comment
Read more