First Steps for Dummies | Web Development
I have been a web developer for many years and I always tried help my friends finish their work.
They all knew some commands, tags or something from the internet that they learned. However, they lacked the experience to be able to use all this.
So I’m not going to focus on just showing commands or tags. I’ll show you what the website creation process looks like. Explain the basics and guide you to use it because it’s okay not to remember everything.
Programming is A LOT about searching.
This is the most important thing I want you to take from this. You will always have to search. It’s part of the process.
In many job interviews when you have to build something you can use google because we all do it all the time.
These days one of my friends is trying to learn this skill. So I’m writing this also for her, but I’m giving it to all of you. 🖤
Chapter Zero: Where To Code?
Nowhere is this question easer than in web development, because website is just document of text. You can even use text editor!
But really.. Don’t do it😄. It would only hurt you.
When I started coding, I used Sublime Text. It’s the simples editor, but I recommend starting with a slightly more advanced one.
For example Visual Studio Code.
Next, there is WebStorm and that is best of them, but it is not free. However, if you are student, it is free for you.
For this story, I’m gonna use Visual Studio Code.
Let’s Build a Web!
- Just open editor and create new file.
2. This file is content of our page. To begin with, write there something.
3. Save it.
Here is one important thing to do. All web pages must end with “.html”.
That’s because we must say to device, this file is meant to be open in browser.
And that’s all! Open it and you will see, we created a web page.
This, for example, is even trying to flirt with us.
TIP: This is only stored locally, which means only you can visit it. But if you want to show them to anyone on the Internet. You need to buy a domain (www.exampledomain.com) and pay for hosting.
Hosting places this file of yours on the internet and the domain is its address
Hehe sorry, I’m joking. I just wanted to make a cringe joke here.
This is still nothing, but it is a good start to help you understand that all web pages are just files of text and images.
However, we want to distinguish one text from another. We need subpages or some graphics to make our site more practical and interesting.
We achieve this all by editing this file.
Chapter One: Formatting file
Let’s do it more interesting. Browser is reading file and format it by elements he found.
Elements are created from tags, which can contains text or another elements.
One element is something like: <h1> Compliment <h1 />
It is created with a start tag, content and an end tag(contains dash). And if we write on our page, the browser will display it a little differently.
This is because browsers have learned that certain elements mean something. For example, h1 stands for heading1, and there are multiple headings that vary in size.
Let’s add there more lines of text to play with.
Oh, something there doesn’t feels right.
This is because the browser doesn’t understand what we put there. He sees only characters and elements.
Therefore, we have to put everything in some element. There are elements for anything. Some have special behavior and some are just for style.
Element for plain text is <p> — paragraph
Whoala! It is now much better formatted text.
We can even put element into element like this. (B means bold)
Or something special like this. The interesting thing about them is that they don’t need any content in them, so we write the start tag without the end tag.
TIP: If you don’t know what element use, you can use DIV. This elements don’t have special reason, but it can wrap some another elements.
There are even some elements, which require some elements in content.
Unordered List(ul) for example. You need put there list item(li) elements.
TIP: Using the right elements helps a lot to have a better SEO and a better chance of being found accidentally in a search.
Okay, now you know how to format text, but I guess you want know how to format this to look more like real web page.
But first, you must know about structure of HTML document.
Structure of HTML document
If you look at other web sites, you will see that there is more information about them. Not just page content. For example, the name of the card or its icon.
This information is stored in the same file as our content. But we need to separate the information about the page and the content of the page.
For that we use this structure that you can copy and paste for each of your other projects.
The head contains the information and the body contains the content of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body></body>
</html>
Summarization
- All web pages are created of files of text. For web page we use html type files, to let know browser how to open it.
- To format page, we use elements, which are created from tags.
- Browsers have defined the style of some elements and it is good practice to find the best element for each text. But if there is no element for your need, you can use something more general. Element DIV.
- HTML document must contains doctype, html, head and body elements to create structure. This is same for every page, so you can copy-paste it.
- Here, all we was using was HTML language
Chapter Two: Style
Our work now looks like nothing more than a Word document. This is because HTML is not designed to style a page. For this we need to use CSS.
So let’s start with something more interesting, we don’t want to create a websites like Total Commander in this century.
Let’s say we don’t like light mode and want our page to be in dark colors. Dark as the souls of the creatures under your bed.👻
For style, we need to add stylein our head. It contains informations about looks of the elements.
TIP: Best solution is to have style in separate file. But for this scenario internal CSS is good enough.
In our style, we just define WHAT and HOW it should looks.
(Be careful about curly brackets)
Now you can see two things.
First, in CSS we defines looks by words really similar to english. You don’t need to know every of them. You just need know how google things like this.
Second, if you are observant enough, you will notice we see nothing. This is because our background color is now black and so is our text color.
Because that, let’s change the text color to white. But to know how to do it, let’s use google. (Or DuckDuckGo if you want🦆)
We don’t even have to open any website and we could find the exact answer we were looking for.
And after we apply white color to paragraphs, we will see…
Almost nothing. It doesn’t look perfect now, but it’s still in progress.
The problem is that we have several different elements. Not just a paragraph.
The solution for this is simple, define white colors for them as well.
And now we see something. Great, right?
But we can improve the code a lot. Imagine if we wanted everything to be yellow and we would have to change it in many other places. A better way to do this is if we just use a comma.
Now it is more lovely, but we could also use * what means everything.
Now we have everything in the dark, but we can go much further and improve this design a bit more.
TIP: In CSS we can define color in multiple ways. By words, HEX or with RGB.
I showed you the way we style our text. But we need to put it in some layout with navigation or other elements to improve the experience.
Building a layout
I don’t want to make it complicated, so we’re going to do something really simple but useful with a lot of different principles.
Let me do just fast layout in figma. And really, really fast thanks to this story.
Let’s start with red box.
But there’s a problem, when you look at the structure, we don’t have anything that can represent that box element.
So let’s fix it and we wrap all of this into main element.
We could also use div or something else. But main elements should contain all main content, so this is his best scenario.
We’ve seen that our page doesn’t change, but we’ve achieved that all of our text is in one element.
Let’s see what the main element looks like by defining the background color.
Spacing
Okay nice, now let’s talk about spacing.
In CSS we are using margin and padding. All of this can define space to the left, right, top or bottom. However, the difference between them is the location of the space.
It is located in or around an element.
TIP: The difference between margin and padding can be difficult to understand at first, you have to try it yourself. Try defining border, border and padding and see what happens. You can also look here if you are still having a hard time.
After we put some padding. We can see that all the elements have a little more room to breathe. Which is always good.
TIP: There are shortest ways to write padding or margin. See this.
Another thing to change is the position of the box. It’s good UX practice to put all our content in the middle, so we’ll move it there.
There is a little trick to achieve this. margin: 0 auto; but for that we need to define how wide the element should be.
Navigation
Another important thing is navigation to other subpages. For this, we will create a large navigation bar at the top.
We use for this navigation(nav) element and put there the names of other pages we will have.
Okay nice, we have navigation above the content. But we want our items to be next to each other.
Again, there are many ways to achieve this, but for simplicity we change display option for our Paragraphs to stop occupying the entire row.
This looks better, so we change a style a little bit more.
Navigation looks fine now, but we see another problem. This changed ALL paragraph in our page.
For this is simple solution. We need to narrow down the scope and define to change only the paragraph in the navigation.
Let’s say we have a much longer piece of content and when we start scrolling we want our navigation to stay at the top of the browser.
This is the current behavior:
Solution for this is not really hard. We just change position to be sticky.
And to let it work, we also have to define where element should stick to. We want it to be at the top.. So.. zero pixels from top will be: top: 0;
Tadá, it works!
Summarization
- For editing style of elements, we use CSS language.
- You will not know everything, you just need to know how to find everything.
Chapter Three: Let’s finish it up
But there is still one thing missing. How paragraph could move us to another pages? Answer is they don’t.
We need to change it to a element. This redirect us to any other link in internet or in our structure.
Let’s create few other pages in our folder.
We also rename our homepage to index.html. There are no rules, except your homepage must me called index.
For <a> elements it is important to give them href attributes.
Attributes are defining elements.
We can put whole URL page like this to attribute of a element. <a href="https://www.google.com/">google page</a>
Or we can redirect user to one of our pages with relative position.<a href="shop.html">shop</a>
We have achieved that our site will now redirect to others. Problem is, it started to look ugly. (more than it was before)
Why did it happen? This happened because the paragraph had a defined style from the browser, but the link has a different predefined style. Let’s fix it.
I even used text-decoration: none; to remove underline, what is predefined style for a element.
But what if we want to underline the page we are currently on?
We don’t have a way to do this by selecting elements like before. We have to use a different method to select them. Classes.
We can define a class style and assign it to an element by attribute. Note that in css we distinguish between elements and classes with a dot.
And that is all. There are many, many things I haven’t shown you today.
But you will learn everything faster if you code yourself. I can show you the basics, but only you can really learn something advanced when you find the reason to need it.
We can do a lot more here. For example add image in the center of the row:
Or improve design a to make it less ugly.
But this all is now up to you. Try changing it to at least this design.
Experience makes you stand out to customers and employers, not what you’ve read.
The last thing I want to show you today is the Inspect Element. This is a powerful browser tool for showing the structure of each page and giving you the ability to play with it and help you find the answer to problems in your code.
I further suggest you to improve this website. Or better yet, make a new one. Write a story about how you make something, share it with us, tag me or let me know and I promise I’ll read it and give you feedback✌.
If there’s anything more you’re interested in or find difficult to achieve, let me know in the comments and I’ll help or even create a story to explain it better.
Let’s share our knowledge and remember..
Enjoy all the creative work and never be ashamed of having to use google. We always use it.✌
