You can create your own unique and distinctive website by knowing the main languages of the web and the basics of a website.
Otherwise, it is recommended that you jump to method # 2/3; Or, contact a web developer.
- Basic languages / web tools you should know:
- HTML (Hyper Text Markup Language)
- HTML is the basic structure of web pages and web applications that make content semantic to the web browser. It consists of sequential tags that have an opening and a closing, and structurally a keyword enclosed in angle brackets. Example:
- CSS (cascading style sheets)
- CSS is the style language used to decorate the HTML markup of a web page. Without CSS, a web page would look like nothing more than a large blank page with messy text and image. CSS is what makes the page ideal as we want.
- Scripting languages
- To store, manage and access the user input data of a website, it is considered a large table of information called a database. A database management system like MySQL, MongoDB, and PostgreSQL is used on the server side to do this job efficiently.
- FTP (File Transfer Protocol)
- FTP is used to transfer source files from a website to your hosted server more easily. There are web-based clients and FTP-based software that can be used to upload the files to the server computer.
- Step-by-step process of creating websites using IDE
- This is the process overview of how you can create a website first hand, assuming you know the basic web languages and essential elements of the website mentioned above.
Step 1: set up a local work environment
Making a site with Subline Text
Screenshot of Subline Text working environment.
To create and organize the source files of a website, a good local working environment is important. You can create a web development environment on your computer device by installing an IDE (Integrated Development Environment). An IDE basically consists of a text editor, a build automation, and a debugger.
Sublime text and atom are some of the basic IDEs for web development compatible with HTML, CSS, JS, PHP, Python and similar web languages.
On the other hand, there are extended IDEs like Adobe Dreamweaver that offers a handful of other features (eg: Server connectivity, FTP).
Step 2: plan and design your website using Adobe Photoshop
The planning of the website structure and the navigation system are of great importance. First, you must understand how you want to deliver your content. Plan how many navigation menus, how many columns or content fields, how many images you want to include and where.
The best practice is to open Adobe Photoshop and create a rough sketch of your web pages. You may have to make different settings for different pages, for example home page, above page, contact page, service page etc.
Design mockup that we use when creating this website.
Examples: design mockups we made when during the site renovation in December 2016.
Step 3: Code the Design using HTML and CSS
Once you have finished making rough designs for your web pages in Adobe Photoshop, you can start writing the source codes.
This is the easiest part. Make HTML marks for the web parts you want to include and use CSS to decorate them according to the designs you made.
Only HTML and CSS based websites do not currently exist because front-end user interactions cannot be controlled through HTML or CSS.
Step 5: upload local files to the server using an FTP client
FTP software for creating sites.
The last step is to upload all source files to the web server. The best and easiest way to manage it is through an FTP client.
First, download an FTP client to your computer device and connect it to your web server using an FTP account. After you have successfully connected it to the FTP account, copy all your local files to the root of your web directory. Some good FTP clients are FileZilla, WinSCP and Cyberduck.