ssssssdforgotpass
Member
- Feb 22, 2018
- 30
- 10
Okay so this tutorial is made for all of you out there who want to "get gud" at front-end web design.
For this tutorial we will not be including information on how to code the back-end of a website.
Back-end - The back-end of a website usually refers to a website using things such as PHP, database functionality (mySQL, mySQLi or PDO) among other things. If you only create website front-ends you are usually referred to as a "Designer" if you do back-end work you may be referred to as a "Developer" and if you do both this is commonly known as a "Stack Developer".
Framework - A framework usually refers to a set of components that have been thrown together into a package and then used by people to create websites with ease and simplicity. These are fantastic for a learner because ultimately you can get to understand how simple web design can be without implementing these components yourself, and at the same time you can modify and edit the existing code to understand how you can create your own unique things.
CSS - CSS stands for Cascading Style Sheet. These CSS files will normally always use the extension of ".CSS". This extension identifies the file as containing CSS which will be used to style the HTML markup which is on your page. CSS sheets will sometimes use the name of ".min.css" this is simply a personal choice and means that the contents of that file have been "Minified" which is done usually for speed as all the excess "white-space" and characters are removed, but occasionally CSS is minified because it makes it harder to edit if it were to be copied or stolen from a website although there is really no reason to worry about this.
HTML - HTML stands for "Hyper Text Markup Language" and is used to tell the browser how it will display components on the web-page and how they will be shown and layed out. HTML is used in conjunction with CSS which then styles the elements which is how websites have different appearances and looks. HTML files will often use the extension ".html" or ".htm".
Javascript - Javascript of "JS" is a scripting language that allows web-pages to become "dynamic". JavaScript can be used for many advanced things or simple things such as drop down menus in navigation bars or to change a colour of an element when it is hovered over. We won't go to much into detail on this language but it is worth learning if you are serious about web design even though most things can now be done in CSS alone with the introduction of things such as CSS Transitions. JS files use the extension ".js".
Note: There is more we could go into such as CSS prepocessors and things such as coffee script but for this tutorial we are keeping it simple.
There are many different softwares and IDE's (Integrated Development Environments) out there that can make your life easier as you code but for this tutorial we are keeping it simple and i would suggest either of the following as good basic software's to kick start your coding experience.
Next save your file as a .html file to a location of your choice.
So i know what your thinking, you want to know what all of this does?
Inline CSS is used within a tag to style it specifically, for instance. <p style="color:green;"> Hey </p>. The text within this paragraph tag which we learn't about earlier would be the color green.
External CSS sheet/sheets would be linked into your document with the line <link rel="stylesheet" type="text/css" href="/css/styles.css"/>
Now the href tag can be any path or directory that contains your css sheet you wish to use. In order to create the CSS sheet you would need to create a new file name it whatever you want and then make sure to use the extension .css for this example we are using "styles.css".
Embedded CSS which is put into your webpage using the tags <style> and </style> this is what we will be using for this example due to ease of use.
So moving foward within your HTML file we created earlier place a set of <style> tags within your head tags. You should end up with something like this.
Within these style tags we are going to place the code: p{color:red;} save the file and then navigate to our .HTML file and open it in our web browser, you should now see that the text we created earlier is a red color.
Now you will notice that it may be a different type of red to what you wanted and that is because you are just using the color "red" this is the default or standard color that your browser interprets to be red and is displayed on your monitor however your monitor interprets it, some monitors have more accurate color such as Adobe or SRGB Colour Accuracy.
Now i know this guide was very basic but that is because you cannot learn unless you practice practice and practice.
For that reason i am going to set a few little tasks for you to try figure out how to do yourself.
Happy Coding and thanks for reading!
For this tutorial we will not be including information on how to code the back-end of a website.
Terminology Dictionary
Front-end - The design and layout of the website incorporating languages such as HTML, CSS, and on a more advanced level, jQuery or Javascript perhaps even AJAX.Back-end - The back-end of a website usually refers to a website using things such as PHP, database functionality (mySQL, mySQLi or PDO) among other things. If you only create website front-ends you are usually referred to as a "Designer" if you do back-end work you may be referred to as a "Developer" and if you do both this is commonly known as a "Stack Developer".
Framework - A framework usually refers to a set of components that have been thrown together into a package and then used by people to create websites with ease and simplicity. These are fantastic for a learner because ultimately you can get to understand how simple web design can be without implementing these components yourself, and at the same time you can modify and edit the existing code to understand how you can create your own unique things.
CSS - CSS stands for Cascading Style Sheet. These CSS files will normally always use the extension of ".CSS". This extension identifies the file as containing CSS which will be used to style the HTML markup which is on your page. CSS sheets will sometimes use the name of ".min.css" this is simply a personal choice and means that the contents of that file have been "Minified" which is done usually for speed as all the excess "white-space" and characters are removed, but occasionally CSS is minified because it makes it harder to edit if it were to be copied or stolen from a website although there is really no reason to worry about this.
HTML - HTML stands for "Hyper Text Markup Language" and is used to tell the browser how it will display components on the web-page and how they will be shown and layed out. HTML is used in conjunction with CSS which then styles the elements which is how websites have different appearances and looks. HTML files will often use the extension ".html" or ".htm".
Javascript - Javascript of "JS" is a scripting language that allows web-pages to become "dynamic". JavaScript can be used for many advanced things or simple things such as drop down menus in navigation bars or to change a colour of an element when it is hovered over. We won't go to much into detail on this language but it is worth learning if you are serious about web design even though most things can now be done in CSS alone with the introduction of things such as CSS Transitions. JS files use the extension ".js".
Note: There is more we could go into such as CSS prepocessors and things such as coffee script but for this tutorial we are keeping it simple.
Setting Up
You have got some basic knowledge of various components and terminology of the web now it's time to setup your workstation.There are many different softwares and IDE's (Integrated Development Environments) out there that can make your life easier as you code but for this tutorial we are keeping it simple and i would suggest either of the following as good basic software's to kick start your coding experience.
-
You must be registered for see linksNot much to say about this peice of software, well known, simple, basic and free - what more can you want, perfect for a beginner.
-
You must be registered for see linksA fantastic peice of software for when you are learning with many great features and it's also free like notepad++ which makes it a good alternative for those wanting something a little bit more advanced than notepad++ but still flexible. Brackets is made by Adobe also.
- WAMP or XAMPP webserver is recommended for when you want to upgrade from just running files from your C://Users/ path or wherever your website is located. XAMPP is free and will allow you to code PHP and also provides a lot of great features and includes mySQL also for when you get into databases (Hopefully)! But for this tutorial we will not be covering it.
Creating your first page
So it's finally time to create your first page after the long wait. So first your going to want to open up notepad++ and paste the following lines into your file:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p> Hello World, this is my first page! </p>
</body>
</html>Next save your file as a .html file to a location of your choice.
So i know what your thinking, you want to know what all of this does?
1. First we start by declaring the document as a HTML file, we are using the latest HTML5 version in this case. (Remember that neat code is good code and you should always use the correct capitalization, "!DOCTYPE html" not "!doctype HTML" or "!doctype html".
2. Next we open our page with a HTML tag.
3. We then open our first head tag which is where all the important things go which we want to ensure are loaded into the document first. In this case we are using the title tag to display the title of the page which is what will show in the tab at the top of your browser, on top of this if your website were to be online google will show the page title on there results with the content from your title tag so ensure it is relevant to your website! Always remember to close your tags <title> is closed with </title> and <head> is closed with </head>.
4. We open the body tag which is where all your website content is going to go when we create the website. Within this tag you see the line "<p> Hello World, this is my first page! </p>. The p is a HTML tag, it means paragraph, by using this tag we are saying that the text within the p tag is a paragraph of text and is to be displayed as such.
5. Finally we close the rest of the tags off to keep it all neat, tidy and compliant.
2. Next we open our page with a HTML tag.
3. We then open our first head tag which is where all the important things go which we want to ensure are loaded into the document first. In this case we are using the title tag to display the title of the page which is what will show in the tab at the top of your browser, on top of this if your website were to be online google will show the page title on there results with the content from your title tag so ensure it is relevant to your website! Always remember to close your tags <title> is closed with </title> and <head> is closed with </head>.
4. We open the body tag which is where all your website content is going to go when we create the website. Within this tag you see the line "<p> Hello World, this is my first page! </p>. The p is a HTML tag, it means paragraph, by using this tag we are saying that the text within the p tag is a paragraph of text and is to be displayed as such.
5. Finally we close the rest of the tags off to keep it all neat, tidy and compliant.
Styling your tag
Now there is 3 types of CSS we can use to style this p tag which we have created.- Inline CSS
- External CSS Sheet
- Embedded CSS
Inline CSS is used within a tag to style it specifically, for instance. <p style="color:green;"> Hey </p>. The text within this paragraph tag which we learn't about earlier would be the color green.
External CSS sheet/sheets would be linked into your document with the line <link rel="stylesheet" type="text/css" href="/css/styles.css"/>
Now the href tag can be any path or directory that contains your css sheet you wish to use. In order to create the CSS sheet you would need to create a new file name it whatever you want and then make sure to use the extension .css for this example we are using "styles.css".
Embedded CSS which is put into your webpage using the tags <style> and </style> this is what we will be using for this example due to ease of use.
So moving foward within your HTML file we created earlier place a set of <style> tags within your head tags. You should end up with something like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
</style>
<body>
<p> Hello World, this is my first page! </p>
</body>
</html>Within these style tags we are going to place the code: p{color:red;} save the file and then navigate to our .HTML file and open it in our web browser, you should now see that the text we created earlier is a red color.
Now you will notice that it may be a different type of red to what you wanted and that is because you are just using the color "red" this is the default or standard color that your browser interprets to be red and is displayed on your monitor however your monitor interprets it, some monitors have more accurate color such as Adobe or SRGB Colour Accuracy.
Now i know this guide was very basic but that is because you cannot learn unless you practice practice and practice.
For that reason i am going to set a few little tasks for you to try figure out how to do yourself.
- Change the font size of your paragraph text to 50px and make it so it is bold and underlined.
- Change the background color of your website to a light grey.
- Add an image of your choice to your web page.
- Display all 6 headers, <h1> through to <h6> on your web-page.
- Try using all 3 types of CSS usage within your document.
Happy Coding and thanks for reading!
