1,893 reads

71 Stories To Learn About Html Css

by Learn RepoMay 7th, 2023

Too Long; Didn't Read

Learn everything you need to know about Html Css via these 71 free HackerNoon stories.

featured image - 71 Stories To Learn About Html Css

Let's learn about Html Css via these 71 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.

1. 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.

2. 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.

3. My New Series - Lambda School Revisited

As I mentioned in a previous post, I will soon be re-visiting the Software Engineering track which I’ve studied in Lambda School last year. That means going through the entire Full-Stack Web curriculum again from start to finish. In order for me to really master what I will re-learn, I’ve decided to teach it to other people through a series of vlogs, blog posts, and podcast episodes. This series will be called, quite simply, “Lambda School Revisited”.

4. Building A Navigation Flow That Shows Only On Scrolling Up using CSS and jQuery

A challenge we recently faced was that we needed to create a navigation that shows only when scrolling up. How did we solve it?

5. This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

6. How To Use CSS Shape-Outside, Clip-Path With The Float CSS Property

Great web design comes with great shapes that make the website have the looks it deserves. In the past, web applications were usually described as being made of boxes. Meaning, anything you see on the website is enclosed in a box. Now we can confidently say that websites are not only made of boxes but different varieties of shapes.

7. A Call-to-Action in pure HTML and CSS

Use this boiler plate template to design a call to action in any website using HTML and a little bit of CSS

8. 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.

9. 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.

10. How to Take a Photo in Your Browser with JavaScript

Modern browsers are more powerful than ever before. We can do many things in the browser with JavaScript now, we'll capture images in the browser with js.

11. Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

12. 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.

13. Pixels vs REM vs EM: Breaking down CSS Sizes

Should you use px or rem or em? In this post we'll try to get the answer of this question and we'll see which unit to use when

14. REM and EM in CSS Explained

em and rem both are known as relative units in CSS. You've probably been using em and rem units now for a while already but might not know what they actually do

15. 7 New CSS Features That Will Smoothen Your Web Development

You all must be familiar with the importance of CSS. How is it an invertible part of web development? When a person decides to step ahead in web development, HT

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

17. 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.

18. 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.

19. Bootstrap vs Media Queries: How to Make a Page Responsive

Using Bootstrap to make a page responsive saves one so much time and memory space. Let's see how this is possible, I have created a dummy web page that has four grids as shown below:

20. CSS Color Functions in 2023 - Everything You Need to Know to Get Started

You might have used CSS to change the color of an element on a web page, but have you ever heard of CSS color functions? If not, tighten your seat belts...

21. 5 Things I Wish I Knew When I Started to Learn CSS.

Whether you aim for a front end or a back end development, you will have to learn CSS sometimes during your lifetime. Styling with CSS is one of the most overwhelming things to learn when starting your career as a web developer.

22. How To Use Common Sense, HTML, CSS, and JS. To Make An Analogue Clock

Simple steps to create an Analogue Clock project with HTML, CSS, and JS and what the project can teach you about the development process and documentation.

23. The Art of Naming: CSS Guide

I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS. So here is my latest post, I'll tell you about a few naming conventions that will save you a bit of stress and countless hours down the line.

24. 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.

25. Using the CSS Parent Selectors, :has()

CSS stands for cascading stylesheets, which basically means things later on in the page take precedence over things earlier (with some major caveats).

26. 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".

27. CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

28. It Is NOT That Hard To Align Your HTML/CSS Elements [A How-To Guide]

If you are reading this article means that you know how much it hurts to be a newbie at web design, we all have been there fella.

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

30. How To Understand HTML and CSS For Beginners

Introduction

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

32. 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.

33. Recreate Windows 98 With CSS

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

34. A Simple Guide for CSS Animations

Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples.

35. 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.

36. Why Web Development Is So Difficult

Are you struggling while starting learning CSS and HTML? Do you feel overwhelmed with sooooo many properties? Don’t they look like the same? Haven’t you tried with a couple of tutorials (that you feel they are easy to do at the moment) but feel you don’t have the knowledge to start from the scratch?

37. 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.

38. CSS Recreation: The Frosted Glass Credit Card Design

Today I wanted to try and recreate a super cool dribbble shot from Dede Dwiyansyah I came across.

39. Using the Shadow DOM to Isolate Styles on a DOM That Is Not Yours

