DEV Community: Zeniat Gbadamosi

How to create a simple web page using HTML and CSS

Zeniat Gbadamosi — Tue, 24 Jan 2023 15:26:18 +0000

HTML (Hypertext Markup Language) is a markup language used to structure the content of a website. It defines the structure and layout of a web page, using a set of tags and attributes to create elements such as headings, paragraphs, images, and links.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS can be used to control the layout, colors, fonts, and other visual elements of a website.

Together, HTML and CSS form the backbone of web development, providing the structure and design for websites. HTML defines the content and structure of a web page, while CSS controls its presentation and layout. These two technologies are used together to create visually appealing and user-friendly websites.

In today's article, We will be diving into the world of web development by creating a simple webpage using HTML and CSS, and by the end of this tutorial, you will have a solid understanding of how to use these languages to create your web page. We will cover the basics of HTML and CSS, including how to structure your webpage, images, and links, and style your web page using CSS.

In today's tutorial, you are going to be recreating this simple web page design I made with Figma, So grab a cup of coffee, and let's start creating our webpage!

First Step

To create a simple web page using HTML and CSS, you will need to decide which environment you are very much comfortable using, which typically includes installing a text editor or an integrated development environment (IDE) for writing your code.

To begin:

First, create a new text document and save it as "index.html" in a new folder on your computer.
Add the following basic HTML structure to your "index.html" file:

Second Step

You will then move on to create the HTML structure of the web page, in this tutorial our web page structure involves the use of some HTML tags to define the different elements of the page, such as:

header tag <header>
navigation tag <nav>
paragraph tag <p>
unorder tag <ul>
list tag <li>
div tag <div>
image tag <img src="">
link tag <a href="">
footer tag <footer>

These tags are used to create the layout and structure of the page and can be nested within each other to create more complex layouts. Usually, some of this content is added to the "body" section of your HTML file.

The navigation structure of a web page

Web page HTML structure

"index.html" file on a web browser

Third Step

This step usually requires you to style your Web page using CSS, that is, (Cascading Style Sheet). To do this, you must first:

Start by adding a new text document and saving it as "style.css" in the same folder as your "index.html" file.
Link your CSS file to your HTML file by adding the following line within the head section of your HTML:

        <link rel="stylesheet" href="style.css">

CSS external linking

Fourth Step

The fourth step usually involves you adding styling rules for different elements on your webpage. One of the key concepts in CSS is selectors and properties.

CSS selectors are used in selecting HTML elements on a webpage to apply styles to it. There are several types of selectors, including:

Class selector: These are denoted by a period (.) before the class name. For example, to select all elements with the class "example", you would use the selector ".example".

`<h1 class="example"> I am a girl </h1>`

`<style>
      .example{ 
              font-size: 12px;
             }

</style>`

