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

How to start programming with JavaScript? Get Started with JavaScript!

Introduction: JavaScript is of-course a programming language. It can be called the 'programming language of the web' as it is one of the core three technologies for Web Development (other than HTML and CSS ). Before you start programming with JavaScript, you have to know what JavaScript is. See also: Basics of Programming Languages and Introduction to Front End Development . Requirements for this blog post: Minimum knowledge of programming terms: Intermediate . Minimum knowledge of JavaScript: None/Beginner . Some JavaScript Characteristics: JavaScript is a high-level , interpreted , dynamic and weakly-typed programming language. It is an object-oriented language like many high-level programming languages. It is a functional language , here function is considered to be an object. The term Vanilla JavaScipt is often used to refer JavaScript with any external frameworks or libraries. Best Free Resources to get started with JavaScript: After searchi...
1 comment
Read more

Complete Guide to install Firebase CLI (Command Line Interface)

Source: firebase.google.com Introduction: Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. It is one of the most popular platforms nowadays for developing Android applications. It is quite easy to, use with documentation for reference included on its website along with examples.  Firebase requires a browser to interact with. But, for advanced application development, it has a Command Line Interface (CLI) called Firebase CLI. It can be installed on your system, and then have to be used with your system's command line tool, such as Command Prompt in Windows, and Terminal in Linux and Mac. Installing in Windows: To install Firebase CLI, just follow the steps below: You must have installed Node.js and npm on your Windows system. To install refer the video below: Then type the following in your Command Prompt to install Firebase CLI: npm install -g firebase-tools That is it. You a...
Post a Comment
Read more