Tool For Designing Html Pages

How to Create HTML Pages Quickly

A wireframe is commonly used to layout content and functionality on a page that takes into account user needs and user journeys. HTML markup includes special "elements" such as <head>. <title>. <body>. <header>. <article>. <section> <div> and many others. A website that could take me days can be done in hours or even minutes.Learn what is a wireframe, how to create HTML and how to use Bootstrap to create a responsive website.

EmasDev Hacker Noon profile picture

When you are creating a website there are several factors to take in count. One is that any website today has to be easy to read on mobile and desktop versions, it has to be friendly and also you should try to make it look good.

Something that I've have learned is that a good approach to make this is first to have a wireframe.

Wireframes

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page that takes into account user needs and user journeys.

Learn what is a wireframe

Do you have the wireframe already? Now is time to create the HTML. but what is HTML?

HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.

HTML use attributes to add meta data about the tag. You can use the attribute id for identify one element and clases for identify a group of elements.

Learn HTML sintaxis, semantics, tags

CSS

CSS is a language that describes the style of an HTML document, describes how HTML elements should be displayed.

There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented. Properties are used to style and/or positioning selected HTML elements.

Media queries are used to apply styles for specific sizes of the window. Here you set the differences for mobile and desktop resolutions

CSS quick tutorial

When you finish mastering HTML & CSS you will notice that the code can turn repetitive and you can save a lot of time if you use a framework facilitating common usages like forms, tables, thumbnails images, sliders, navigation bars, and other elements. Let me tell you about bootstrap.

Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

In my experience, I learn that's a lot faster to build a responsive website combining the power of plain HTML, CSS, and bootstrap

How do I do it? When I have my wireframe into paper, digital, or in my mind I start to add the layout using the bootstrap classes taking in count small, medium, and large sizes of screen. When I finish the skeleton using bootstrap then I add content inside HTML and style it with CSS trying to reutilize classes and use proper semantic for each element.

That way a website that could take me days can be done in hours or even minutes.

But first, be sure you are comfortable with your HTML & CSS skills, otherwise, you will probably get confused.

Bootstrap classes tend to overwrite styles so be aware where you use them. I used them to create the skeleton of the page but if I want to style something specific and don't use bootstrap classes for that and use plain CSS instead.

Practice makes mastery. You will get your own coding preferences and style, but this is something that really helped me to nail my websites in top time.