Menu
Dev Bay – front-end tips
  • Front-end tips
  • Back-end tips
  • Converters
Dev Bay – front-end tips

Tag: html

FIREBASE: Add Firebase to your JavaScrpt project + Firebase CLI installation + Firebase hosting deploy

Posted on March 14, 2021July 26, 2022

I will focus in this article on important part of work when you, as front-end developer, want to make in your own project users authentication, add based on that, give them access to your back-end API in Node.js. But as you are front-end developer, you are not a specialist in security of back-end applications and…

VueJS – loading spinner component

Posted on March 11, 2021July 26, 2022

Loaders or spinners are popular way to fill empty container while its content is loading asynchronously. We use it – typically – when some content is loading, by using ajax request or something is processing in the background. We can use loading spinner in VueJS as a separate component in very nice and clean manner…

Create modal window in vanilla JavaScript

Posted on February 26, 2021July 26, 2022

Modal or popup windows are very useful elements of websites or webapps – you can display in it a notifications, additional or detailed information or it can be a “dialog window” in which user must take some decision, let’s say “Are you sure you want to delete the file?” So in general – there are…

Simple cookie banner – pure JavaScript + HTML

Posted on February 14, 2021July 25, 2022

I will show in this article how to create a simple cookie banner (cookie or GDPR consent) notification only with pure HTML, CSS and JavaScript, without any kind of JavaScript library which would support us in that task. Why it is important to build on our own a simple cookie consent banner? The most important…

Front-end basics: #4 Tables columns the same or defined width + wrap long text

Posted on February 14, 2021April 9, 2022

Tables are strange HTML elements. If we put CSS rule to whole table: width: 100%; then columns inside that will try to use space of whole table, sometimes it will fit the longest word in one column, sometimes it will just try to fit columns widths more or less proportional to the longest word in…

Front-end basics: #3 HTML5 – form validation

Posted on February 13, 2021April 9, 2022

This is quite long topic and but shortly I will describe here how to use HTML5 forms validation. You must remember that it can’t replace the validation of the data done in the back-end. HTML5 form validation is only a pre-check of data entered by user into form. You can add following attributes to your…

Front-end basics: #2 HTML – semantic elements, classes, id

Posted on February 6, 2021April 9, 2022

HTML semantic elements It is very important to use HTML elements in a proper way. If we want to list some text items, the we must create a normal list with <ul> or <ol> tags, not <p> or <div> tags with some additional CSS styles. So what semantic elements do we have in HTML. There…

Front-end basics: #1 HTML – document syntax, head content, open graph tags…

Posted on February 5, 2021April 9, 2022

If you are a beginner in front-end world or you are back-end programmer, like C#, Java, Python or SAP-ABAP and from time to time you must do some coding in HTML, CSS or JavaScript, than you are in a right place! I will show in this short course the most important parts of Front-End world,…

JavaScript: Adblock check

Posted on January 19, 2021May 17, 2022

If you are running a website, you must know how annoying are AdBlock users. You try to give the best possible content for your users for free and you want simply to earn some money by external advertising services like Google Adsense, but AdBlock users are constantly minimizing your incomes. So… JUST CHECK IF USER…

Wrap or break long word (text) in HTML table cell

Posted on October 7, 2018July 29, 2022

Tables in HTML are a quite strange elements. You can set some CSS rules, link width for columns, and some times – nothing happens. It means – all HTML table’s columns width stay the same. This happens especially when in table cell is placed a very long text – the single word (or basically, a…

CSS: Center text/image/div vertically and horizontally

Posted on August 22, 2018July 29, 2022

It is a common situation, that you want to put some element (like text, image or div) in the center (horizontally and vertically) of parent element (DIV). Setting some element in the center horizontally is usually quite easy – just put CSS rule margin: 0 auto to element or text-align: centerto its parent element (when…

CSS: Custom input file in Internet Explorer, Chrome and Firefox

Posted on May 20, 2018July 29, 2022

Input type file is always a coders nightmare. You can’t style it using common methods coming from CSS or HTML, because there are no options to style it using CSS input type file. The same situation is in all browsers, Internet Explorer, Chrome, Firefox, Edge or Opera. But there is quite easy workaround for that….

  • 1
  • 2
  • Next
©2022 Dev Bay – front-end tips | Powered by SuperbThemes & WordPress
If you continue to use this site means you accept Terms and Conditions and Privacy Policy. We use cookies to ensure that we give you the best experience on our website.OkTerms and Conditions and Privacy Policy