How to Create a Website using HTML and CSS

How to Set Up your CSS and HTML for Creating a Website

Before depart our HTML and CSS website task, first let ’ s set the necessary pamphlet and file structure allot to how you are going to code the entire project. Let ’ s name our folder “ build a website HTML ”. Inside the folder, create a new “ index.html ” file and two folders named “ CSS ” and “ images. ” Create a “ style.css ” file inside the CSS folder and store all the necessary image required in the project inside the images folder.

The appellative rule is not necessary. However, a well-designed folder structure helps in agile navigation between the HTML and CSS files.

How to Create a Website using HTML And CSS

In this subdivision, let ’ s create a full-fledged site using only HTML and CSS. Most of the users have a question today & # 8211; Can you create a website precisely using HTML and CSS?

It is quite potential to create a good-looking site with the help of alone HTML and CSS. HTML stands for Hypertext markup language and ply the frame for our site. However, CSS (Cascading Style Sheet) allows the skeleton to be more good-looking. Let us use seven steps to create a good-looking website from scrape.

Step 1: Create a Layout

First create a basic construction of your website as a rough sketch. There are a lot of free online service that will help you design your website. Nonetheless, you must get a basic structure of the website ready.

Step 2: Set up the kettle codification

Create a new task folder and make an empty index.html file inside the folder. Here, add the boilerplate codification to the HTML file.

& lt;! DOCTYPE html & gt; & lt; html lang= '' en '' & gt; & lt; head & gt; & lt; title & gt; How to create a website apply HTML and CSS & lt; /title & gt; & lt; link rel= '' stylesheet '' href= '' css/style.css '' & gt; & lt; /head & gt; & lt; body & gt; & lt; h1 & gt; Test & lt; /h1 & gt; & lt; /body & gt; & lt; /html & gt;

Before starting the actual content add some test content in your HTML file, and run it on the browser to try if the code is working fine.

Step 3: Create major elements in the layout

Create section elements in the HTML file.

& lt;! DOCTYPE html & gt; & lt; html lang= '' en '' & gt; & lt; head & gt; & lt; meta charset= '' UTF-8 '' & gt; & lt; meta name= '' viewport '' content= '' width=device-width, initial-scale=1.0 '' & gt; & lt; title & gt; How to make a website expend HTML and CSS & lt; /title & gt; & lt; link rel= '' stylesheet '' href= '' css/style.css '' & gt; & lt; /head & gt; & lt; body & gt; & lt; lintel & gt; & lt; /header & gt; & lt; main & gt; & lt; section & gt; & lt; /section & gt; & lt; subdivision & gt; & lt; /section & gt; & lt; section & gt; & lt; /section & gt; & lt; /main & gt; & lt; footer & gt; & lt; /footer & gt; & lt; /body & gt; & lt; /html & gt;

Step 4: Create the HTML content

In the previous step, you had created the factor in the layout. In this step, fill in the HTML content. Note that, in this example, let us fill the substance with dummy text only.

& lt;! DOCTYPE html & gt; & lt; html lang= '' en '' & gt; & lt; head & gt; & lt; meta charset= '' UTF-8 '' & gt; & lt; meta name= '' viewport '' content= '' width=device-width, initial-scale=1.0 '' & gt; & lt; title & gt; How to create a website using HTML and CSS & lt; /title & gt; & lt; link rel= '' stylesheet '' href= '' css/style.css '' & gt; & lt; /head & gt; & lt; body & gt; & lt; header & gt; & lt; nav & gt; & lt; ul & gt; & lt; li & gt; & lt; a href= '' # introduction '' & gt; Home & lt; /a & gt; & lt; /li & gt; & lt; li & gt; & lt; a href= '' # about '' & gt; About & lt; /a & gt; & lt; /li & gt; & lt; li & gt; & lt; a href= '' # contact '' & gt; Contact & lt; /a & gt; & lt; /li & gt; & lt; /ul & gt; & lt; /nav & gt; & lt; /header & gt; & lt; independent & gt; & lt; section & gt; & lt; div & gt; & lt; img src= '' Images/doggo.jpg '' alt= '' display painting of doggo '' & gt; & lt; h2 & gt; My name is Doggo & lt; /h2 & gt; & lt; /div & gt; & lt; /section & gt; & lt; section & gt; & lt; div & gt; & lt; h1 & gt; About Me & lt; /h1 & gt; & lt; p & gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, similique? & lt; /p & gt; & lt; ul & gt; & lt; li & gt; Btech Qualified & lt; /li & gt; & lt; li & gt; Software Engineer & lt; /li & gt; & lt; li & gt; GATE AIR 01 & lt; /li & gt; & lt; /ul & gt; & lt; /div & gt; & lt; /section & gt; & lt; subdivision & gt; & lt; div & gt; & lt; h1 & gt; Contact me & lt; /h1 & gt; & lt; p & gt; Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laudantium. & lt; /p & gt; & lt; ul & gt; & lt; li & gt; Email ID & lt; /li & gt; & lt; li & gt; Insta ID & lt; /li & gt; & lt; li & gt; Facebook ID & lt; /li & gt; & lt; /ul & gt; & lt; /div & gt; & lt; /section & gt; & lt; /main & gt; & lt; footnote & gt; & lt; p & gt; © Copyright 2022 Doggo Co LTd. & lt; /p & gt; & lt; /footer & gt; & lt; /body & gt; & lt; /html & gt;

Now, if you recharge the page, you are going to get an yield something like this. You are now going to give this webpage some CSS in the next step to make it good-looking.

Step 5: Create CSS for the layout

Before supply the depth in the CSS, let us first add some basic CSS to make our webpage appear fairly alike to the layout that we designed in the first step.

Moreover, we linked our HTML file to a CSS file in the 2d step while publish our boilerplate code. Add the introductory layout CSS in the unite CSS file. In this step, we are going to focus on height, width, padding, margin, and display of the sections and images, to make them adjustable according to the webpage.

* {padding: 0; margin: 0;} header {height: 45px;} header nav ul {showing: flex; margin-left: 80 %;} header nav ul li {padding-left: 10 %;} section {height: 100vh; border: 1px solid grey; presentation: flex; justify-content: center; align-items: center;} .Container {margin-top: 10 %} .Container img {height: 300px;} .Container h2 {margin-top: 3 %;} footer {line-height: 40px; display: flex; justify-content: center;}

Step 6: Create CSS to style single ingredient

In this step let us style individual content. Let us focus on properties like face, mete, colors, and more.

* {padding: 0; margin: 0;} header {height: 45px;} header nav ul {display: flex; margin-left: 70 %; list-style: none;} header nav ul li {padding-left: 10 %;} header a {text-decoration: none; color: brown;} subdivision {height: 100vh; border: 1px solid grey; display: flex; justify-content: center; align-items: center;} .Container img {height: 300px; border-radius: 50 %;} .Container h2 {margin-top: 2 %; font-size: 3em; font-family: 'Lucida Sans ', 'Lucida Sans Regular ', 'Lucida Grande ', 'Lucida Sans Unicode ', Geneva, Verdana, sans-serif;} .Container p, ul {margin-top: 2 %; font-size: 1.5rem;} footer {line-height: 40px; display: flex; justify-content: middle; font-size: 1rem;}

Step 7: Add background color and style

In this step, let us add some finishing ghost, and our website is ready. Let us add a background image and background colors to the sections.

# intro {background-image: url (pinkbg.jpg); background-repeat: round;} # about {background-color: bisque;} # contact {background-color: blanchedalmond;}

After discharge the entire code of our website, it will appear something like this. Note that you can add more CSS to make it farther good-looking.

Talk to an Expert

How to optimize HTML codification for Website?

View the Source Code of an HTML Document

To view the source code of any webpage:

• Navigate to the webpage
• Right-click on the page
• Select “ view page rootage ”

The source code of an HTML document will look something like this.

Nest HTML Elements

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Nesting in HTML is to apply several HTML tags to a single content. In nesting, one element can be placed inside other elements. Another welfare of nesting in HTML includes improving the legibility of your code for you and other developer.

Nesting in HTML will look something like this.

How to optimise CSS code for Website

Here are the ways you can optimize CSS code for websites:

Style Images with CSS

In this subdivision, let ’ s learn how to style images with CSS such as adding a border to an image, adjusting its dimensions, and further specific CSS to our persona in the webpage. First, add an picture element in the HTML file.

& lt; img src= '' doggo.jpg '' alt= '' Image of Doggo '' & gt;

Now, it & # 8217; s time to add CSS to the persona to do it look good.

