Recently I finished my first website, and previously I had no web development knowledge. As in case with most CS related work, internet has been my closest companion. In this repository I compiled some of the useful resources I found online. Keep in mind that there will be a lot of 'googling' to do along the way.
More specifically, this repository is a collection of resources such as HTML, CSS (Bootstrap), PHP, MySQL, JavaScript. I will also provide some resources on how to publish website using Amazon AWS and NameCheap.
Before you begin, familiarize yourself with what LAMP vs MEAN stacks are. This article was very helpful and can be a good starting point. In this article I will talk only about LAMP (Linux, Apache, MySQL and PHP)
HTML is a markup language used to create websites. Personally, I use W3Schools to quickly look up syntax or as a reference guide. Tutorials at W3School have both examples and editor where you can try them out.
- MDN web docs are HTML references provided by Mozilla
- Can I use __ ? is a website where you can check whether certain browser supports CSS and HTML elements.
- More comprehensive HTML and CSS handbook can be found here. I personally found it to be a bit hard to use and navigate around.
- Unlike scripting languages, where if you get syntax error nothing runs, markup languages will run regardless whether or not you made a mistake in your document. There is a website where you can check the markup validity of HTML, XHTML, etc.
- If you need to use certain characters like '&' or '§', you will need to mark them based on certain protocol. Wikipedia page provides character entity references.
HTML is markup language, and Cascading Style Sheet is a stylesheet language. CSS is used to present HTML in a more marketable and appealing way. Consider it this way, if HTML is a skeleton of the website, CSS is outer appearence of the web page.
- CSS Tricks is a website where you can find CSS reference guidebook, videos that show you how to do certain 'tricks', and even has gallery where you can browse for some ideas.
- MDN Web Docs by Mozilla also has tutorial on how to use CSS
There are many different front-end frameworks. Some examples are Base, Foundation, PureCSS and Boostrap
What is Boostrap?
It is a front-end framework used for web development. As I said previously, If HTML is a skeleton of the website, CSS is outer appearence, and Bootstrap is a tool used to make outer appearence easier. When I just started with Boostrap, I watched this youtube tutorial which was helpful.
Bootstrap
- Bootstrap framework is easy to use, it well documented and there are tons of resources online that can help you with most things
- Also, on their website you can find a lot of examples with source code
Navigation Bar Perhaps first thing you would want on your website is navigation bar. On the Boostrap website you can find many different versions that suit your purpose.
Carousel is a cool feature that is easy to implement on your front page. Here are some of the tutorials that were helpful:
Scroll Spy allows to update links in the navigation bar based on your location
Some of the free resources you can use online:
- Icons from W3School
- In IconFinder you can find both free and 'premium' icons
- Free high quality images can be found in Unsplash. Just make sure you give credit to photographer
- Boostrap also has glyphicons you can use, which are easy to implement on your website. Example of how to use them can be found in W3Schools.
- If you want to use database in your webpage, you will have to use scripting language. It could be JavaScript (which is very popular now), PHP or some other scripting language of your preference.
- As in any language, you will have to learn syntax first. I found W3School tutorials very helpful. In general, W3Schools provides good explanation and always gives an example.
- Note: Suppose you are working on your index.html page. If you want to use php in your index.html page, you have to rename your index.html page to index.php. The PHP code will not work if you keep index.html name.
If you are using PHP, chances that need forms on your website are pretty high. Normally, every page has only 1 form and 1 submit button.
-
What if you need more than 1 submit button in 1 form. For example, 1 submit button is responsible for 'saving' and 2nd button is responsible for 'clearing' the input field. Following StackOverflow was very helpful to solve above mentioned problem. In addition, read this thread that discusses similar problem.
-
What if you need to have more than 1 forms in one webpage? Solution is to give different 'id' to the forms. You can find more in this forum
-
In the HTML and HTTP, every webpage is treated separately. In other words, information on the previous page will not be related to the next page. However, if you need to pass variables from one page to another, you can use 3 methods: Session, Cookie, Get/Post. More can be found in this StackOverflow page.
Trick You can also create HTML form and make it invisible on the webpage. But when user presses . Example, suppose you have 3 webpages: Page1, Page2, Page3. And you need to transfer information from Page1 to Page3. Additionally, you have separate HTML forms on Page1 and on Page2. In other words, information from Page1 is used in Page2 and subsequently in Page3. In this case, you will have form on Page1, and Page2. The trick is that in Page2 you will have invisible 'inputs' that will have values from the Page1. So, when user will click on Submit button on Page2, she/he will transfer information from the Page1 and Page2 to Page3
- Install MySQL on your Mac. This youtube video shows how to install MySQL and set it up on your Mac.
- Make sure MySQL is running on your Mac. In other words, go to Systems Preferences and at the bottom you should see MySQL icon. Click on it and make sure it says "Running" in green letters.
- This article summarizes most of the MySQL commands, and can be used as a reference in case you forget a command.
- W3School also provides some tutorials on how to use MySQL with PHP
- If you are new to MySQL and want easy user interface, MySQL Workbench is user friendly GUI.
- You can also log in to your MySQL through terminal
-
In the terminal prompt type:
mysql -u root -pThe systems will ask for your password
-
Once logged in, you can use commands provided in this post.
-
- Note (most of you probably won't need): When I wrote my website, I needed to use cyrillic language (i.e. Russian) within my MySQL Database. Turns out MySQL has weird UTF-8 configuration. As a result, if you want to use Russian language in your database, you will need to slightly modify your mysql code.
- Here is a good post that helped me. Also, don't forget to restart MySQL, because only then changes will take effect.
There is a lot of trial and error involved in creating a website. Whether it is graphics or back-end, you need to constantly check if the code you wrote actually works. When you work with HTML, CSS and JavaScript only, opening .html file is sufficient to see if what you intended works. However If you want to see if the php and mysql code you wrote work correctly, simply opening .html file won't do anything. You will need local web server in order to test your code. Perhaps there are better frameworks that allow you to check your code, but I used my browser and XAMPP as my main workstation.
- Install XAMPP
- On your Mac, put your working directory (i.e. folder that contains your webpage) into XAMPP folder
- To access XAMPP folder, go to Applications/XAMPP/htdocs/yourFolder
- Now you can run the code from your browser and see if your php code is doing what you want.
- Note: Now, you must update html and php source codes in the ../htdocs/yourFolder . It is now your working directory.
Once you have installed MySQL and PHP on your local machine, you can access and connect to your database with the following PHP code
<body>
<?php
/*-------------- connect, check and use database: ----------- */
$conn = mysqli_connect("YourIPAddress","root", "YourPassword");
if (mysqli_connect_errno()) # ----------- check connection error
{
printf("Error Connect failed %s\n", mysqli_connect_error());
exit(1);
}
if ( ! mysqli_select_db($conn, "YourDatabase") ) # Select DB
{
printf("Error: %s\n", mysqli_error($conn));
exit(1);
}
?>
</body>
To check if connection was successful, open source code located in the XAMPP/htdocs/yourFolder directory. Open your source code in the web browser and observe if there are any printf statements that begin with "Error"
If connection was successful, you can request queries from your database.
<?php
$query = 'select * from tempTable1, tempTable2 where tempTable.ID1 = tempTable.ID2;';
if ( ! ( $result = mysqli_query($conn, $query)))
{
printf("Error: %s\n", mysqli_error($conn));
exit(1);
}
?>
-
Buy Domain Name
1.1. There are ton of websites where you can choose and buy domain name. Some of them are: GoDaddy, Google Domains, or NameCheap. Note that this reference manual assumes you will buy domain from NameCheap.
-
Connect your Domain with Amazon's AWS Linux Instance
2.1. Do you have Amazon's EC2 Instance? If you already have one set up, proceed to 2.2. However if you don't have EC2 instance set up, read on
2.1.1 First, create free Amazon AWS account
2.1.2. Create virtual machine. In other words, create EC2 Instance with parameters you need. Here is a guide provided by Amazon. When you create instance, the system will give you .pem file. That is your instance key. Make sure you save it in a safe place, because system doesn't save it anywhere.
2.1.3. Click on 'Launch Instance' from your AWS console.
2.1.4. You can connect to your EC2 instance from your local machine's terminal. In the command prompt type:
ssh -i NameOfYourKey.pem ubuntu@IPAddressNote that I set up my EC2 not as Linux, but as Ubuntu. Depending on how you set up your EC2, you will have different OS.
2.1.5. Once you connect through your terminal, now you need to install MySQL, PHP on your virtual machine. This tutorial explains how to install LAMP on your virtual machine.
2.1.6. In order to check if everything installed correctly, open your web browser and type
http://your_server_IP_address/info.phpIn this case, 'Server IP Address' corresponds to 'IPv4 Public IP' on your AWS Running Instances console
- AWS Running Instances console is: login to Amazon's AWS and select the EC2 from the main page. Click on the “Running Instances” link, which should be at the top of the webpage. You should see a list of all your EC2 instances. Scroll to the left and you should see IPv4 Public IP
2.2. Tutorial by Brian Carey is a comprehensive resource that will cover topics like Route 53, and will teach you how to connect Linux Instance with NameCheap. Again, note that I set up Ubuntu
-
Inside your virtual machine, place your working directory (i.e. folder that contains your website) to /var/www/html
-
Give it some time; don't expect your website to be running right away. When you publish website it may take up 24 hours (although, usually it varies from 30min-couple hours).
This repository is meant to be a collection of various resources and tutorials from online. I don't own any of these above mentioned websites and/or tutorials.