Learning to Code

Front-End Web Development Basics

What is Front-End?

Essentially, it's all the bits of a website that the user (you or me) can see, or interact with, when viewing a webpage. There are made up of 3 cores ingredients when building the front-end of webpages:

HTML

Hyper Text Markup Language

This is the content of the webpage. This includes text, images, videos, and so on.

HTML is written as a series of tags.

< h1 class="class-name" > Hello, world! < /h1>

CSS

Cascanding Style Sheets

As the name suggests, this is the style of the webpage. Think prettification - colours, borders, backgrounds, layout, spacing, the list is endless.

Usually CSS goes in another file, but CodePen has nicely set this file up for you (in the middle box).

CSS is written as properties and values:

tag/.className/#idName { property: value; }

Example: h1 { color: red; }

JavaScript

For interactivity - the magic ingredient for exciting websites.

A bit more complicated than HTML and CSS. Requires variables, functions, logic and an understanding of how webpages work (sometimes referred to as the Document Object Model or DOM).

Like CSS, Javascript usually goes in another file, but CodePen has nicely set this file up for you (in the right box).

Luckily for us, some wonderful people have already built a lot of libraries using JavaScript. This means we can use JavaScript with less effort and less lines of code. Popular ones are jQuery, Angular and React.

HTML Basics

Headings: there are 6 sizes of headings. Using the h1 to h6 tags

Heading

Heading

Heading

Heading

Heading
Heading

Paragraphs: these are used to define chunks of text (they add a line break before and after the text). This is a paragraph!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel massa auctor, congue mi et, faucibus arcu. Nullam condimentum sapien at ligula bibendum pellentesque nec eu quam. Sed ex turpis, iaculis ac euismod vitae, scelerisque non orci. Nulla rhoncus vitae diam vitae eleifend. Aliquam odio nisi, malesuada vitae ante et, iaculis posuere est. Vestibulum gravida, sem lacinia egestas tristique, quam velit bibendum leo, eu porta elit libero a erat. Nam at fermentum eros. Etiam ex neque, tempor ut lectus nec, imperdiet porttitor mi.

Donec in nisi elementum, porta lectus sit amet, auctor augue. Etiam consequat sem sed mi interdum, eget mollis sapien rutrum. Nulla tincidunt consectetur sapien, venenatis ullamcorper nisi venenatis id. Integer lacinia velit ut erat posuere luctus. Integer rhoncus porta ligula eu interdum. Nullam ornare erat et ante sagittis, ac ornare augue finibus. Fusce in euismod nunc. Sed pellentesque, mauris eu vehicula laoreet, nulla ligula gravida turpis, vel dictum lorem nisl ac urna. Nunc condimentum blandit urna, eget semper risus. Nulla facilisi. Vestibulum ac ligula id nulla porttitor consequat ut sed eros. Aliquam scelerisque tempor erat, quis interdum justo pretium in. Ut fermentum molestie ligula, at blandit nulla scelerisque quis. In vitae augue dolor. In scelerisque lacus pulvinar velit interdum ornare.

Images: can be added to websites in multiple ways. The easiest way on CodePen is to click on "Assets" at the button and use their images. Or find an image you link on the internet and copy the link. This is then added to the "src" attribute of the HTML tag. It's important to include something descriptive in the "alt" attribute as this is what will be displayed/read aloud for those unable to view the image (slow connections, unable to find image or using a screen reader). Image tags are self-closing, meaning they don't need a closing tag. For example:

picture of wild flowers

Anchors: these can be thought of like hyperlinks - they "anchor" to another website, another page of your website or to another part of the same page.

This one links to Google.

They can also be added to images: very cute kitten being held

Another HTML tag which can be useful for anchors is buttons:

target="_blank" must be used in CodePen. It means the link is opened in a new tab.

Modern browsers (like Google Chrome) automatically format anchors as blue and underlined. This can be overwritten in the CSS.

