June 11th 2020
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.
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.
Do you have the wireframe already? Now is time to create the HTML. but what is HTML?
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.
CSS is a language that describes the style of an HTML document, describes how HTML elements should be displayed.
Media queries are used to apply styles for specific sizes of the window. Here you set the differences for mobile and desktop resolutions
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.
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.