ID selectors: These are denoted by a pound sign ** (#)** before the ID name. For example, to select the element with the ID "my-element", you would use the selector "#my-element".

`<p id="my-element"> I am a Niqabi Coder </p>`

`<style>
      #my-element{ 
              color: #ffffff;
             }

</style>`

HTML structure with CSS selectors

Fifth Step

At this stage, you will then go on to add CSS properties to define the styles that are applied to the selected elements. Some basic properties include:

Color: which sets the text color of an element. The color property is set using a color value, such as "color: red" or "color: #ff0000".
Font size: which sets the size of the text. The font-size property is set using a unit of measurement, such as "font-size: 16px" or "font-size: 1.2rem".
Margin: This sets the space outside of an element.
Padding: which sets the space inside of an element. The padding property is set using a unit of measurement, such as "padding: 10px" or "padding: 1em".

Now, with your basic understanding of CSS selectors and properties, you can start styling your web pages and making them look great! To learn more about some of the CSS properties used in this tutorial, visit w3schools

Sixth Step

Finally, open your "index.html" file in a web browser, Your simple web page should now be visible, with the styles defined in your CSS file applied to the elements on the page.

In conclusion, creating a simple webpage using HTML and CSS is a relatively easy process that allows you to create a professional-looking web page with minimal effort. By using basic HTML tags, you can create the structure of your webpage and add text and images to it. CSS can then be used to add style and layout to your webpage, allowing you to control the appearance of your webpage. With a little practice, you will be able to create a web page that is both functional and visually appealing. Remember that web development is a skill and it needs time and practice to improve, so keep experimenting and learning new things!

Learning Resources

Figma Design: Web page UI Design

Source Code: github

Live Link: Web page

Mastering the Basics of HTML: A Beginner's Guide

Zeniat Gbadamosi — Tue, 17 Jan 2023 00:31:49 +0000

Getting started in web development can be a challenging, but also rewarding journey. There are many different tools, technologies, and frameworks to learn, and it can be overwhelming to know where to start. However, with a little guidance and a lot of practice, you can become a proficient web developer in no time.

As a newbie in web development, one very important thing you need to understand is what environment you need to write your first few lines of code, if you are worried/unsure about what code editor to use, I will recommend you install a Visual Studio Code in your Windows, macOS or Linux. Download here

A brief Intro to HTML

HTML, short for Hypertext Markup Language, is the backbone of web development, it provides the structure and layout for all the text, images, and other multimedia elements that make up a web page and is also essential for creating structured and well-formatted web pages.

In this article, you will learn the comprehensive guide to understanding HTML, covering the basics of web development and some of the most important tags and elements that you need to know to create your web pages!

HTML as the skeleton of a webpage

HTML Structure

The structure of an HTML document is simple and easy to understand. It consists of three main parts which include;

Head
Body
Doctype

The head: contains information about the document, such as the title, which is displayed in the browser's title bar or tab.

The body: contains the actual content of the web page, such as;

Text
Images
Links

The doctype: is a declaration that tells the web browser which version of HTML the document is written in.

A structure of an HTML

After learning about these structures, you move on to understand what elements are, and how they make up the various layouts/component of a web page.

What are Elements

Elements are building blocks of an HTML document and are used to create the structure and layout of a webpage. Elements are enclosed in < tags > and can contain other elements, as well as text and attributes.

Example of an HTML element

One of the most important elements of an HTML document is the tag. A tag is a keyword enclosed in angle brackets, such as < html > or < body >.

Tags are used to describe the type of content that is contained within them, Some common tags include:

< html >: The root element that contains all other elements on the page.

< head >: Contains metadata about the document, such as the title and link to CSS stylesheets.

< body >: Contains the document's content displayed in the web browser.

< div >: A container for HTML elements, used for grouping and applying CSS styles.

< p >: Defines a paragraph of text.

< h1 >: heading tag is used to define the headings of a page.
There are 6 heading elements which include; h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.

< a >: Defines a hyperlink to another web page or a specific location on the same page.

< img >: Displays an image on the web page.

< ul >: Creates an unordered list of items.

< ol >: Creates an ordered list of items.

< li >: Defines a list item, used within < ul > and < ol > elements.

There are many other tags like < header >, < nav >, < footer >, < main >, < article >, < section >, < button >, < form >, < label >, < input >, < select >, < textarea >, < pre >. Learn about the various HTML tagshere

Another important element of HTML is the attribute. Attributes provide additional information about an element and are added to the opening tag of an element.

Some common attributes include;

src: which is used to specify the source of an image.

href: which is used to create a link to another web page.

class: which is used to specify a class for an element, allowing you to apply CSS styles to it.

As you become more familiar with HTML, you'll find that you can create more advanced web pages that are more interactive and engaging. Read more about attributes here

<img src="img_girl.jpg">
<a href="https://www.w3schools.com/html/html_attributes.asp"></a>
<p class="paragraph"></p>

In conclusion, HTML is the basic building block of web pages and essential to understanding for a web developer. It provides the structure and layout for all the text, images, and other multimedia elements that make up a web page. Understanding the basics of HTML is crucial for anyone who wants to create web pages. With a solid understanding of HTML, you'll be able to create simple web pages and advance to more complex designs as your skills improve.