Bullet points:

Unordered List

Laura's Favourite Cheeses:

  • Halloumi
  • Brie
  • Blue Stilton
  • Smoked Cheddar

Ordered List

Laura's Top Board Games:

  1. Chess
  2. Scrabble
  3. Articulate

Tables:

Position Artist Song
1 Calvin Harris & Dua Lipa One Kiss
2 Drake Nice For What
3 Ariana Grande No Tears Left To Cry
4 Lil Dicky Freaky Friday (feat. Chris Brown)
5 Anne-Marie 2002

CSS Basics

Examples of all of these (and some others) can be found in the middle CSS box. There are a lot more CSS commands which can be used. I suggest looking on W3C Schools to find different ones and the different properties they can take.

Colours - (always spelt color) can be described as words (red), hex (#ff0000), rgb (rgb(255, 0, 0))

Font - colour, family, size, weight

Background - colour, images

Width and height - these can be used to set the size of divs and images. For images, one can be set to auto so that the image scales correctly. Usually described using pixels (px), but can also be percent (%).

Align - text-align used for text. center, right, left. Images require a bit more work (see the example of the image in the HTML section - the size is described as a percent, display is set to block and the left and right margins are set to auto).

Display - used to specifiy where the content will be displayed. Example, inline-block means the content will be displayed side by side.

Border - can be described using color, size (in pixels), type (solid, dashed).

Margin - the space around the edge of the content and other content. This is the area outside the border. Can be specified for top, bottom, left and right.

Padding - the space around the edge of the content and other content. This is inside the border of the HTML element. Can be specified for top, bottom, left and right.

Example to the right has a margin of 10px (shown by the big dashed line) and a padding of 10px (shown by the solid line):

margin
padding
element

Advanced HTML

Often, we need to use a few extra HTML tags to help break up or identify our content.

Divs and Spans

  • Divs - stands for division. This is used to split your content into sections, and are very useful for apply CSS and JavaScript.
  • Spans - used to apply CSS and JavaScript to specific content, for example one word in the middle of a sentence.

Divs, paragraphs and headings are example of block-level HTML tags. However, spans are inline - meaning a blank line is not taken before and after.

Note: CSS can be added to divs to ensure they don't take new lines (see the example of the HTML, CSS and JavaScript boxes in a row).

Classes and IDs

What happens if we want to apply CSS to just one h3 tags? We can use special tags called classes and IDs to identify which tag (or group of tags) you are specifically talking about.

  • Classes - used to describe a group of HTML tags you wish to apply the same CSS or JavaScript to. Applied by adding "class=className" inside the opening HTML tag. Referred to in the CSS by using ".className" rather than the HTML tag.
  • IDs - used to describe ONE HTML tag - only one with each ID name. Applied by adding "id=idName" inside the opening HTML tag. Referred to in the CSS by using "#idName" rather than the HTML tag.

HTML tags can have both IDs and classes. They can also have multiple classes. For example, < div class="oneClass twoClass" id="specialID"> < / div>

Class and ID names cannot begin with a number, have spaces or special characters. They can include hypens. Naming conventions include camelCase and snake-case.

JavaScript

Click the button on the right, for a very simple example. All the code for is is in the right box, in a function called signEstimate. This does some calculations and changes the HTML on the website (interactivity!)

A function is a bit of code that you reuse over and over again. You could build a function to multiply two numbers easily.

Sometimes you won't know which numbers you want to multiple, so we might make a function to multiple x and y. In this case, x and y are called variables (because they can vary in value)

In JavaScript, you can reference HTML elements by their ID or class name (see the example in the left box document.getElementById("prettySign")) This accesses the HTML element with the ID name "prettySign".

JavaScript is case-sensitive!

Create your own sign!

£5 per letter for signs less than 10 letters

£3.50 per letter for signs greater than 10 letters

Shipping is £7

Enter your desired text: