364 Stories To Learn About Html

Let's learn about Html via these 364 free stories. They are ordered by most time reading created on HackerNoon. Visit the /Learn Repo to find the most read stories about any technology.

The HyperText Markup Language. But is it REALLY a language?

1. 3 Things to Know Before You Start HTML Coding From Scratch

HTML coding requires a specific skill set from developers for robust website development.Based on your requirement and project details, you can use any of the content management systems to get the things started. However, “if you are planning to start your website coding from scratch in HTML”, there are a few things you need to make sure before beginning to code.

2. How to Implement Glassmorphism via HTML and CSS

Check out this tutorial to learn how to create the glassmorphism effect using only HTML and CSS.

3. Resolving the Blocked a Frame with Origin "null" From Accessing a Cross-Origin Frame Error

Learn how to resolve the "blocked a frame with origin "null" from accessing a cross-origin frame error."

4. Add Responsive Background Images To Your Web Pages [A How To Guide]

Background images are a wonderful way of styling your pages. Adding background images will help you catch your readers’ attention. But this all won’t be enough if you are doing it wrong.

5. Courier Elemental: An Omni-channel Markup Language for Notifications

Courier Elemental is an omni-channel markup language for product notifications that provides a JSON-based syntax for any channel you use.

6. Nginx + Docker: How to Get Html Page Up With Local Domain Name

I will setup a very simple html page with docker and nginx.

7. 19 GitHub Repositories to Make you a 10x Developer

Invaluable pointers about repositories on GitHub that offer immense value to developers that are at the early stages of their journey.

8. The Best CSS Unit For a Responsive Design

CSS units are very important when creating a responsive website and you might wonder which one to use considering we have several CSS units. I had the same issue while working on a project, so I did some research on it. In this article, I will show you the most suitable CSS units to use for responsive design.

9. How Does the CSS Box Model Work?

Let's think a little bit more about how box models work.

10. Should I use Bootstrap or any other CSS framework?

11. Set Up Webpack To Work With Static Files

In this tutorial, you'll learn how to set up webpack to work with static files in a development environment and how to configure it for multiple use cases.

12. Semantic HTML Tags That Will Boost Your Markup Quality

It's been a long time since Hypertext Markup Language (HTML) showed up to become the basis of the web. Since that time, many things have changed, and some features of the HTML files went from desirable to negative. Thus, a cryptic markup or an obfuscated source code once considered useful things to avoid unauthorized copies, seems to be a nonsense in the fight for positioning in search engine results that we live in today.

13. Can You Get A Developer Job With HTML And CSS Only?

When I was just learning web development and only knew HTML and CSS, I wasn’t applying for any job, because most of the people told me that you can’t get a developer job with just HTML and CSS. In this article, I’ll analyze that a little bit better and maybe try to prove it wrong.

14. Bootstrap 5 Basics

The world’s most popular open-source framework used by developers with HTML, CSS, and JavaScript is ready to roll out the new release - Bootstrap 5 anytime soon!

15. Organizing an Advanced Structure for HTML Email Template

I was rebuilding a part of our markdown-to-email repository. I was not happy with how we handle templates in our generator.

16. Flexbox and CSS Grid - "The Dream Team"

If right run a search for "CSS Grid and Flexbox," you'll find mostly articles or videos with the title "CSS Grid VS Flexbox". These articles and videos assume one is better than the other. However, the truth is that both are great and one isn't better than the other.

17. 7 Useful Tips for HTML & CSS Rookies

When learning a new skill, at first you might get intimidated. That intimidation can grow to become frustration which can then lead to a lack of motivation. You must stay motivated when learning something new, especially in demanding areas like web development.

18. Flexbox Guide For Beginners

Flexboxes gives web developers control over the location of elements, and their alignment inside the container. This allows you to align the elements vertically and horizontally; change the order of their appearance; set the direction in which all the elements are laid out, and much more.

19. HTML Fundamentals: How To Get Started [Part 1]

If you are here to begin your journey to become a full-stack developer, understanding the basics of HTML will be your first stepping stone. Or if you are here to simply learn how to build an awesome website of your own, I have got your back. This could be used as an ultimate HTML cheat sheet for beginners.

20. Six tips to set up a better HTML document

My first attempt on learning HTML was by myself, through The Odin Project. It was really nice! Great readings, helpful tutorials, and fun projects. My first website was a clone from Google’s homepage, and I got very excited. After about two months of learning front-end languages, I rebuilt this first project and thought that I was already an HTML expert. I couldn’t be more wrong!

21. How to use CodePen Code Inside Your Webpage

With the world rapidly evolving by the minute, staying on top of the in-demand skills’ curve is a voluminous task. Web Development is one such skill that is almost essential to the modern developer. With a market size of about $40Bn in 2020, the need and opportunity for quality web developers are ever so evident.

22. HTML Forms And Elements And How to Use Them

Whenever dealing with user input, it is advisable to provide a structure so the process can be completed quickly and reliably, also limiting the amount of ‘free form’ input, which can be dangerous to allow in a public site. In HTML5, such a structure is achieved with the use of the form and input tags.

23. Understanding Pseudo-Class Selectors

Front-end Developers don’t just need to understand how to write CSS, they also need to know how to write it effectively and efficiently. Sometimes we work on huge projects which need optimized CSS for speed meaning, you need efficient selectors to effectively style elements without their ids or classes. This, therefore, calls for a clear understanding of selectors available. Enough of talking let’s jump right to it 😉

24. How to De-Squeeze an Image Using CSS

All images have different sizes. But most of the time we want to place an image and define dimensions by ourselves. By default, the whole image squeezed according to the given width and height. For instance, if you want to place an image with a width of 400px and a height of 500px the image will look like this:

25. I Built a Game in Vanilla JS And I Don't Know How to Code 3 Months Ago

Well, I just knew the basics and I knew as well that I wanted to learn to code, no matter what, as I explained here.

26. Indent-Rainbow Tool for Making Your Code More Readable

The article discusses the importance for using indent-rainbow to give some color to your code in HTML

27. Building a Simple Tic-Tac-Toe Game with JavaScript

In this article, we will be building a simple version of Tic Tac Toe using HTML, CSS, and JavaScript.

