web design and development .pdf
Original filename: web design and development.pdf
Title: Microsoft Word - book.docx
This PDF 1.3 document has been generated by Word / Mac OS X 10.10.2 Quartz PDFContext, and has been sent on pdf-archive.com on 21/09/2016 at 19:22, from IP address 60.243.x.x.
The current document download page has been viewed 789 times.
File size: 1.2 MB (29 pages).
Privacy: public file
Download original PDF file
WEB DESIGN AND
A BEGINNER’S GUIDE
COMPILED BY AVANTIKA MEHRA
CONTRIBUTIONS FROM PROGRAMMING HUB
FOREWORD BY QUINCY LARSON
This guide is designed for anyone who wants
to learn to build websites and serves as an
introduction to code.
For those of you who know HTML and CSS, this
is a great revision.
And for those of you who don’t, welcome to
the world of the Web.
< > Foreword
Quincy Larson of Free Code Camp shares his thoughts!
< > Basics
If you haven’t spent a lot of time on a computer, some of the concepts can be
confusing. This will give you a quick review of some of the concepts and jargon (fancy
words) you may come across.
< > HTML
Learning HTML means learning a collection of tags < > , to define the content of your
< > CSS
CSS is a design language, used along with HTML, which allows you to add color,
layout and adjust the styles of your website.
< > Shortcuts & Resources
After you have a basic understanding of HTML and CSS, check out this section to
see what you can do with your new skills!
< > References
A list of the resources provided programmers, developers, designers and geniuses
around the world that contributed to this book.
Quincy founded Free Code Camp, an open source community of
500,000+ people who learn to code together and build projects for
Avantika has worked hard to help
children in Mumbai learn to code. And
now she's written this excellent
introduction to web development to
help even more children.
As someone who also helps people
learn to code myself (I run
FreeCodeCamp.com), I am a big fan of
Avantika's work. This book is a great
way to learn how to code.
Why should you learn how to code?
Because it's how you talk to computers
and tell them what to do. Computers
are our friends, but they don't know
what to do. They need a human to
guide them. That's what coding is -‐
guiding a computer.
You are only one human. You can only accomplish so much each day. But
with the help of computers, you can increase your power. You can use
computers to accomplish by yourself what it used to take 10 people to
Learning how to code is challenging. You will encounter problems in your
code. But be persistent. The basic skills Avantika covers in this book are
useful, and will remain useful for many years to come. Learn them well and
you will unlock great creative power, and the potential to accomplish many
things with the help of your new computer friends.
A short guide to get you up to speed with some basic
computer terminology and concepts
DID YOU KNOW
The first programmable modern computer, called the
Z1, was created by Konrad Zuse, a German engineer,
inventor and computer pioneer, in his parents’
living room between 1936 and 1938.
All files on computers are saved with extensions. These extensions determine in what application (eg:
Excel, Word, PowerPoint) the file will open. An extension is a dot (.) followed by a short code. For
example, in the first block, the extension is .png
A .png is an
A .rtf is a text
file. It would
open in any
text editor or
A .docx is a
A .dmg (Mac) is
the same as a
.m4v, .avi is
in videos and
Try finding the full forms of these extensions yourself
-‐ In your HTML and CSS, you will be specifying the width and height of fonts, images and other objects.
-‐ It is important to know the units of digital measurement: pixels (px), points (pt), em and percentage
-‐ For a guide on which units to use, check out:
Basic measurements of storage are bytes and bits, which store information in digital 1s and 0s. Since 1
byte stores a relatively small amount of information, we give names to collections of bytes. For
example, 1,073,741,824 bytes make up 1 gigabyte (1gb)
The following units are used:
One of the most valuable skills in programming is logic. Here is some advice from an expert:
What is Logic?
- Logic is a set of principles underlying the arrangements of elements in a computer or
electronic device, so as to perform a specified task.
Why is learning to build logic important?
-‐ The main aim of programming and software development is to create a solution for
a problem, or to improve the existing solution.
-‐ Most of the real world problems can only be solved by using logic.
-‐ Eg: Find the largest number in the given set of numbers.
o Normal solution: You have to compare each number to all the other
o Better or ‘optimised’ solution: Compare first number to the second, then
only choose the larger of the two to compare with the next number.
Repeat this step till you get the largest number.
-‐ Much like mathematics, programming includes writing codes based on algorithm
(steps) with adequate logic in order to perform a task.
-‐ You may master any programming language, but without the skill of logic building,
you can never be a good programmer.
How to improve your logical ability
-‐ Here’s few tips:
1. Learn a programming language such as C, C++ or Java:
It allows you to play around with memory directly. This is very important if you
need to understand how data is passed from one memory block to another. The
reason is that you start to visualize in your mind’s eye how data moves in your
2. Refer and try to understand programs written by others:
Use the internet or library to find code written by another developer. Try to
understand why it was written that way and understand it completely. Once you
have understood why it was written the way it is written, check to see if you
could improve that logic.
Go to the Shortcuts and Resources section for ways to read and edit the code of other
3. Solve logical puzzles:
Check your local newspaper. One section of your newspaper will be filled with
series of logic puzzles and riddles. Try solving them. Don’t get disheartened if you
can’t solve them or take a long time to solve them. Remember that you are in
the learning and improving stage.
Eg: Try solving Suduku puzzles. Will help you improve your logic, concentration
and skills of grouping and organizing.
4. Help other people build logic:
Once you start feeling confident about yourself and your logic capabilities, you
should immediately start helping people. Subscribe to an online forum and start
helping people there. The benefit of helping people on forums is that you get to
learn new problems that people face. This immensely adds to your knowledge.