The basic foundations to UX and UI ( html,css and javascript) Edit

livestrong.csb2@gmail.com | 27 November 2020 | 166

Html, CSS, and Javascript

HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript are the languages that run the web. They're very closely related, but they're also designed for very specific tasks.

  • HTML is for adding meaning to raw content by marking it up.
  • CSS is for formatting that marked-up content.
  • JavaScript is for making that content and formatting interactive.
We can also say HTML as the abstract text and images behind a web page, CSS as the page that actually gets displayed, and JavaScript as the behaviors that can manipulate both HTML and CSS.

Let's Consider an example

consider a paragraph with this HTML:

This is a paragraph.

Then, you can set the size and color of that paragraph with some CSS:

p { font-size: 20px; color: blue; }

And if you want to add some functionality to the paragraph on a mouse click, then

var p = document.getElementById('some-paragraph');

p.addEventListener('click', function(event) {

p.innerHTML = 'You clicked it!';

});

As you can see, HTML, CSS, and JavaScript are totally different languages, but they all refer to one another in some way. Most websites rely on all three, but the appearance of every website is determined by HTML and CSS. Unfortunately, mastering HTML, CSS, and JavaScript is only a prerequisite for becoming a professional web developer. There are a bunch of other practical skills that you need to run a website, which is Organizing HTML into reusable templates Standing up a web server Moving files from your local computer to your web server Pointing a domain name at your server

Structure of a webpage

Add the following HTML markup to our basics.html file. This is what you'll start with for every single web page you'll ever produce.

First, we need to tell browsers that this is an HTML5 web page with the line. This is just a special string that browsers look for when they try to display our web page, and it always needs to look exactly like it does above. Then, our entire web page needs to be wrapped in tags. The actual text is called an “opening tag”, while is called a “closing tag”. Everything inside of these tags is considered part of the “element”, which is this ethereal thing that gets created when a web browser parses your HTML tags.

Inside of the element, we have two more elements called and . A web page's head contains all of its metadata, like the page title, any CSS stylesheets, and other things that are required to render the page but you don't necessarily want the user to see. The bulk of our HTML markup will live in the element, which represents the visible content of the page. Note that opening up our page in a web browser won't display anything, since it has an empty .