Guys, hello, everyone. First, let me introduce myself. I’am Hakan Budak. i’m 23. QA and jr. at the heybooster company. i’m on the frontend side. At the heybooster company. i’m in the jr. frontend and QA business.
The purpose of writing this article is for you to see your own development journey with me. Every week on fridays, I’ll be posting my articles regularly
Where I want to improve, first HTML,CSS, JS and VUE
So I decided I should start with HTML and CSS first. After watching the video this week, we’ll be looking for places we don’t understand.
What is HTML ?
HyperTextMarkupLanguage
Html is not a programming language, it is a markup language.
We use content on a web page to structure things like forms and text images
We structure its content using html tags.
<p> content </p>
<a> link </a>
<img>
In the example above, we see the opening and closing of the tags. When closing, we close it with a slash. Most tags use this opening and closing tag structure, and some don’t use the structure at all.
If we imagine them on a page,
presents an image in the form of a paragraph. The tag generates a Link tag and can be clicked. The tag displays a visual image. In HTML, the code is read from top to bottom, so in the example above, a visual like the one below will appear.
What is CSS?
CSS is the 2nd part of the puzzle when it comes to web pages. It stands for cascading style sheets.
We use CSS to format the page and make it look better, while HTML structures the content we want to see on a web page. We give parts such as color, font, effect on the page with CSS.
What have we learned
HTML is the markup language for structuring content.
CSS is the language used to format web pages.
How to create html file using WebStorm as our editor.
Find out when a web image enters the display view
We see how to preview the HTML page in a browser.
I wanted to start with web storm because I like web storm.
I leave a link for web storm installation : https://www.jetbrains.com/help/webstorm/installation-guide.html
Let’s start using web storm :
Let’s create our project in this section and give our project a name
Let’s create an html file and name it index.html and let’s get started
Now let’s examine what they can do on the code.
<!DOCTYPE html>
<head>
<title>Learning</title>
</head>
<body>
<p>Hello <strong>Hakan</strong> </p>
<p><small> my </small> first web <em>page!</em> </p>
</body>
</html>
Here is the package with Hakan bold text written inside the tag.
In the tag, the string is converted to italic text. The label serves to shrink the part inside.
Here is our first code
Now let’s develop this structure further:
<!DOCTYPE html>
<head>
<title>Learning</title>
</head>
<body>
<p>Hello <strong>Hakan</strong> </p>
<p><small> my </small> first web <em>page!</em> </p>
<a href="http://app.heybooster.ai">heybooster click to login</a>
<h1>Page</h1>
<h2>Page</h2>
<h3>Page</h3>
<h4>Page</h4>
<ul>
<li>
sorted list
</li>
<li>
sorted list2
</li>
</ul>
<ol>
<li>
numeric sorted list
</li>
<li>
numeric sorted list2
</li>
</ol>
</body>
</html>
t might sound very complicated at first because that’s what I thought 🙂 Let’s examine together.
The tag tells us that there is a link there and will take us there when we click it.
The purpose of the h1 h2 h3 h4 tags determines the title size of the text written inside the tag.
We can also think of it as changing the header size. In the output below, you can see how the size of the page posts have changed.
Let’s separate the ul and ol tag in 2 ways. If ul is an unordered list, we can define it as an ordered list.
An unordered list starts with the
- tag. Each list item starts with the
- tag.
UL List items will be marked with item classes (small black circles) by default
An ordered list starts with the
- tag. Each list item starts with the
- tag.
The list items will be marked with numbers by default
Now let’s see the output and see what we did :
We will further enhance the output you see above with css. Let’s use some important tags to improve this structure a little bit, and then let’s make a slow introduction to css.
Let’s use div to create a more organized structure than we saw above. We use it to make the code more readable, even if it doesn’t have an effect on the image.
We can create 4 groups here as follows
<!DOCTYPE html> <head> <title>Learning</title> </head> <body> <div> <p>Hello <strong>Hakan</strong> </p> <p><small> my </small> first web <em>page!</em> </p> <a href="http://app.heybooster.ai">heybooster click to login</a> </div> <div> <h1>Page</h1> <h2>Page</h2> <h3>Page</h3> <h4>Page</h4> </div> <div> <ul> <li> sorted list </li> <li> sorted list2 </li> </ul> </div> <div> <ol> <li> numeric sorted list </li> <li> numeric sorted list2 </li> </ol> </div> <span> I am a span tag </span> <hr> <img src="boost.jpeg"> <blockquote cite="https://app.heybooster.app"> This picture is taken from heybooster. </blockquote> <p style="color: cadetblue">Style me :)</p> </body> </html>is normally similar to text but used to add css or js to part of html. We will see more often in the future when we start using css and js.
The
tag we use just below helps us draw a horizontal straight line on the page. Using thetag is very easy. All you have to do is throw the image you want to use into the project and show its path in src=””.
As far as I’ve learned, if we quoted from a site, this quote has a cite =”” part to indicate where we got it from, and / then shows us by centering the text we wrote.
I will end my article with a little css.don’t make it too big in your head css part because i believe it is easier than it looks.Style me :)
What happened here was to specify color with style inside the
tag. Let’s witness together how much what we do in this process will develop. I’m so excited to share my first post. I hope I explained it easily
I’m sharing my github link below. After posting every week, you can find the most updated version of the code here.
- tag.
The list items will be marked with numbers by default
Now let’s see the output and see what we did :
Top comments (0)