Shadow DOM is perfect for when you need to embed a widget in a DOM you don't own or have access to. Here's how to use it.

40. 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.

41. Create Incredible Shapes Using the CSS Clip-path Property

While trying to convert a Figma design to code recently, I had to make use of a CSS property called clip-path. In this article, I would try to explain what clip-path is and when it can be used.

42. 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.

43. The Ultimate CSS Grid Cheat Sheet in 2021🎖️

Let's refresh Our CSS Grid Memory. This CSS Grid tutorial is a cheat sheet of everything you can do with Grid to get started in 2021!

44. How to Master Nested CSS Selectors: Tips to Get Started

Mastering CSS selectors doesn't have to be a daunting task. One of the best ways to set yourself up for success is by learning how to group and nest your select

45. Fixing CSS Stylelint Errors Generated By SASS [A How-To Guide]

So you’ve started using sass, it makes things easy, right? Well, true, but one day, I run into some errors that almost changed my mind about that.

46. 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

47. React Introduction

React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to two other popular JavaScript frameworks, Angular and Vue. They all allow you to create fast apps in the browser.

48. 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.

49. Four Simple and Free yet Powerful Website Development Tools for Beginners

If you are new to HTML and CSS, you need tools that can help you speed your front-end development process. This is more evident if you are trying to clone an existing website or matching a few of its features.

50. CSS Combinators : Mastering the Use of Multiple CSS Selectors

A Complete guide on CSS combinators 2022. You can find everything you need to know about CSS Combinators in this blog.

51. An Introduction to CSS for Aspiring Web Designers

CSS stands for “Cascading Style Sheets.” It is a formatting language that allows us to visually improve our HTML tags (size, color, font, etc.). As the name suggests, it does it by cascading.

52. 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.

53. 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.

54. 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.

55. How To Build a Realtime Photoshop 🎨

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

56. Solid Tips On How Get Better At Responsive Web Design

Better Responsive Web Design, A Structured Approach

57. 5 Steps You Need to Make as Beginner Web Developer

When most people fantasize about the idea of starting a web development hobby (or career) they get eventually frustrated. Hard.

58. Position Layout property in CSS

A tutorial on CSS position property, concepts on absolute position, relative position, fixed position, etc. Article on how and when to use position properties.

59. How To Design a Tribute Page with Basic HTML5 & CSS3

Let us discuss (or understand) the components of the Tribute page that I built with HTML5 & CSS3 in a step-by-step guide.

60. An Introductory Guide to Tailwind and React: Setup and Design Patterns

You've probably heard of Tailwind by now, but if you haven't, it is essentially a utility-first CSS framework and is much less opinionated compared to other CSS frameworks like Bootstrap and Foundation.

61. Helpful CSS Selectors

A CSS selector is a set of rules which will allow us to style any HTML element. In CSS there are many different selectors, they will also explain in detail and a descriptive example of each of them.

62. Make Any Webpage Responsive [A How-To Guide]

After a few weeks at Microverse, I was given a project to work on. I hoped on it expecting that it would be as simple as the first projects I had worked on as I learned. It was about responsive web design, a new topic I had never done before since I am a beginner in software development.

63. The 10 Best HTML Editors Website Designers, Developers Should Know About

In today’s online world, having a website for your business or organization is mandatory if you want to compete with others for people’s attention.

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

65. 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.

66. How To Create an Animation with CSS

Many times animations are implemented on a web page to improve the user experience, making it more attractive and intuitive. With the animation property and the @keyframes rule, you can create any animation you have in mind by manipulating a large number of properties. This article shows the basics of making animations using a small project as an example, consisting of four squares jumping into four other squares as they move to the right and end up stacked in a tower.

67. The Different Ways to Start Project using Floats, Flexbox, and Grid CSS

As a beginners sometimes we are trying to learn and understand about CSS (Cascading Style Sheets) and the huge amount of documentation and tutorials we can find on internet, as a Microverse student I also spend some time working on different challenges and having the chance to apply this different approaches on my projects like Float, Flexbox and Grid, for sure I have to mention that even after facing some cloning site projects I don't consider myself an expert but this help me to have a better idea about working with this approaches; after my firsts steps I fell like making an article about my experience on this CSS & HTML path and maybe this will help other beginners to have a fast view and better understanding about it.