Welcome to NavTech Solution, where everybody loves web design! In this series, we will learn all about designing and building a website
These lessons (or tutorials) will give you a step by step guide for bringing a website to life.
How Does Web Work?
When two computers are connected to the Internet (which is shown as a yellow line in the picture below) they can talk to each other.
A server (the black box) is a special computer that contains web page files. Your computer at home or school is not a server, because it is not connected directly to the Internet. We can connect to the Internet through an Internet Service Provider (ISP).
A site’s content (all that stuff a website talks about) is organized within a special set of rules that computers understand; sort of like speaking in a secret, coded language.
In this picture, the browser is asking to view www.navtechsolution.in from the server where the site’s files live. The server is sending the files back and the browser is translating them to display a page on the screen. And this happens very quickly!
It’s all about communication and sharing information.
Because of all this, a site you write locally (on your computer) can’t be seen by other people on a different computer, until you move the files to a server. We’ll look at this properly later on
A Web Designer’s Job
A web designer’s job is very important. A web designer’s job is to decide how this website looks and works, and even other things, like making sure the website is usable to disabled visitors (in the same way you are a visitor to Navtech Solution right now).
Our Project
This website will include all the web design points we will be learning about. It will be a really neat and simple web design project for you!
Sketching and Building
First, we will Sketch-up our site and then include what we want to have on the page in a special file. We will also add links here for the visitors to be taken to other places, such as the shop websites.
Styling
After we Sketch-up and write the special file for our website we will need to make it look good. This is the section where all our colors and layout ideas (deciding where all this stuff will live on the screen) will come to life.
How can we make our site easy to use? What feel do we want our colors to give? Where should everything be placed on a smartphone screen? What about a full computer screen? What font will look best? These are all things we will have to think about but don’t worry, it’s a really fun process and these questions will come to you naturally the more websites you design.
Series Map
Below is a completed roadmap for the web application. we will be taking to create our website. Each block has an introduction to the topic and is then broken down into smaller pieces.
Introduction
You can see by the pink star that we’re reading the Intro at the moment. We now have a basic idea of how the web works, a web designer’s job, and have taken a peek at the project we will be designing and building together.
Building a Website
we think up ideas and start sketching. Sketching is a really fun way to gather your thoughts on a design before you start coding. It can be a must time saver and help keep us on track. We will then talk about files and the tools we need to get started with the coding part of our website.
HTML
HyperText Markup Language (HTML) is that secret (but not for long!) language used to organize the text file that we spoke briefly about earlier. This language helps our browsers to understand and display the website files.
Elements are bits of this language that have meaning and help describe everything we place on the page.
CSS Cascading Stylesheets
Cascading Stylesheets, allow us to set the styling (colors, fonts, overall feel) for our website, making it as attractive and as easy to use for its visitors as possible.
CSS Layout
Cascading Stylesheets, (CSS) can also help us lay all our pieces out on the page.
Images
There will be four pretty images added, what do you think of them?
Design Basics
In this part, we will look at the “building blocks” of web design. We want to make sure we make something that people will use, and can use easily, as well as making sure it looks nice.
Typography
Typography is the art of arranging type and a great follow-up to our new design lesson, as it can greatly add to or take away from the success of our website. The first example of typography on our site can be found at the very top:
Color
Color is very important and great fun. Color can make a site pretty, as well as have meaning, which we will talk all about here. End of the Series