img {height: 300px; border-radius: 50 %; mete: 12px dotted rgb (255, 85, 0);}

This CSS will apply to all the ikon of our HTML document.

Styling Classes With CSS

Now, let ’ s see how to make classes with the help of CSS. hither, we shall learn how to hold CSS rules entirely to the HTML element that get specific grade. First, let ’ s make an HTML ingredient that has some class, and so we shall apply CSS to the total stratum. Applying CSS to the entire grade will let us to manner all the elements that get the especial class.

& lt; img src= '' dog background.jpg '' alt= '' '' & gt; & lt; h2 & gt; My name is Doggo & lt; /h2 & gt; & lt; p & gt; Lorem10 & lt; /p & gt;

In this illustration, we took three different component get the like class. Once we apply CSS to the class, it will be employ to all the elements go to the same form.

.blueBorder {mete: 12px solid blueness;}

To use the class as a chooser while creating a CSS rule, we use the‘.’symbolization before compose the class gens in the CSS file.

Styling IDs with CSS

Using IDs as selector while creating CSS rules is similar to using classes as selectors. However, IDs are unique in the HTML document, and no two elements can convey the same IDs. IDs are generally utilize to elements that are present alone erstwhile in the HTML document, such as the navbar, logo, and more.

& lt; h2 & gt; Using ID as a CSS selector & lt; /h2 & gt;

Now, let ’ s create a CSS rule, using ID as a chooser.

# BrowserStack {font-size: 2rem; color: blueviolet; background-color: bisque;}

Creating Pseudo-classes With CSS

Pseudo-classes are classes that are activated when certain keywords are lend to a chooser that delineate a certain province. For illustration, the pseudo-class: hover is used to vary the state of the element when a user hovers the pointer over it.

Let ’ s guide an example when we linger over the previous icon, it vary the border colour of the image.

img: hover {border: 12px dotted blue;}

Styling HTML & lt; div & gt; element with CSS

The div tag is often used to specify the container for HTML elements. It can also be used to construction the layout of the webpage. Now, let ’ s realise how to style the div element and its nestling factor.

div {background-color: bisque; borderline: 10px solid rgb (232, 69, 69); border-radius: 2 %; height: 50vh; width: 50vh;}

How to adjust the Content, Padding, Border, & amp; Margins of an HTML Element With CSS

Before understanding how to adjust the content, padding, border, and margins of an HTML element, let ’ s understand the CSS box model. It is a box that wraps around every HTML element in the DOM.

• Content box:It is the space where the content of the HTML element appears, such as images, text, and more.
• Padding: It is the transparent area around the content of the element.
• Border: It is the box besiege the padding box. By nonpayment, the value of the border for every HTML constituent is zero; however, increasing the border value increase the infinite between the padding and the margin box.
• Margin: It is the guileless area outside the border box.

Let ’ s guide the example of the previous persona to understand how to adjust these values.

img {height: 300px; border-radius: 50 %; border: 12px dotted rgb (255, 85, 0); padding: 10px 10px 20px 20px; border: 20px 20px 15px 10px;}

How to prove a Website on Real Devices with BrowserStack Live?

BrowserStack allows you to test your website on different browser-device combination and check if your website is working as expected under real user weather. Here & # 8217; s how you can test your website on Real Devices & amp; Browsers employ BrowserStack Live:

• Step 1: Launch
• Step 2:Select the Browser-OS-Device combination on which you want to test your website.

• Step 3: Enable local testing

BrowserStack allows you test your local site. To enable BrowserStack local testing, depart a session on BrowserStack Live and look for the green indicator on the ‘ Local Testing ’ image in the toolbar tray.

If the icon is red, look for the BrowserStack local app, download it, and launch a live session from the toolbar.

• Step 4: Run the examination

Now, the terminal stride is to enter the local host URL of your site, and it will display your website on the Live Session.

Conclusion

If you ask a static website that displays textbook, images, tie, and buttons beautifully, HTML and CSS are more than plenty to create a good-looking landing page or even a business site. In this guide, you & # 8217; ve learned the core concepts of HTML and CSS, which enable you to create a beautiful website by just using HTML and CSS.

To ensure the site delivers the right user experience, it is crucial that you test it on real device and browsers. BrowserStack Live allows you to try the website under existent user conditions for exact test solution.