Ready to take the first step in becoming a web developer? Interested and thrilled in building your first web page as a web developer, it is crucial to have a basic understanding of Html and CSS that enables you to do so.
Therefore, this beginner's guide to HTML and CSS will provide you with a solid foundation in these two technologies, with easy-to-understand explanations and practical examples.
The Basic Tools You Need.
The following fundamental tools are necessary before you can start learning HTML and CSS:
1.Text Editor:
A basic text editor like Notepad or a more advanced one like Visual Studio Code, Sublime Text, or Atom are both options. You can write and edit HTML and CSS code with these editors.
2. Web Browser:
To preview your HTML and CSS web pages, you'll need a web browser like Chrome, Firefox, or Safari. Browsers let you test the operation of your web pages and observe how your code is displayed.
3 FTP Client:
File Transfer Protocol is a common protocol used for online file transfers between servers and clients. It is a client-server protocol where the client connects to a remote server using FTP software and transfers files back and forth.
They frequently used fTP in coding to upload and download files to and from a web server. For instance, if you wish to publish a website, you can upload the files to the web server using an FTP client. Similarly to this, if you wish to download files from a web server, you can connect to the server using an FTP client and do so.
Understanding The Basic Web Code - HTML and CSS.
HTML and CSS are two fundamental building blocks of the modern web. HTML stands for Hypertext Markup Language. HTML is the standard markup language used to structure and organise content on the web. While CSS Stands for Cascading Style Sheet. it is used to style and visually enhance that content to make the web page appealing and presentable for more user interactions. Together, these two technologies, HTML and CSS, allow developers to create beautiful, functional websites that are easy to use and navigate.
We'll now delve in-depth to learn how HTML and CSS are applied to design an attractive and useful web page for the Internet.
WHAT IS HTML?
HTML stands for Hypertext Markup Language. HTML document starts with a document type declaration, which tells the browser what version of HTML is being used.
The most recent version is HTML5, which is the recommended version to use. This document includes an HTML element that contains the head and body elements.
Here is an example of an HTML document-type declaration:
<html>
<head>
<title> Page Title</title>
</head>
<body>
<h1> Heading 1</h1>
<p>Paragraph</p>
</body>
</HTML>
Therefore, it is equally important to know that the Html document also consists of a set of tags that describe the structure of the content on a web page, such as headings, paragraphs, and images. Some commonly used tags include:
<html>:
<head>: defines the head section of an HTML document
<title>: defines the title of an HTML document
<body>: defines the body section of an HTML document
<h1>-<h6>: defines headings of different sizes
<p>: defines a paragraph
<img>:defines an image
<a>: defines a hyperlink
These tags are enclosed in angle brackets, and they usually come in pairs: an opening tag and a closing tag just like in the example we have seen above.
In addition, Developers can now add attributes to elements, which provide additional information about the element.
For example, an image element might include an alt attribute to describe the image:
`<img src= "example.jpg" alt= "An example image">
`In this example, the src attribute specifies the location of the image file, while the alt attribute provides a textual description of the image that screen readers and other assistive technologies can use.
Therefore, using HTML as a developer gives you the ability to create the structure and content of a webpage. HTML provides a structured and semantic way to organize your content, which can help search engines understand and index your website more effectively.
It also provides accessibility features, such as the ability to add alt text to images and to create descriptive labels for form fields, which can help users with disabilities to navigate and interact with your website.
WHAT IS CSS?
CSS stands for Cascading Style Sheet. CSS provides a way to separate the presentation of a web page from its content, allowing developers to create and control the appearance of text, colours, backgrounds, borders, and more. CSS rules consist of a selector, which targets one or more HTML elements, and a declaration block, which specifies the styles to be applied to those elements.
The basic syntax for a CSS rule is as follows:
`
copy code
selector {
property: value;
}
`
The selector specifies which HTML element or elements the rule applies to.
The property is the aspect of the element's style that you want to change (such as its colour, font size, or padding).
The value is the new setting for the property.
Here is another example of a CSS rule that sets the colour of all headings to red might look like this:
`
h1 {
colour: red;
}
`
In this example, the h1 selector targets all top-level headings on the web page, while the colour property sets the colour of the text to read.
CSS also allows developers to use classes and IDs to target specific elements on the page. For example, a CSS rule that sets the background colour of a specific section of the page might look like this:
`
section1 {
background-colour: blue;
}
`
In this example, the #section1 selector targets the element with the ID of section1, while the background-colour property sets the background colour to blue.
Here are some commonly used CSS properties include:
1 . Color: sets the color of the text.
font-family: sets the font family for the text
font-size: sets the font size for the text
background-color: sets the background color of an element.
border: sets the border style of an element
However, a web page should be responsive and adapts to different screen sizes and devices. Using CSS enables you to do that, which is essential for ensuring that your website is accessible and user-friendly across a wide range of devices, including desktops, laptops, tablets, and smartphones.
Here's an example of a responsive CSS code that adjusts the layout of a webpage depending on the screen size of the device being used:
`
CSS
/* CSS code for desktop screens */
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 30%;
height: 200px;
}
/* CSS code for tablet screens */
@media only screen and (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
width: 80%;
height: 150px;
margin-bottom: 20px;
}
}
/* CSS code for mobile screens */
@media only screen and (max-width: 480px) {
.box {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
}
In this example, the CSS code uses media queries to apply different styles to the same HTML elements depending on the screen size of the device being used.
For desktop screens, the container class uses display: flex and justify-content: space-between to arrange its child elements with equal spacing between them. The .box class uses width: 30% and height: 200px to define the size of each box.
For tablet screens (with a maximum width of 768px), the media query changes the flex-direction of the .container to a column, aligns its child elements to the center using align-items: center, and reduces the size of the .box elements to width: 80% and height: 150px.
For mobile screens (with a maximum width of 480px), the media query further reduces the size of the .box elements to width: 100% and height: 100px, and adds a margin of 10px between them.
By using responsive CSS like this, you can create a webpage that looks great and functions well across a variety of different devices and screen sizes.
Finally, as a developer using CSS gives you the ability to style and format the layout and appearance of a webpage. Therefore, CSS can also help you to create a consistent and cohesive visual style throughout your website, which can enhance the user experience and improve the overall usability of your website.
Conclusion
It is unarguable that developers build beautiful web pages by making use of HTML and CSS technologies seamlessly. Now that you have the knowledge of HTML and CSS, you are on your way to becoming a web developer and developing attractive websites that enhance great user experiences. Meanwhile, frequent and consistent practices make you a Pro developer effortlessly.
Top comments (0)