[28. End CSS Conflicts With

Block-Element-Modifier (BEM)](https://hackernoon.com/end-css-conflicts-with-block-element-modifier) BEM is a better way to write your CSS code to avoid CSS conflicts

29. A Simple Script to Test Whether a STUN/TURN Server is Working Properly

How to test if the STUN/TURN servers are working properly?

30. How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

This tutorial teaches you how to get the Base64 encoded data of an image displayed in the HTML image element using JavaScript.

31. 7 Websites to Inspire Your Next Web Design

As a developer or designer, it's always important to stay up-to-date on the latest trends and techniques in your field.

32. How to Protect Your WordPress Site Against DDoS Attacks

A DDoS attack is a very common cyber-attack. In this article, you will learn about how to prevent it from happening to your WordPress website.

33. Install and Configure Git on Amazon Lightsail, and Deploy Your Website in Minutes! (Freebie Inside)

We break down how to easily deploy your new website on Amazon Lightsail in less than 5 minutes. Get your code up and running and get back to doing what you want

34. 8 Web Development Notes You Might Find Useful

8 Web Development Notes You Might Find Useful

35. Making Your Links Look Pretty With CSS: Practicum Coding Bootcamp

A professional-looking site is all about the details: the colors, the graphics, the subtle elements, and the overall look and feel. In this project, I’ll show you how to make beautiful, elegant, and professional-looking links that can help your website stand out.

36. Why Password Managers Ignore Input Fields - trial:by:fire

Creating login fields that work with password managers isn't as easy as it seems.

37. How to Design the Hashnode Logo With HTML and CSS

In this article, we will learn how to recreate the Hashnode Logo using plain HTML/CSS. No JavaScript is involved.

38. WYSIWYG HTML Editors: Froala Vs. CKEditor

Froala vs CKEditor: Which is the best WYSIWYG editor?

39. 4 Simple Steps to Become a JavaScript Developer FREE

Learning JavaScript can get you into many fields of Programming; Frontend, Backend, Mobile, Web Development.

40. How to Embed Content in HTML

Embedding refers to integrating external content on your webpage like images, videos, etc. Learn the history of embedding and how to embed content on a website

41. Tailwind CSS Explained, and How to Install Version 3.0

What is Tailwind CSS? What advantages does it have over standard CSS? I show you, with examples, how to use it and how to install the latest 3.0 version.

42. Conditional API Responses for JavaScript vs. HTML Forms: An Essential Guide

Learn how to build backend APIs that support progressive enhancement by detecting if a request was submitted with HTML forms or JavaScript.

43. Important Notes For HTML CSS Beginner Developers

Every time one decides to embark on a new adventure it is inevitable to find obstacles and have a few downfalls along the way. In my case, it was more like one of those people you watch on YouTube getting hurt trying to perform some amazing trick…

44. Build Your Own Toast With HTML, CSS and JS

Toasts are extremely useful for any web application and in this post, we are going to see how to make a simple toast using HTML, CSS, and JS.

45. What it Takes to Create a Simple JavaScript Table in 2022

A few of you might still remember the post "How it feels to learn JavaScript in 2016" - It's 8 years later; a lot should have changed, shouldn't it?

46. Vertically Centering Text and HTML Elements With CSS

Learn how to vertically center text and HTML elements with CSS.

47. Understanding Web Resource Caching: Server-side

The idea behind server-side caching is to compute the resource once and serve it from the cache to all clients.

48. 21 Valuable HTML & CSS Code Snippets for Web Developers

21 Useful HTML & CSS tips for every project

49. CSS3 Media Queries for Responsive Design on Mobile Screens

50. How to Compile Angular Component To HTML String With All The Bindings

Compile Angular Component To HTML String With All The Bindings

51. How to Mail Your Holiday Cards Programmatically

Forget pens or stamps—Mail your holiday cards programmatically

52. What are Table Attributes and Their Advantages in HTML?

Read this article to know more about the table attributes and the advantages of table attributes in HTML.

53. Add Dark Mode to Your Web Page With One Line of CSS 🌓

Create dark mode with 1 line of CSS with filters, and some tips and tricks.

54. Is a Web Development Bootcamp Worth it in 2022?

Is a web development bootcamp right for you? How likely is it that it will lead to a job and is it worth the money?

55. On The Use of Semantic Elements in HTML

Often, as a developer, I’ve come to question the need for all these new and fancy Semantic HTML Elements, and as was forced to use them for a while, I decided to dig a little bit into their reason of being. In this article, I hope to present to you what I’ve found out and my conclusions from it.

56. Puppeteering HTML - The Art of Creating Optimized Web Pages

The day has finally come,... to spread awareness regarding a concept called Mutation Observer. Yes, you should know about this. Simple but still a game changer when it comes to controlling how your webpage interacts with a user.

57. Hide the Navigation Bar in Rails

Recently I was working on a project in RoR and I realized I wanted to show the navigation bar and footer on some pages and nothing on others. For example, Imagine a signup page with a navbar !!! Yuck, not only does it not look pretty but also, I have never seen any design where the login/logout pages have a navigation bar. Very few designs like that do exist, and in my opinion, are not the best.

58. A Primer on Semantic Tags and How To Use Them Properly

HTML and CSS are like a web development Savior, the only opportunity available for website development

59. Getting Started with the Neuron Language

A step-by-step guide to developing with Neuron.

60. Implement a Dynamic Breadcrumb in React/NextJS

61. How To Take Screenshots In The Browser Using JavaScript

Taking screenshots in-browser (or 'client-side') is all about tradeoffs - there's no perfect solution for every situation. Let's take a look at three different ways you can take screenshots, and then how you can use them by sending them to a server or letting the user download the image.

62. "A large group of human kind is being left behind" – Jorge Ortega, Noonie Nominee for HTML

Jorge Ortega from Berlin has been nominated for a 2020 Noonie in the software development category. Jorge is a software engineer working in the healthcare sector in Berlin, Germany.

63. Mastering File Upload: A Guide for Web Developers

How to upload a file to web application using Vely.

64. Build a Workflow that Sends Form Submissions to Discord

Using multiple apps and you want to create a smooth automation workflow between them. Learn how to do so by connecting your form response to Discord.

65. How To Create Box Element Using CSS Only

Every beginner should first start with the basics. In case of CSS, the basics are learning the box model. Before proceeding with learning any other CSS concepts, this is the one you should master first!

66. Creating a Video Background on Your Website with HTML and CSS

Learn how to create an engaging video background for your website using HTML and CSS.

67. The Power of Preprocessors (Sass)

CSS preprocessors are really strong tools to make cleaner and maintainable code. Dealing with thousands of lines of CSS, make you waste a lot of time, redundant code and difficulties in structuring the code.

68. How to Use HTML Templates for Smarter Web Development

Learn how to take a handful of static HTML files and convert them into templated files that will help you minimize errors and work more efficiently.

69. What Makes You Go: "What The Format!"

I'm a senior programmer, And when I say senior I mean it. I've started to make programs when Fox Base was the hit to rapid application development, and UI was just a matter of "user-friendly" stuff. Now the UI must not only be user-friendly but "attractive" and "Responsive" and has to be easy to maintain.

70. How To Start Learning HTML And CSS3

Attention...

71. Learn HTML & CSS: The Best FREE Online Resources for Beginners

If you're curious about getting started with web development, one of the things you will first have to learn is HTML & CSS, this is the base of web development and the first two inseparable tools you'll have to master

72. Skills That You Need to Have as Web Developer

Before I became the person that I am now (Fullstack Software Developer), I never believed in spending my precious time learning HTML and CSS. Whenever I needed to create a web page, I could go to w3schools, fetch some markup and paste it in my HTML file. I had put my total focus on back-end technologies. I could write very good and optimized algorithms and SQL queries but I could not present my data well on the front side of my applications.

73. A Simple Visual Chart to Help You Understand 'This' in Javascript

Learn how to easily find the value of this in JavaScript and use it more effectively.

74. Make a Feedback Form with PHP [A How-To Guide]

It’s time for a web project that has real-life uses.Today I’ll show you how to make a feedback form using a website, a PHP engine, and some mailing magic. Why?

75. Boost Your CSS with BEM Naming and SASS Nesting

We all have struggled with keeping our CSS classes ordered, maintainable, and more specific. SASS nesting and the BEM (Block - Element - Modifier) structure will help get us to get rid of this concern.

76. The Coding Barrier: A Simple Guide to Clearing The First Hurdle

Are you new to coding? Have you been struggling to come to grips with your first programming language? If so, allow me to illuminate an early step on your path to becoming a software developer.

77. How to Build a Website...in 1997

The web was fairly new, and digital publishing was far from the norm.A lot of information about the early web was being distributed through books.

78. Validate Form Inputs with HTML, CSS and JavaScript

Form validation is a way of making your form input secure by not letting any malicious code in your website.

79. Building a New Tab Chrome Extension with Zero Dependencies

This story will walk you through the basic steps needed to get started building a new tab Chrome Extension powered by an API without any dependencies. Check out our Tech Stories Tab extension for reference.

80. The Right Way to Utilize Webpack for Bundling a HTML Page With CSS and JS

The new HTML Bundler plugin makes Webpack setup incredibly simple, as all the configuration happens in one place.

81. How To Use VIM for Frontend Development: 2020 Edition

Why would you want to use an editor that is almost 30 years old? Because it has come to stay, and isn’t it better to learn something that will stick around? Well, also because it is damn powerful.

82. Top Lesser Known HTML 5 & CSS 3 Tips and Best Practices

There is a lot of information about different HTML/CSS features. I want to tell you about equally useful, but less popular tips for you work!

83. HTML and CSS Tips From a Newbie

About a month ago I started Microverse’s Technical Curriculum and two days ago I finished its first module, HTML and CSS.

84. Adding Responsive Website Design To Your Web Projects

85. CSS Layers Tutorial: Understanding CSS Encapsulation

In this tutorial, let's take a look at how CSS layers work. CSS layers allow us to finally do real CSS encapsulation, allowing us to import specific CSS easily.

86. What Is Local Storage In JavaScript And How To Use It

Local Storage let us save the data which is stored in the browser even when a user refreshes or closes a page. Let's know more about what is Local Storage ...

87. 5 Reasons to Learn HTML & CSS

HTML (HyperText Markup Language) is a basic tool to design web pages that complements itself with CSS (Cascading Style Sheets). So everyone who wants to join the web design world has to learn this tools, but even if you want to be a web back-end developer it would be nice to learn this, therefore we are going to list a few good reasons to do it:

88. Working With My First Web Component

My first time building a (very) simple web component.

89. 10 Frontend Projects to Take Your Coding Skills to the Next Level

Improve your front-end development skills and expand your portfolio with these 10 front-end projects. Take your coding game to the next level!

90. Introduction to CSS Media Queries

Learning web development is a journey an aspiring software engineer should consider, it involves learning, self-motivation and access to a lot of online resources, it’s also good to have a mentor.

91. Cool CSS Variable Tricks To Try

In this article, we will consider several interesting hacks that allow you to use custom properties for what would seem impossible without preprocessors or JS.

92. Organizing Data In Table: A Quick Guide

The table is the HTML way to layout the data. We can use tables to structure data in columns and rows.

93. Dicas para ter um “bom” Front End

Apresentarei aqui algumas abordagens que ajudam( ou podem ajudar) no desempenho e qualidade de seu Front End. Estas ideias foram fundamentadas em minha experiência profissional e no curso de Arquitetura de Software. Serei mais sucinto possível. Qualquer dúvida entrem contato comigo.

94. 10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

I have handpicked some awesome UI and UX projects that might give you some inspiration to create your own projects

95. How I got rid of the new sponsored Facebook posts.

Today I open <a href="https://hackernoon.com/tagged/facebook" target="_blank">Facebook</a>, and I notice something, my adblocker isn’t working.<br>As a developer, I decided to investigate, and first thing first I inspect the <a href="https://hackernoon.com/tagged/structure" target="_blank">structure</a> of these sponsored posts, to see if there’s a way to identify them so I can remove them with a script.

96. Make Your Own Text Editor in 15 Minutes: Practicum Coding Bootcamp

It’s not like there aren’t enough text editors. But consider this: with about 60 lines of code (that’s close to nothing), you can make your own secure and stable text editor. It will be pretty simple and won’t have many features, but it will be of your making, even if you barely know how to code.

97. How to Overlay Chat on an HTML Video in Fullscreen

This post explains a way to enhance the user experience by overlaying a chat view on top of a fullscreen video.

98. How to use CSS pseudo-classes :before and :after

The CSS :before and :after properties are what also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.

99. Implementing Dashboards Using Google Charts.

Implementing charts without coding.

100. Overriding Bootstrap Classes Using CSS

Are you having a hard time changing some properties of some bootstrap classes with CSS?

101. 6 Tips to Write Better CSS For Beginners

My experience with CSS first started when I was trying to style my very first non-functional ugly-looking login page. Since then, I learned a lot about writing functional well-organized CSS code. All web-developers need to be good at HTML/CSS, but they don't have to be experts.

102. How to Build Proffesional Websites Using Flexbox

103. Recreate Windows 98 With CSS

I decided to try and recreate Windows 98 using nothing else apart from CSS and HTML.

104. Web Scraping For Fun: With 'requests-html'

Web Scraping for fun: With 'requests-html'

105. How to Upload Files With HTML

This is the first post in a series all about uploading files to the web. In this post, we cover the steps needed to upload files using only HTML.

106. Using the Canvas API to Create Graphics and Animations in JavaScript

The Canvas API is a powerful feature of HTML5 that allows developers to draw graphics and animations on a web page using JavaScript.

107. Improving User Experience And Growing Leads By Building Forms Properly

Learn how to leverage form tools and make your website more user friendly

108. An Introduction to Static Site Generators

Websites can be of 2 types: static and dynamic. For static types, when user requests a file, server sends the file and user can see it. Every page is hand coded in html. In a dynamic type, When user requests, content is generated and server builds the page then sends it to the user. Generally managed by CMS like Wordpress or Joomla.

109. Using JSON Mapping to Work with APIs of Various Image Services

Using JSON Mapping to Work with APIs of Various Image Services. This approach is applicable to any other services that are similar in type of returned results.

110. How to Learn Difficult Concepts of CSS Positioning [Beginners Guide]

In recent years, jobs are shifting more towards Machine Learning(ML), Artificial Intelligence(AI) technologies, both of which need significant coding skills. With the imminent threat of job losses to ML, AI, and other emerging technologies in the near soon, there are currently fears among employees that their jobs are about to be taken by robots. Consequently, there have been a lot of career changes today than ever before where people from different backgrounds are acquiring skills in the above-mentioned technologies, data analysis, as well as learning how to code. Looking at the trend of events in today’s dynamic labor market, coding is arguably among the skills that seem to be future-proof. For this reason, despite the seeming difficulty of learning how to code for someone without a traditional computer science background, people from all walks of life are venturing into coding by the day.

111. Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇

Over the span of a year, I created 8 web app and game clones. I decided to share them, so the community can get some inspiration to build as well.

112. A Guide to Extracting All Links on a Website Using Python

In this tutorial, you’re going to learn how to extract all links from a given website or URL using BeautifulSoup and requests.

113. How To Improve Your HTML/CSS Programming Style

When I started learning HTML5 and CSS I had a lot of challenges while managing the structure of the web page and position of the elements.

114. How to Build Email Lookup Extension for Chrome

HazelBase is a powerful identity network that collects data from the internet and provides users with a wealth of information.

115. Apply This Technique To Serve HTML Via Templates With FastAPI

Serve HTML templates using fastapi

116. How Easily Create Responsive Layouts Using CSS Grid

Do you often find yourself banging your head against the wall when trying to make your page responsive? I sure did for a long time, that was before I became familiar with the grid system. I had already seen and used grid a few times but I was a little intimidated by the huge amount of properties that it has to offer, but today I’m pretty comfortable creating layouts with just CSS Grid, so in this article, I want to show you what I think are the most important properties that you can use in CSS grid to make your web page fully responsive.

117. Inverting The Colors on Your PC for Accessibility

Learn how to handle the inverted color schemes that are available on Windows computers. You may want to invert the colors for readability and accessibility.

118. React HTML Editor: It’s Not as Difficult as You Think

Web developers rarely use a single tool when working on a web project. A lot of effort goes into selecting the right mix of tools and frameworks to create a splendid final result.

119. Running Eleventy Serverless On AWS Lambda@Edge

The good news is that you can get Eleventy Serverless to run in AWS Lambdas. Even better, you can get it to run in Lambda@Edge.

120. 12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

121. Why You Should Use Semantic Elements Even If They Add No Visual Effect To Your Web Page.

Wouldn’t it be easier if for our HTML tags, we had to focus on only <div>’s and <span>’s rather than considering the various HTML5 tags like <article> and <section>? Well, allow me to share an experience that will surely tweak that thought.

122. There and Back Again: A Browser's Tale, Part 1

Using a browser to consume content is something most of us do everyday. Heck, you're doing it right now. Recently though, I was humbled by the realization that for something I do so often, I only had a vague idea of what was happening "under the hood". But rather than stew in my own shame and self-loathing, I decided to dive in to gain a better grasp on the complete end-to-end process, or life cycle, of a browser.

123. How to Create a Stock Market Price Watcher Using Ruby

For my first ever wrote article, I've decided to write about web scraping and how I built a Stock Market Watcher using Ruby and Nokogiri Gem.

124. The Power Of HTML And CSS Evolution

The HTML evolution from HTML 2 to HTML 5 has seen an enormous shift of things which has empowered web developers in tremendous ways. Committed web engineers that have been in this space long enough will tell you that these changes have made web development much easier. A release of an HTML version means a better and easier way of doing things and for those that have not been writing HTML some time, catching up with the rest without taking a course is next to impossible. With HTML 2 that was launched in 1995 all the styling and how the page looked was a responsibility of HTML.

125. I'm No Longer an HTML Beginner. What's Next? SEO Education.

I have had opportunities to participate and even organise programming bootcamps. Some of them had the purpose of just introducing basic knowledge of a given stack to beginners, whereas others were somehow advanced.

126. Model Development: Build a Predictive Machine Learning Site With React and Python (Part 1)

We will be building a machine learning model that will predict whether a candidate will or will not be hired based on his or her credentials.

127. Design Your Responsive CSS Grid

Do you have any difficulty to build responsive design?

128. Understanding innerHTML in Javascript

In Javascript, we have lots of different ways to manipulate DOM elements. Here, we take a look at one of the simplest ways to do so.

129. Flexbox Vs. CSS Grid or What Should You Use as Basic CSS Layout

Everyone who wants to become a web developer or a web designer needs to start by learning HTML and CSS. The HTML (HyperText Markup Language) is only for structured a page and CSS (Cascading Style Sheets) which adds more styles on the page. In this tutorial, we will focus on CSS.

130. Generated Maps - My Favorite Map Generators and Their Aesthetics

Grinbalt talks about map generators and his favorite maps.

131. What You Need to Know About Ruby on Rails to Start Developing Your First Application

Ruby on Rails is a framework based on Ruby programming language, it is mainly used for web development. what do you need to know about it?

132. Brief intro to Flexbox

As a web creator; either designer or developer, it’s a good weapon in your skill set for a number of reasons. Let’s see why:

133. How to Set a div to Its Content's Width in CSS

In HTML we use block elements to take up the full width of the page. These differ in properties from inline elements, which are typically found within text flow

[134. 9 Ways To Optimise Your

Site For Mobile Search](https://hackernoon.com/9-ways-to-optimise-your-site-for-mobile-search-i1q2gzy) In this day and age of smartphones, it's imperative to have a website that is mobile-friendly. Smartphones are our primary connection to the internet. Over the recent time the use of smartphones has considerably increased as compared to desktops, laptops and tablets.

135. Here is all that you need to know in order to become an expert in Gutenberg editor by WordPress

The Gutenberg Wordpress editor is a new WordPress editor which was first introduced to the world in 2017. This editor differs from the previous WordPress editor in the sense that it has many additional features. You shall be happy to know that it is actually a blessing for people who are on the non-technical side. You can create and perform edit operations on websites very easily.

136. How To Get The Most Out Of OpenGL With C++ And WASM

wasm,opengl,cpp,c++,html

137. Introducing FBSQL: Frontend Backend SQL Server

Work (secure) with your backend database within HTML

138. CSS3 Gradients: The Gradients That Are Not Really Gradients

For beginners, it is intuitively difficult to guess that the pattern above is created with CSS gradients. They will be like, “how possibly can it be gradients while all I see are solid colors?” After all, gradients are supposed to be smooth transitions between colors. That is how I used to think two months ago before I start an HTML & CSS course at Microverse.

139. I Created a Bot to Solve Wordle so I Never Have to Ever Again

I hear everyone loves Wordle, that's cool. However, I suck at this. I'm better at code than English - so I wrote code to solve it for me, everyday.

140. How to Align the <hr> Tag and Deal with its Caveats

The horizontal rule <hr> is simply a horizontal line used to signal a change in topic or a thematic break in a section of an HTML page. If you have ever tinkered with it, you may have been content with its default settings. However, many developers run into a couple of issues when trying to customize it to suit their design needs.

141. How to Create a Simple A-Frame App with Plain HTML

142. How to Insert Jump Anchors on Headings with PugJS

I'm definitely a fan of cats 😺️ in real life, but when it comes to code this reverses and I've got a preference for Pug 🐶️ For those who aren't coders: PugJS is a JavaScript template engine. It converts Pug-lang into HTML. I know there is more power in PugJS, besides the simple turning the Pug-lang into HTML. At the moment I'm not using the potential of the language - I use PugJS mostly to hold my content. Let's look at some ways to get more out of Pug I've learned about recently.

143. 5 CSS Tips and Tricks to Try in Your Next Project

Looking for inspiration on how to add a twist to your project design? Take a look at those 5 CSS techniques and have fun experimenting with some bold ideas!

144. 3 Simple Reasons to Use a CSS Preprocessor

If you haven’t used a precompiler before, you are about to fall in love. When you first learn CSS, you learn it stands for Cascading Style Sheets, which is pretty accurate. Whatever property you change twice, it will be overridden by the latest line. Because of this, CSS involves a lot of repetition and specification. Either via classes, IDs or selectors you have to show the browser exactly what you want to style. But what if I told you this could be easier? You could write a very specific CSS file without repeating so much. When I learned about this, I thought I was dreaming. When I learned how to do it, I promised myself I would never go back to simple CSS if I could help it.

145. CSS Named Colors: Everything Explained

This page provides resources for working with CSS Name Colors. It contains Named Color groups, palettes, favorites, and even fun facts.

146. How to Create UILabel With HTML Tags in UIKit and SwiftUI

A process of creating UILabel which handles HTML tags and links with normal and active states for both frameworks UIKit and SwiftUI.

147. 6 JavaScript Courses To Land Your Next High Paying Job

148. CSS Grid vs Flexbox: A critique

My first intro to positioning with grid and flexbox started with a course on CSS3. Three months after saw me in a coding boot-camp for remote software developers.

149. Why is Everybody so Confused: What Content Managers Actually Do?

If you run a search for a "content manager" on the Internet, you will not get a clear understanding of what they do and what skills they are expected to have.

150. 9 Award-Winning Websites With Stunning Creativity

This is a compiled list of some of my favorite designs that push the boundaries of possibilities in web development.

151. Creating Mouse Tracking Eyes using Javascript 👀

Today we'll be making this cute chicken follow your mouse! We will use JavaScript to make the eyes of this CSS chick follow where ever your mouse goes.

152. 21 Best Developer Portfolio Examples

21 Awesome DEV portfolios for your inspiration

153. Layout Patterns: How to Unite Layout Artists and Designers

This article will help improve the interaction between designers and layout artists to minimize errors and increase productivity. Do not take the article as the only correct approach.

154. How a Beginner can Learn HTML in 4 Hours

Are you just starting off with Web Development? Then this is your guide to learn the basic concepts behind Hypertext Markup Language (HTML) in just four hours

155. Authenticate Your Users Using Facial Recognition With FaceIO, Next.JS and Tailwind CSS

FaceIO is a facial authentication framework that can easily be integrated into any website or web app using a simple JavaScript snippet.

156. How I Started My Journey in Web Development

In my first encounter with web technologies, a lot of things were complicated to me and almost to everyone I know till now. There are a lot of questions about how a page works, how it is built and what is the logic behind it. So let’s clear out some things here for those who want to be Web developers and don’t have a clue about programming.

157. Making a Gradient Color Generator App Using JavaScript

In this article, I have shown you how to make Gradient Color Generator using JavaScript.

158. How to Optimize Your Time When Coding Frontend

I recently took some serious time to improve my skills in front-end HTML and CSS.

159. React forms with Formik and Unit Testing with react-testing-library

Setup

160. How to Make an Animated Card Using CSS Animation

Easy-to-understand HTML and CSS tutorials with lots of examples, learn How to create Animated Card in HTML and CSS with CSS Animations.

161. CSS Tricks for Creating Dynamic Web Elements

In this article, we'll explore a few CSS tricks for creating dynamic web elements that add visual interest and enhance the user experience.

162. JavaScript Enthusiast & Technical Author David Walsh Interview

David Walsh is a well-known frontend developer experienced and interested in JavaScript, HTML/5, CSS, as well as PHP and Python.

163. Share Code Snippets Like A Pro Without Using GitHub

I am happy to announce that I launched a new feature a few weeks ago in GoOnlineTools which you can use to share code snippets easily with your friends or colleagues.

164. Using HTML And CSS To Create An Image Slider

In this section, we learn how to create an image slider using HTML and CSS that would be great on the front page of your website as a visual element.

165. Top 20 CSS3 And HTML Techniques You Must Know

Today I am sharing with you this advanced CSS & HTML tutorial where we are going to go through some of the best techniques to achieve the effect that you see on

166. Simple Twitter Search Tricks for Developers

Hey, guys, there is a huge community of developers on Twitter. So, it's just essential and cool to know some Twitter search tricks. All the search tricks mention here are amazing and important for you.

167. ...So I Ended up Making DocBrowser - An HTML Template for Documentation

Recently I've been working on a couple of projects that required on-line documentation.  After looking at several existing templates and not finding any that were quite right for what was needed, I decided to take the time to build one.

168. PurgeCSS 2.0 Introduction: Remove Unused CSS From Your Project

When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc… But you will only use a small set of the framework, and a lot of unused CSS styles will be included.

169. Build a JavaScript Loan Calculator With HTML & CSS

170. Making your own personal website from scratch

An introduction to HTML and CSS - the foundation and styling for any website

171. 4 ways CSS :has() can make your HTML forms even better

Learn how the CSS :has() pseudo-class can improve HTML forms through validation hints, conditional content, fancier designs, and more.

172. CSS Positions: The Struggle is OVER

I remember when I started learning CSS, I was always confused about the CSS position property. Not knowing when to use the top, bottom, left or right attribute. Or even when I use them I don’t get my desired output.

173. PHP Web Scraping Using Goutte

When you talk about web scraping, PHP is the last thing most people think about.

174. How Quake III Helped Me Debug Strawberry Filled Kiełbasa

The famous story about Quake, kiełbasa, pierogi, debugging and the birth of a new career in a small city in the middle of Poland that you were looking for

175. CSS Layout Basics: HTML5 & CSS3 Elements Positioning

HTML5 & CSS3 : Positioning of Elements

176. You Need to Know What is erb in Rails and How to Master it

One of the first things that made me uncomfortable about learning Rails was taking a look at the views. I found some weird files with some weird syntax. Their name was something like ‘name.html.erb’ and I was like what? Why does this file which seems to be an HTML file with kind of HTML syntax has a .erb extension after the .html extension?

177. Useful Tools To Make Working on HTML and CSS Easier

Programmers and Developers are lazy people, they always want to make their jobs easy. They do not want manual and repetitive tasks. They want to automate tasks.

178. A Performance Optimization of Flutter WebView

This article records a performance optimization of the WebView based Flutter data visualization library: echarts_flutter .

179. Best Practice in CSS: Organisation and Naming Conventions

I've been writing code for over three years. I have always asked myself about the good practices and how I could make my code more readable, understandable, easy to maintain and to be handled by other developers.

180. Introducing Neuron Lang: A New Language For Frontend Development

HTML, CSS, and JavaScript are combined in this elegant language.

181. How to Clear Floats using clear-float property

A little while ago we wrote about the float property. So, now is a good time to explain the clear property.

182. An Introduction To Web Monetization API

A content drop about how to receive payments, where to use, and what is the Web Monetization API 💰

183. How To Write Semantic HTML

As a Microverse Student in the last time, I have been struggling with some HTML and CSS projects. They challenged me to learn new features of these technologies all the time. My projects were made gradually trying to follow good practices but none was as striking for me as the use of semantic HTML.

184. How to Achieve Column Reordering with Bootstrap 4

Responsive web pages are websites that adjust to different screen sizes. Audi.com, in 2001 was one of the websites to adopt this design.

185. Take Control of Your Forms with HTML5

‘ One should never trust data coming from the user side ’.

186. A Minimalistic Web Portfolio for all developers 😎

A small minimal Portfolio for developers who are tiring of thinking about creating their new portfolio website. Due to the Pandemic outbreaks I've been spending a lot of time at home (as we all are), so I was thinking of creating a weekend fun project. While searching for ideas I came up with this. So that you can pull/fork this repo and use it to showcase their talents.

187. HTML Elements for Code Newbies

New developers should know HTML Elements. Here's a helpful guide on what you need to know.

188. Web Development Needs Help: How We Can Improve HTML and CSS

Web development now is tainted by the old and inadequate structures of HTML and CSS and it needs help.

189. Introducing a New, Lightweight WYSIWYG HTML Editor That Fits Any Technology Framework

190. Why a Majority of Startups Prefer ReactJS

Just like progress in other tech fields, front-end web development is advancing too. Let's try and understand why ReactJS development is a startup favorite?

191. 7+ Best Courses to Learn Web Development for Beginners

Hello all, if you are thinking to learn about Web Development or want to become a web developer then you have come to the right place. In this article, I am going to share some of the best online courses you can take to learn Web development in depth.

192. How to Export HTML Tables into PDF Documents Using JavaScript

Web apps that contain tables, charts, and graphs often include an option to export the data as a PDF. Have you ever wondered, as a user,  what's going on under the hood when you click that button?

193. Basic HTML Tags Classification

An HTML tag is a special word or letter surrounded by angle brackets, < and >. HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content. Most tags must have two parts, an opening and a closing part.

194. The Role of Front-End Development in Website Design

A bad front-end development will affect your business, as well as your customer base. The first impression of a website is key.

195. A Very Early Introduction to Building your Own Web App With Code

Here is a brief guide to getting started with coding and building your website online.

196. When and How to Effectively Use Bootstrap

In my journey to becoming a Software Developer, I've seen so many frameworks being implemented and one of them is Bootstrap. As efficient as it is though, so many developers have a strong dislike towards it, myself included. Here's when and how to use it.

197. Adding the notification component to an Angular application

Application example built with Angular 14 and adding the notification component using the ngx-toastr library.

198. Understanding CSS Margin and Padding With Simple Analogies

Photo by Inside Weather on Unsplash

199. Best Way to Make Your Design Communicate

Visual hierarchy is one of the most important principles behind effective web design. I say this because the goal of a web page is to communicate, and that is essentially the same goal of good visual design.

200. How to Build a Static HTML Blog with squido in 10 Minutes

Static HTML websites are super fast, easy to develop, more secure and dirt cheap to host. Build a static HTML blog in 10 minutes with squido.

201. HTML Structure and the Importance of Elements as Containers

Probably the most important concept you can learn about HTML is its structure in the form of containers.

202. Need Inspiration? Here are 5 Spectacular Online 3D Globe Projects to Do Just That

The 3D model of the Earth is perfect for designing creative web projects cause it's easy to display data on it. Thanks to many data API's it's easy to access data like population, countries, cities, geo-coordinates, health data, education, etc. Here I have compiled my favorite 3D Globe projects.

203. Simplify CSS With a Few Easy Rules

Maintaining CSS may be a real problem when developing a project.

204. How to Become a Software Developer — An Early Introduction

STEP 1

205. How CSS Position Sticky Really Works: Tips For Beginners

PH: Danny Meneses from Pexels.

206. HTML5 And CSS3: Tidbits Galore

You might be aware that each language in web development has a very specific purpose, i.e HTML is used to structure the web page and also have other metadata, while CSS is used to design the web page and creating a responsive layout, and JavaScript is usually used to add interactivity, functionality and much more.

207. How I Build a Skate Game On Christmas Hackathon

Skateboard game made with CSS

208. Introduction to CSS line-height Property

The CSS property line-height defines the amount of space used for lines, most commonly in the text.

209. How to Boost Efficiency in Designing HTML Pages

When you start your journey in Front-end Development, as you are introduced to HTML and CSS preferably in a project-based learning system, everything about it is very interesting.

210. 10 CSS Tips To Make Your Site Faster

Let's see some useful CSS tips to put in place that will improve the speed of your website and improve the user experience while maintaining your design.

211. How Elements Positioned and Behave on the Web Page

It is interesting to everyone who started his journey in web development positioning element through in single display with tons of properties. It comes a time that all elements start behaving itself not in a way we want.

212. How to Build a Chrome Extension That Makes API calls

213. HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started.

214. Using Atom Text Editor As IDE

Let's set up your computer so it's ready to code.

215. How To Build a Realtime Photoshop 🎨

This weekend we are going to make something amazing, we are going to re-create Photoshop!

216. How to Light the Fire and Become a Web Developer

I realized I wanted to leave the air force but had no serious civilian qualifications.

217. CSS Animation Basics

CSS Animations enable the front-end developer to animate HTML elements which in turn give your website a fun and cool look. In this post, we will take a deep dive into how to use animations in CSS. When you are done, you should have a good understanding of the topic. Try typing the code into your code editor and see how it works. This will help the concepts sink in deeper. Now let us take a look at this example.

218. Top 10 CSS Performance Tips

Hi everyone! There are a lot of tips and tricks about CSS styling. But not in this article. Today I want to talk about how to use CSS more efficiently and make

219. Learning CSS Grid Layout: Basic Concepts with Example

Cascading Style Sheet (CSS) Grid Layouts is the most important and powerful layout system available in CSS. It’s built inside a two-dimensional system, meaning it can handle both columns and rows. You can build a true grid layout by applying CSS rules both to the grid element and the parent element.

220. How Your HTML5 Code Can Impress Google's Robots

You and HTML5 can get the attention of Google’s robots. To do it you can write the coding strategically following some rules of the HTML’s semantic. It is easy and there are a lot of advantages to making it.

221. Winning At Web Accessibility in 2021 With These Tools for Developers

The quality of the tools you use defines the speed with which you can diagnose and resolve problems.

222. How to Start With CSS Displaying Basic Elements in HTML

This article helps you to start in CSS3, explaining the basics of how to display elements in an HTML document.

223. What Makes Next.js so Good?

224. How To Use CSS Sprites: An Ingenious Way of Reducing Page Loading time

Imagine you have six images on your home page. You might proceed with loading the images separately. After all, they are six different images and to be used in six different places. And you might be right ... from your perspective. You also know that loading six different images will force the browser to make six different HTTP requests to the server. And each time it makes a request, a few milliseconds gets added to your page loading time. That's bad news if you have fifty images.

225. HTML, CSS and JavaScript Explained Simply

Learning web development includes understanding & dealing with terms like CSS, Javascript, & HTML. This article aims to bring you up to speed with this concept.

226. Build and launch a custom personal website in 15 minutes

Best part — the only thing you’ll be using is your web browser

227. How to use Publish-Subscribe Pattern with JavaScript

The result of the next pen shows the case where I'll use the Publish/Subscribe pattern. Every time you click on the Event button a square is added and a message with the number of squares is displayed.

228. Invisible Barriers That Prevent You From Learning Web Development and How to Break Through Them

The hidden cost of frustrating, demotivating web development MOOCs!

229. Why Choose Designer Multiselect Over Native Select?

Those layout designers who create signup or feedback forms will surely face the problem of displaying multiple items of a single selection, i.e. multiselect. Unfortunately, not all <select> tag elements can be styled out of the box as designers would like to. In this small tutorial, I would like to share my experience in solving this problem based on my knowledge of CSS and vanilla JS.

230. CSS Grid Layout: How It Works

What is the "Grid" in CSS? How can I use "Grid" in CSS? Read this article by Nima Owji to learn how to use grid layout in CSS!

231. How To Add a Favicon to Your Site

Adding a Favicon to Your Site

232. HTML5 and CSS3 Features That Will Help You As a Developer

Do you think HMTL and CSS are easy to learn and they don’t need so much time to hone?. As a Jr. developer, it is so easy to think that HTML and CSS are not a big deal or something that you must worry too much about because they are not programming languages at all.

233. Quick Introduction to Responsive Web Design For Beginners

Responsive web design is a design that adjusts and adapts to any viewport (user’s visible area of the web page) rather than only a specific viewport, irrespective of the visualization device.

234. A CSS Property That Every Web Designer must Know

I am Javier, a guy starting in this world of web development. My background is the filmmaking business, especially the video edition. I am writing this article to help guys like me that are learning web development or everyone that considers the design or the “look” of a webpage one of their passions. Back in my days of video-editor, one cool thing that I found in the software video and design editors was the ability to blend two images or more in order to display better. So if you just put an image in a given color background you can start to discover how the different values can make interesting looks.

235. How to add a contact form to a static website

This post was originally published on Codementor.

236. How To Master CSS Positioning Fundamentals?

It is the received wisdom among software developers, as anyone who has so much as had a conversation with one can testify, that the best way to make progress in learning to programme is to “learn by doing”. I am not here to contest that.

237. 20 Best Courses from Udemy Free Resource Center to Learn Programming and Coding

Hello guys, after Pluralsight made their 7000+ expert-led online courses for free for one month, now Udemy has also launched the "Udemy FREE Resource Center" where you find a collection of Udemy's best free content from some of their best instructors.

238. The Biggest Trends In HTML Code Editors We’ve Seen This Year

239. HTML Fundamentals: Tables And Lists [Part 2]

we will be looking at how we can arrange the content on the web page.

240. Lightweight CSS Animations with Figma & Figmotion

How web designers and developers can collaborate in Figma to create lightweight animations in CSS, HTML, and SVGs.

241. How to Create a Simple Web Dashboard for Efficient Data Analytics

Dashboard with different visualizations allows you to compare data and show changes and tendencies. In this tutorial I wil explain why and how to build one.

242. A Simple Introduction to CSS Animation

Moving objects attract more attention and add a flavor to the page, CSS animation is a feature in CSS that allows animating DOM element without using any javascript or flash plugins, in this article, we will introduce all the properties related to animations.

243. 12 Best Basic HTML Snippets to Use Instead of Complex Libraries

This article is a heads up that you can do a lot with just vanilla HTML and a bit of CSS if you want it to look pretty. Here's how...

244. Save time using SASS to create classes with variations

Last week, I had a problem.

245. What I Wish I Knew Before Building with Bootstrap

I don’t know if it’s just me and the way I was raised, but I had the wacky idea that Bootstrap was supposed to make things easier for building websites. It turns out it doesn’t. At least not if you’re new to it.

246. How to Make a Responsive Mega Menu in HTML CSS

In this tutorial, we will learn how to create a mega-menu in HTML/CSS, also called a "dropdown menu".

247. How I Created a Landing page in Less than 100 lines of Code

Recently I bought a personal domain and decided to build a quick landing page to not leave it empty while I work on my portfolio. I thought some of you might find it useful, so I decided to make a tutorial on it.

248. The Clone Wars of HTML/CSS

Honestly, it is quite common to see people push hard and push through just to move on.  But at what cost? I mean one thing is to be too hung up on reading everything that MDN has to offer (the countless and countless pages of documentation) yet another thing is to mindlessly type things until they semi work.

249. HTML + CSS Practice Project: Website Slicing

Here we will leave JS challenges for later, and we will focus on integrating the visual part of the frontend in a simple project.

250. Understanding CSS Specificity Rules

In Cascading Style Sheet, CSS, there is a property called specificity. CSS Specificity is the process of determining the most relevant set of CSS property values or styles browsers will apply to an element especially when there is a conflicting set of rules.

251. You Can Make Your Own Task Manager in 10 minutes: Practicum Coding Bootcamp

There are many task managing apps out there, but it’s always exciting to make an app of your own. In this walkthrough, I’ll show you how to write a simple task-managing app that will work in your browser. In later episodes, I’ll show you how to upgrade this task manager to include more features.

This is a very basic walkthrough, aimed at beginners. If you are experienced in HTML and JavaScript, don’t expect much from it. But hey, one step at a time is the best way to learn.

252. Prevent Reverse Tabnabbing Attacks With Proper noopener, noreferrer, and nofollow Attribution

Now and then, when you click on a link on a website, the link will be opened in a new tab, but the old tab will also be redirected to some other phishing website where it asks you to login or starts downloading some malware to your device. In this blog post, I will explain how something like this is achieved, and how to easily prevent this from happening in your own websites.

253. How To Pack Javascript Code with Webpack

What is Webpack?

Webpack is a module bundler for JavaScript as well as HTML applications. It grabs modular pieces of code compartmentalized in folders. Followed by reconstituting them into a compiled form. Then it's read as a whole by the application. You must be thinking, "Why break up a working code?" As your code scales, so does its complexity. Finding a correlation between each block becomes a challenge.

254. How to Optimize Your Blog Posts For Social Media Previews

Have you ever wondered how Twitter automatically shows the preview of the link in a tweet that you post. How does twitter know what image to use and what part of website content to use for generating title and description? It must somehow know exactly what image to show, and what title and description to use.

255. The Issues with JAMStack: You Might Want To Get a Backend

Great applications deserve great marketing sites, which is why we’re always on the lookout for new developments and trends in content management systems (CMSs).

256. How To Create A "Night Mode" For Your Website

Are you interested in learning how to create a simple night mode for your website? In this article, I use jQuery and Bootstrap 5.

257. 6 Common HTML and CSS Interview Question and Answers

In this article, I will present some of the most frequent questions and answers made by interviewers. There will be questions about HTML & CSS. If you like reading, go ahead. If you don’t, you can still watch myself answering the same questions in this YouTube playlist I prepared.

258. How to Use Clip-Path CSS Property

I was given a task to replicate the newsweek website and I thought that would be a walk in the park until I started working on the project. My focus will be on the red/orange background of the header used on that website, as shown on the image above and how I was able to come up with the design using the clip-path property in CSS3.

259. My Web Development Journey With Microverse

HTML and CSS are two of the most popular tools used to create front-end designs for websites. As simple as they may seem from the outside looking in, they can prove to be quite a challenge at times, pulling one into a black hole of design thinking.

260. 28 Creative 404 Pages for Your Inspiration

Landing on a default, un-styled ‘page not found’ with no further info and links can be really annoying. A creative and clever error page goes a long way in turning your visitor’s frown into a smile. 😉

261. How to Build a Responsive Page Using Bootstrap

One of my every project challenge was to build a responsive page with media querys and a few knowledge about how it works, but after it, Bootstrap came to me...

262. Learn To Code in 30 Days: My Personal Journey

Learning how to code is something I’ve thought about doing for some time but always found an excuse for putting it off. Then the pandemic happened, flipping my schedule upside-down. If I was serious about wanting to learn, then this was the perfect opportunity. It was time for my next 30-day challenge.

263. HTML & CSS: How to Gain Programming Confidence as a Beginner?

Hint to Understanding Proper Element Positioning

264. 6 Best HTML Programming Books Ranked by Review Score

Topping off the 6 best HTML programming books based on Amazon reviews is HTML & CSS: Design and Build Websites.

265. How to Create a Stock Market Price Watcher Using Ruby

For my first ever wrote article, I've decided to write about web scraping and how I built a Stock Market Watcher using Ruby and Nokogiri Gem.

266. How To Create Flame Animation Using JS and CSS

Simple CSS fire animation of using HTML CSS.

267. Is Tech Making HTML Editors Better Or Worse?

Technology shapes our lives. It provides us with conveniences and benefits. As technology advances, the luxuries it provides us with usually do too.

268. Understanding (And Making Your Life Easier) With Bootstrap

So a few days ago, I had to make a project with Bootstrap, I had never worked with it in the past and neither with Grid. It was really difficult for me, and when I decided to find information, I got a hard time looking for something that I can actually understand and use. So in that day, I told myself: if I get to understand this, I will write about it so if someone its a beginner like I was, they don’t have a hard time as I did. So here is: my first article about the basic information to get to understand Bootstrap and don’t die, (or in my case panic) trying.

269. 5 VSCode Quick Tips to Boost Your HTML Writing

When I started writing HTML and CSS documents, I found out that one of the best ways to practice building websites was cloning some of them. I spent a lot of time dealing with monstrous HTML documents with tags full of texts and links, which sometimes was not the most exciting experience. Since then, I've managed to look for some time-savers that could improve my efficiency inside VSCode, and here are some that I found:

1. Selecting blocks of text

270. How to Include Bootstrap in Your Next Web Development Project

First of all, web development is an interesting discipline because things are always changing, evolving, and improving. But, as a beginner to front end web development, the constant change could be a barrier to your learning and motivation.

271. Take these Steps To Change Font In WordPress Text Editor

272. Rich Text Editor: How To Choose

React Rich Text Editors can are vital in developing a website due to their ability to quickly edit Javascript. These are the features to consider between them.

273. 12-Step Checklist for Releasing a Website

Releasing a website is a stressful and important moment. And you want to make sure everything is ready.

274. Avoid Headaches by Understanding CSS Specificity

Among all the concepts you have to understand in CSS, Specificity is a tricky one; and, it may be the reason why that font-size is not being applied to the element you're trying to target.

275. A Guide to Scraping HTML Tables with Pandas and BeautifulSoup

How to not get stuck when collecting tabular data from the internet.

276. Creating a Powerful Excel-Inspired Grid Framework with SASS

(Photo by Hilary Susan Osman from Pexels)

277. An Anthology of Essential Frontend Resources to get you through 2019

Frontend development has taken the world by storm in the last decade with extreme progress in all web technologies (HTML, CSS, JS, etc.) sponsored and led by the biggest software companies in the world. It is arguably one of the highest paid, the most in-demand and satisfying job in the software industry for quite some time. This is the best time to learn it if you haven’t started already 😃!

278. How To Scrape Wikipedia By Using Puppeteer and Nodejs

Scraping Wikipedia for data using Puppeteer and Node

279. 10 Cool Data Table Libraries with Advanced Features

JavaScript is on the list of requirements for a position as a web developer in any IT company at the moment. It is hard to imagine building modern web applications without JavaScript. This programming language provides IT specialists with an effective and relatively easy way to create interactive applications able to comply with the tastes of any picky customer. The choice of the JS libraries and frameworks adds dedicated followers to this language.

280. Introduction to Pseudo-Class Selectors

What we will cover in this article more specifically is the subject of pseudo-classes! First of all, what pseudo-classes are, you may ask. They are keyword in CSS language that lets you interact with external factors or events, like moving the mouse over an element or visiting a link. We will not cover here all the pseudo-classes but after reading this article you will get the idea! The main idea behind this pseudo-classes is that they expose events in CSS language witch means that is easier to interact with HTML element on web pages.

281. How I Learned HTML5 CSS3 in 446 Hours with 8 Projects

For some people, the title could look funny or interesting. But it is true because I made that trip, I spent 9 weeks working hard learning HTML and CSS.

282. Tutorial: How To Use CSS Position Property

I am a student that recently commenced studying HTML and CSS. I was eager to learn how to apply the styles in the way I see foremost visually appealing as today’s standards.

283. How to Design a Grid-based Framework Using the CSS Float Property

Basic grid-based framework

284. How to Create a 3D Art Model with CSS3 [Step-by-Step Guide]

Have you ever come across a rather complex 3D creation while surfing the internet and your curiosity leads you to click on it to see if it has been rendered in Flash? These days, the features that come with modern browsers give you the power to create amazing projects without needing an external animating tool.

285. Writing CSS Rules for a Better Relationship with Stickler CI

When you start this way of learning the fundamentals of HTML and CSS you can find a lot of web sites that can help you to know HTML semantic tags, how to name classes, how to write rules for tags, events, animations... and even how to use more advanced models as FlexBox and CSS grid.

286. A Complete Introduction to TailwindCSS

This blog discusses CSS prerequisites and use cases for Tailwind CSS. It is helpful for anyone who's getting started with Tailwind CSS.

287. Why I Fell In Love With Bootstrap

The first time I came across bootstrap was when I was working on the front-end libraries curriculum on freeCodeCamp. I learned that it was a powerful framework that can be used to easily build responsive website designs. I didn’t understand how bootstrap worked under the hood, all I knew then was that when you do something like add a class of "img-responsive" to an image, it resizes itself when the screen size changes. Or that when you add a class of “btn btn-default” to a button element, it automatically styles the button and gives it color.

288. Coach Gandalf Guides You on How to Become a Web Developer in 2022

I'll be discussing why you shouldn't trust new year's resolutions, how overrated motivation is, tools to help you succeed as a web developer in 2022.

289. You should shadow your dream job to launch your dream career

A blog post all about how I went on a job shadow with a web developer and software developer. I learned about APIS, javascript, and object oriented programming.

290. The Magic of Component-based Frontend Development

291. What Are We Missing at Learning CSS

Let’s start with a question, what is CSS?

292. What You Don't Know About CSS

Since I've been learning CSS, I have met a lot of programmers saying or claiming that CSS is not a hard language or it is not a programming language. However it is or not, it's clear that without CSS, the world of web development wouldn't be the same.

293. How To Type HTML & CSS Effectively

I wouldn’t like to carry out the same long and boring known task after somebody told me that there is a better and shorter way of doing the same.

294. How To Convert HTML to Markdown with a Serverless Function

Outlined below is the setup for a AWS lambda function which combines fetching the HTML for a URL, stripping it back to just the essential article content, and then converting it to Markdown. To deploy it you’ll need an AWS account, and to have the serverless framework installed.

295. How to Make Buttons Stand Out with CSS

The first thing you’ll notice when you add a button to your website is that you’ve taken a trip back in time to 1999. The default button style is very old-fashioned and I can’t think of a use case where you’d want to keep it as it is. The good news is that there are loads of CSS styles that can make your buttons pop.

296. HTML for Beginners: Basics to Start From

In this article, we’re going to dive into the basics of HTML. We’ll explain what it is and what are the 3 basic components to create an HTML. Let’s go!

297. How to Get Started With CSS Flexbox

This little introduction to CSS Flexbox should help you to get a first impression and give you some examples to play around with. From here you will be able to integrate this powerful framework into your own projects.

298. Building Your First Website In Under 30 Days

Have you ever thought to start building your first website? Are you trying to acquire a new skills which shows your creativity? or are you feeling curious, how tech developers and entrepreneurs are building modern web apps and changing the world ?

299. 4 Options to Add a Custom Theme for Frontend Applications

Take a closer look at various options for how we can allow users to choose from various themes, as well as customize them for their needs.

300. How I Wrote 10, 000 LOC in just one Month

Ever scrolled your twitter feed and wondered how everything works. Writing a tweet, refreshing the feed, deleting a tweet, and editing tweets. Does twitter really have an edit feature? That's a topic for another day. Over the past years, I have always felt the urge to know all about software development.

301. SAINE is Mathematically One of the Best WORDLE Starting Words - Here's Why

How SAINE is arguably the best wordle starting word. Proven by math and statistics. Beating out common advice such as CRANE, and ADEPT

302. JavaScript DOM Manipulation in Details

To have a solid understanding of the structure of an HTML page. Let’s add a basic code.

303. 9 Tips and Best Practices for HTML 5

Read this article to find out the most common HTM5 best practices.

304. The Essential HTML Basics Guide for Beginners

Coming as a beginner into HTML can be difficult, especially for the amount of default properties and behaviors that are in place and nobody tells you about it. In this article, I am going to show you how these things work, how you can modify their default behavior, and help you get a better understanding of HTML that will be useful any time there is a roadblock in the rendering of your page.

305. Comparisons and Metaphors in Web Development

When I started studying Web-Development in late 2019, I was overwhelmed by so much information, and without a technical background it is easy to get discouraged or confused, today I want to give my personal opinions with some examples that will be useful to people without a CS degree or other background in the IT field.

306. Headless WordPress Checklist: What Do You Need to Consider Before Migrating?

Check out the best practices and checklist for Headless WordPress. Learn why you should migrate to Headless WordPress.

307. How to Use HTML to Improve Accessibility for Low-Vision Users

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web

308. Understanding How CSS3 Aspect-Ratio Property Works

This content drop presents the new aspect-ratio property on CSS.

309. How To Understand HTML and CSS For Beginners

1. Introduction

310. Making your Password Generator: Practicum Coding Bootamp [Step-By-Step Guide]

Let’s make something!

311. How To Build an Absurdly Backwards Compatible Website

Let’s face it: the internet is broken.

312. How to Create Proper Layout, or What is So Bad About CSS Frameworks?

The advantages of a marvelous layout, semantic markup, and separation of content from design have been already described hundreds of times. Still, there are developers who do not follow the concept of working with HTML and CSS, so they write such terrible things in the code such as:

313. Learning to Build a Car Using Chrome's Inspect Feature

When my papa bought a new car, I got too excited. We went for a long drive and visited some religious places. Visiting temples and getting our new vehicle worshipped and blessed is a ritual in every Indian home. We were feeling in need of some snacks and on hard request, the car took a halt at a nearby restaurant. There lived Sharma uncle a long-lasting friend of papa, a garage owner. He joined us and blessed us for our bright academic records, a very Indian ritual on meeting elderly personalities!

314. 6 Biggest Mistakes With The CSS Grid

Introduction

315. Here’s All You Need to Know About the CSS Box Model

The CSS box model is a term thrown around in CSS with very little context but is probably the most fundamental thing you can know in CSS.

316. Everything You Need to Know About Backgrounds in CSS

One of the most useful features of CSS is the ability to add backgrounds to your HTML elements.

317. A Quick Introduction to the Resize Observer API

The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.

318. The Teacher and Enforcer in Style Linters and HTML Validators

I have been a software developer for one month and slightly over three weeks now and there are a couple of tools, tricks and techniques which I did not know of before but have appreciated so far. Some of those that stand out for me are the style linters and the HTML validators. To start with, my conscience is bemused at the imagination of how someone could even conceptualize such ideas. Well, I guess I will be conceptualizing similar ideas a while later.

319. Get Rid Of Mistakes In Coding Once And For All: Useful Tips For Beginners

Here in this post, I am going to tell you about the 10 common mistakes you will make or who knows you're still making as a beginner and will clear them all.

320. Understanding Web Standard - Shadow DOM and Custom HTML Elements

Getting Familiar with New Web Standards

321. Faster HTML And CSS Creation with Emmet

Emmet is a tool designed to help developers save time while writing HTML and CSS by encapsulating pieces of code and loading them with the help of easy shortcuts, here's an example:

322. How To Clone Hackernoon HTML Page

Website cloning is a testament to every novice web developer. A pure function-less website clone is a great way to solidify a programmer's HTML and CSS skills. However, it could be horrified at the start. In this article, I'm going to share with you how to clone this webpage, yes, this article itself.

323. Ruby on Rails Facebook Implementation: SpyBook

Social Media Website Live Demo: SpyBook

324. 5 Simple Tips to Keep Your CSS Stylesheets Nice and Clean

“For every minute spent organizing an hour is earned”- Benjamin Franklin

325. Styling HTML Using CSS: A Beginner's Guide

Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

326. Let’s Make a Pie By Using CSS Gradients

Nowadays, web pages use CSS and CSS provides a lot of chances to make different things. Gradients and a pie done by using gradients are some example of them.

327. Semantic HTML: What, Why, and How

There are around 100 semantic HTML elements - don't build what HTML hands to you on a silver platter.

328. How To Make Your Page Look Alive with CSS Transitions

Going Through HTML & CSS courses, I learned A LOT, but surprisingly, I never come across the Transition property up until recently, and I've been loving it ever since.

329. Creating Composite Node of a Graph using D3.js

Lately I have been using D3 for visualizing data for a React project and it got my attention for a while. I was especially interested as to the scope of this very powerful tool that has a great problem solving ability range related to any kind of data visualization.

330. Learn How To Create HTML Forms Like A Pro

One of the main drivers of business success is good customer relations. Companies must listen to their customers and take appropriate action. Many online businesses collect feedback from their customers through online forms.

331. CSS Underdog Rule: position: sticky;

PH: Hitarth Jadhav from Pexels

332. Evolution of Web Design: From HTML to HTML5

When most people think about evolution, what comes to mind is “the big bang”, usually describing it as way different types of living organisms developed from earlier forms during the history of the earth. Technology has also evolved over time, there are many technologies, major ones being web development, computer systems, software engineering, artificial intelligence and many more. The main focus of this article is on the evolution of Web Design. A deeper dive into HTML which is the backbone of every web page document that you see on the internet today. Yes, other supplements exist e.g. CSS, thats adds design for websites, but without HTML, displaying a webpage document is not possible.

333. In North Korea, Front End Devs Face Platform Inconsistencies That You Might Not Know Even Existed

You’re a North Korean engineer who’s been selected to develop a new government project. It’s an HTML form, which North Korean political leaders will fill in for [REDACTED] purposes.

334. What if We Add Some CSS Animations to Our Page?

Have you ever watched the amazing animations of Tony Stark’s supercomputer? If so, do you remember when he was using his computer to build his armor suits or create a new element? It was amazing to see the smooth transitions in the UI (Jarvis) when he played with it. And what about if I tell you that now we can recreate some of these animations only with HTML and CSS.

335. Why You Should Use CSS Variables [Beginners Guide]

Introduction

336. How To Use HTML Semantics like a HERO

Content

337. Create Your Own Full Page Slider Implementation with JQuery [Tutorial]

In this tutorial you will learn how to create a simple mouse wheel scroller. The following solution is very basic. It can be greatly improved, but it just an example of how fast it can be implemented or a good starting point to create your own slider.

338. Grid vs. Flexbox: An Introduction to the Useless Battle

Through time has been common to compare things that can do similar functions, for the sake of electing a champion, something that is better, be it reason "y" or reason "x", and specially to be on the "right" side. If you think that you haven't done something like that maybe these topics will remind you of something, "XBOX or PlayStation?", "Android or iOS?", "Java or .Net?" and the list can go on, sometimes making a fuss about which one is better is pointless.

339. Making the Snake Game in your Browser: Practicum Coding Bootcamp

Want to make your own classic arcade game?

340. The Evolution of The Web as We Know It

Website layouts change all the time, and there are more ways than ever to style a layout, with many frameworks available to help simplify the code, whilst keeping sites looking fancy.

341. The Most Interesting Vue 3 Bootstrap Admin Themes

Vue is quickly growing in popularity among developers and Vue admin templates and themes made with help of Bootstrap is its most popular category.

342. Your Ultimate Guide On HTML Tags 🔥

HTML Cheatsheet For All Developers by Garvit Motwani

343. How Project-Based Learning Helping Me To Learn Web Development

Learning a new skill can be challenging. But as humans, we always strive for better ways to be more effective and productive. Coding means using a programming language to get the computer to behave as desired. To a tech geek, that sounds easy or doable, but to a code newbie like myself, I barely see how that can be possible.

344. I Built A Photo Gallery with CSS Animation: Here’s what I learned

The vanilla CSS(without any external JavaScript and CSS libraries) allows animation of HTML elements using CSS properties. This is very powerful and quite simple to learn and use.

345. Building A Parallax Scrolling Endless Walking Animation using HTML and CSS [A Step-by Step Guide]

I had to make a website for a conference (a fictional one), following certain guidelines and design. One of these guidelines included using a CSS background-image with some color overlay.

346. CSS Basics For Noobs

Cascading style sheets ordinarily known as CSS is a language that illustrates how the elements of the HTML are to be presented on any media. CSS was proposed by Hakon Wium Lie on October 10, 1994. Several other style sheet languages were proposed at about the same time for the web. But the first one to be introduced was CSS1 and it was introduced in 1996.

347. Tracking the Evolution of UX Through Google's Homepage, Over the Years

Google is well know for its minimal design of its homepage, but has it always been this way?

348. Top 5 Free HTML and CSS Online Training Courses for Beginners

HTML and CSS are two pillars of web development, they are used to create web pages you see every day. HTML provides the structure to your web page and CSS provides them the style to look better. If you want to become a front-end web developer or web designer then a good knowledge of HTML and CSS is a must.

349. How to Align the <hr> Tag and Deal with its Caveats

The horizontal rule <hr> is simply a horizontal line used to signal a change in topic or a thematic break in a section of an HTML page. If you have ever tinkered with it, you may have been content with its default settings. However, many developers run into a couple of issues when trying to customize it to suit their design needs.

350. I Built a Game in Vanilla JS And I Didn't Know How to Code 3 Months Ago

Well, I just knew the basics and I knew as well that I wanted to learn to code, no matter what, as I explained here.

351. Web Accessibility Checklist For Your Project

Web accessibility is important. Making your app accessible is morally the right thing to do, it helps you win more business, and it may even be legally or contractually required. However, not many software engineers or web designers know how to make their apps accessible.

352. How Relearning HTML Gave Me New Insights as a Web Developer

I relearned HTML to discover my unknown unknowns by taking an Introduction to HTML5 course and by reading the MDN documentation for every HTML element.

353. Why IDs Can be Problematic in CSS

OUTLINE

354. CSS Animations: Creating Bouncing Ball Animation From Scratch

Photo by Kevin Ku from Pexels

355. How to Start to Use Flexbox and CSS Grid in Your Projects

During years I've been using Bootstrap, the most popular UI library for responsive web design, both for my job and also for my personal projects, but in the software development world new technologies appear every year, the old ones keep evolving. Besides, the web designer has been facing a problem, to make responsive web design to the request of users for more friendly user interfaces for different devices. For this reason, in recent years CSS bring two novelties, flexbox and CSS Grid. Just two weeks ago I had never used these alternatives.

356. Some HTML, CSS Little Secrets In One Article

There are many different guides and guidelines on the Internet. I tried to go through all of them and put together a little cheat sheet.

357. Facts Everyone Needs To Know About Front-End Development Practices

Front-end development takes much more than writing clean code. While writing concise and legible code is not mandatory, it will save many headaches in the future. The chances of writing code that will never be changed or never looked at again are slim to none, and time spent getting lost in old code is time wasted. Here are some key web development best practices for HTML, CSS, and JavaScript.

358. How to Write CSS Advanced Selectors Like a Pro

Having 3 years of experience as a freelance front-end developer, I thought there is nothing new I could learn about CSS. However, studying at Microverse gave me the chance to actually go deep into things that I took my knowledge on for granted like CSS selectors.

359. How I Made My Life Easier When Learning HTML & CSS

At the beginning of this year, I made a decision to change careers to become a Software Developer since then I was struggling to find the best way to learn HTML & CSS in an effective way so in July I started at Microverse — a global school for remote software developer — and I’m going to share some things that made my life easier in order to master HTML & CSS skills.

360. Top Angular Admin Templates

People reviewing admin templates usually think about what kind of intro they should start the article with. But let’s be honest, no one is ever interested in these. People just scroll down and go straight to the point. So this time we thought we’ll skip the intro at all. We won’t explain why and how exactly using admin panels can save you money, you can read about it here.

361. WebVTT API: Introduction to The Web Video Text Tracks Format

Web Video Text Tracks Format (WebVTT) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element. The primary purpose of WebVTT files is to add text overlays to a <video>. WebVTT is a text based format, which must be encoded using UTF-8. Where you can use spaces you can also use tabs. There is also a small API available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times.

362. Moe-js - A Modern Template Engine for JavaScript

I've been using Handlebars in Node.js apps for a long time now and while it always gets the job done, sometimes I find it awkward to use.  In particular I miss being able to use expressions and flexible logic flow directly in the templates.I know there's an argument for keeping logic and views separate and that views should be "logicless", but sometimes you just want a bit more control.  The existence of libraries like Swag, suggests that I'm not alone here so I got to thinking...

363. Top 11 Popular CSS Interview Questions

CSS, Cascading Style Sheets, is a style sheet language that is simple and easy to learn. It is basically about how to represent HTML elements on the screen. It is mainly used for adding styles to web pages. It is one of the favorites of developers and designers for adding styles to web pages. So, today we will be talking about the 11 most asked questions on CSS.

364. Why Does HTML Think “chucknorris" Is A Color? And 10 More FAQs, Answered

HTML, Hypertext Markup Language,  is the standard markup language used mainly for creating pages to display on World Wide Web (WWW). It is very simple, easy to learn, and allows you to create amazing websites. So, today we will be checking out the 11 most asked questions about HTML.

Thank you for checking out the 364 most read stories about Html on HackerNoon.

Visit the /Learn Repo to find the most read stories about any technology.