#css flexbox examples

[divinector]

Responsive Flexbox Layout

[codingquill]

Essentials You Need to Become a Web Developer

HTML, CSS, and JavaScript Mastery

Text Editor/Integrated Development Environment (IDE): Popular choices include Visual Studio Code, Sublime Text.

Version Control/Git: Platforms like GitHub, GitLab, and Bitbucket allow you to track changes, collaborate with others, and contribute to open-source projects.

Responsive Web Design Skills: Learn CSS frameworks like Bootstrap or Flexbox and master media queries

Understanding of Web Browsers: Familiarize yourself with browser developer tools for debugging and testing your code.

Front-End Frameworks: for example : React, Angular, or Vue.js are powerful tools for building dynamic and interactive web applications.

Back-End Development Skills: Understanding server-side programming languages (e.g., Node.js, Python, Ruby , php) and databases (e.g., MySQL, MongoDB)

Web Hosting and Deployment Knowledge: Platforms like Heroku, Vercel , Netlify, or AWS can help simplify this process.

Basic DevOps and CI/CD Understanding

Soft Skills and Problem-Solving: Effective communication, teamwork, and problem-solving skills

Confidence in Yourself: Confidence is a powerful asset. Believe in your abilities, and don't be afraid to take on challenging projects. The more you trust yourself, the more you'll be able to tackle complex coding tasks and overcome obstacles with determination.

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

https://sadgrl.online/projects/layout-builder/

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[eggdesign]

how did you learn coding?

I am pretty much entirely self taught as far as front end goes!

I started messing around with HTML and CSS with tumblr themes back in 2016-ish.

For javascript I looked at https://developer.mozilla.org/en-US/ for a lot of documentation + examples. And also used codepen a lot to kinda reverse engineer existing snippets of code.

I also read a lot of https://css-tricks.com/

And for flexbox + css grid there's these:

After I got a good foundation of vanilla JS, I learned Vue for a little while and then moved on to React. The new react documentation is really good in my opinion so I definitely recommend reading that if you're interested in learning.

Most of my learning came from trial and error and working on projects that I was really excited about. I used to be so proud of findtags (the original version) which was in jquery...

The react version is miles ahead of it. And even then, the theme builder is also way ahead of findtags. I learned way more between those two projects than reading documentation alone!

[code-es]

Learn flexbox!

Although it is IMPOSSIBLE to ever get align-items vs justify-content right on the first try, getting familiar with how flexbox works will allow you to know at least one of them does what you want them to. If there's anything I've learned during my studies it's that development is much more about knowing you can do certain things and being able to google it when you don't know how, rather than having everything memorized. What you need to memorize you will memorize from practice, repetition and experience.

That being said: here are some (two) resources for learning flexbox!

Play Flexbox Froggy

This was such a huuuuuge help for me when learning flexbox. I completed all of the exercises once, and then I would use this as a guide and reference when trying to figure stuff out on my own projects. It's a great interactive way of learning, and it really simplifies and makes flexbox digestible. I recommend just crunching through it once, and you will be exposed to all the different ways of using flex! Then you will have in the back of your head what is possible with flex, and you will be able to recall this and maybe use the next resource to implement it if you don't remember all the keywords yourself!

CSS tricks - a complete guide to flexbox

This was recommended to me by a developer waaay back when i started studying, and it has saved me countless times. It's so good for referencing the different properties, with clear visual examples and a super easy-to-follow structure of the page. I have this bookmarked because of how often I use it.

Good luck in your studies 💻🐸

[negg]

🌸 Sakura Page Theme 🌸

re-coded an unreleased page theme an anon asked me to release like 5 years ago (example of the original). realized i actually hated a lot of how it was originally handled and changed it up. now it is ready to be unfurled!

features:

mobile responsive (built with flexbox)

header designed for 4:3 ratio gifs/images

up to 2 side pixels (left & right) with optional captions

two javascript-powered pop-up modals

title font supports english & japanese

customizable fonts, images, and colors

CSS variable settings

tumblr controls removed (like the follow button)

...and more! just play around with it!

notes:

you must have javascript enabled for this page theme to work! see this post for instructions.

this theme is meant to be used with custom tumblr pages (select custom layout rather than standard layout and then copy + paste)

this can also be used on neocities or any other host that supports html/css/js.

🍃 code + live preview + more 🍃

[anomalouscorvid]

how did you go about doing the navigation links on your neocities? it's really neat!

MY NEOCITIES... i really need to add more to that. every so often i remember it exists. anyway

the sidebar and main text, first of all, are two containers in the simplest possible flexbox container (the css for it just has 'display: flex' and nothing else). very useful, i love flexbox. if you haven't used it before, i'd recommend looking into it! loads of examples and guides out there. (there's also css grid, but i've never used it)

the navigation itself in the html is very simple, basically a list of links.. not actually a list, just separate 'paragraphs'. (which i have to update on every page every time i add/rename/remove another page..) additional thought: i think mayyybe if i used a flexbox container for the links themselves it'd be easier to make it so the navigation turns horizontal (and along the top) instead of vertical when the screen is small enough? or something with inline blocks maybe. i haven't gotten around to trying any of that though

back on topic, the symbol before each link and the translucent 'label' on hover is from the css, like this

so basically the 'label' sticking out is, like, an offset background? and also the current page link gets a custom class that gives it the same formatting as the hover text

i think that's everything, i'm not great at actually explaining how i did stuff so i hope this is helpful haha

[bunnydevs]

/) /) (˶•-•˶) ♡ ; Complete reviews of CSS learning games by bunnydevs #001 (づ づ

CSS DINER:

↳ Link Here ༉‧₊ ↳ 7/10 ༉‧₊ ↳ super cute ༉‧₊ ↳ helps visualize what's going on ༉‧₊ ↳ a little difficult to understand sometimes & a better "help" section would be useful for when people get stuck! ༉‧₊

I completed up until level 15 before it started becoming confusing for me and I needed outside assistance. While I understood on a base level, I would have really enjoyed a few more examples that were in a similar setting. E.G. (selecting the top apple instead of the top orange) Specifically when becoming confused.

Did this game help me understand and use css? YES! absolutely.

FLEXBOX FROGGY:

↳ Link Here ༉‧₊ ↳ 9/10 ༉‧₊ ↳ instructions are very clear + the tools are wonderful ༉‧₊ ↳ visuals are amazing༉‧₊ ↳ easy but still makes you think༉‧₊

Finished all 24 levels! Helped a lot with visualizing what's going the hell on with flexbox and really made me think about my choices. While I didn't have to stare at the screen confused for 20 minutes, I did need to think about my choices. Bonus points for having the abilities of each thing there the whole time in case you forget!

What games should I review next? Send them into my inbox ! suggestions for all prog languages are welcome.

[vespasiane]

good websites to practice CSS

Here are a few good websites to practice CSS:

CSS Diner (https://flukeout.github.io/) - Interactive game that teaches CSS selectors in a fun way.

CSS Grid Garden (https://cssgridgarden.com/) - Game for learning CSS grid layout.

Flexbox Froggy (https://flexboxfroggy.com/) - Game for learning flexbox.

CSS Battle (https://cssbattle.dev/) - Challenge to recreate small layouts using CSS.

CodePen (https://codepen.io/) - Frontend web dev playground where you can create pens and practice CSS.

FreeCodeCamp (https://www.freecodecamp.org/learn/) - Interactive coding challenges including CSS sections.

CSS Tricks (https://css-tricks.com/) - Blog with CSS tutorials and examples.

Scrimba (https://scrimba.com/) - Interactive screencasts for learning web development including CSS courses.

I'd recommend starting with CSS Diner, Grid Garden and Flexbox Froggy as they provide a very hands-on way to get familiar with CSS selectors and layout concepts. CodePen is also great for quickly testing out CSS ideas. FreeCodeCamp, CSS Tricks and Scrimba offer more in-depth learning content and challenges.

[kopawz]

omg i saw ur neocities how did you make it look tht good what's ur secret

when on mobile, go into your address bar, and type "view-source:" without spaces in front of ANY url from my website. unsure if it works on desktop. let me know if it does.

this will allow you to take a closer look at my spaghetti html code, here's an example of a view-sourced link you can look at yourself:

view-source:https://kopawz.neocities.org/

my landing page for example, you will notice,

+ has many flex boxes JUST so i can center everything on the page. i like it that way. do i have to do it like this? no but i like it.

+ every green box i'm putting text in is the same base element from the css. they're all the exact same <aside> lol. they are all called asides because i was initially fiddling with a template, but it was very cluttered and noisy, so...

+ i decided to just use one base element, and use a rampant amount of in-line styling in the html to customize each aside box's size, shape, and other properties, instead of several different elements in the css. it just works better for me that way.

+ i didn't feel like learning how to make images/elements stack on top of eachother, so i set a flexbox to force images to wrap around once they hit the box's max width limit. it's fun to brute-force things!

+ there is no secret, just fuck around and find out what makes most sense to you when making it, so you can understand it for yourself. nobody but you sees the blueprint.

above all else, laugh and learn from your own mistakes- do not use them as weapons against yourself as "proof" that you shouldn't try. 👍

[zephiris]

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

[divinector]

Church Website Design

[rogersip]

5 Ways to Center an Image in HTML

If you have a picture or image that you want to center, there are a few ways to do it. The first option is to use CSS. For instance, if you are using a flex-box, you can use the position property to center the image. You can also use the text-align property.

CSS transform property

CSS Transforms are used to modify the appearance of an element in a browser. They are also a great tool for creating an interactive project. For example, they can be used to make website dots blink quickly. By using transforms and transitions, you can ensure that animations are consistent and reliable.

In order to center an image in HTML, you will first need to wrap it in a container. The container can be a div or another block-level element. When the image is wrapped in a container, you can use CSS properties to center the image. You can then use margins or horizontal and vertical margins to adjust the position of the image.

The image's width must be smaller than the width of the parent element. It can be set to a fixed value or a percentage. There are also auto and margin options for the right and left sides of the image.

CSS position property

There are a number of ways to center an image in HTML. Some are simple to use, while others require extra CSS code. In this article, we'll take a look at five of them.

First, let's review the old standby, position absolute. This is probably the most useful way to center an image in HTML. By using a div and setting its width to a fixed percentage, you can center the image.

Next, we'll examine the flex property. This is a bit more complicated, but can do the same thing without the need to calculate margins.

Finally, we'll see what the object-position property can do. The flex property tells the browser that the div is a parent container and the image is its child. That's important to know because you'll need to wrap the image in the container before you can apply the flex property.

CSS text-align property

There are many ways to center an image in HTML, but one of the easiest is to use the text-align property. The text-align property is useful for aligning the inner content of block elements, such as images, in the horizontal direction. It is also useful for aligning text on a web page.

Another way to center an image is to wrap the image in a div container. You will need to set a height for the div, as well as a width. In this case, you can also set a fixed length.

For more complex alignments, you can also use internal CSS and flexbox. Flexbox is an exemplary example of CSS wizardry. Flexbox allows you to center an image and other elements in your div.

CSS flex-box

The CSS Flexbox is a great way to center an image in HTML. It allows you to center images horizontally and vertically. This is especially helpful when you want to create symmetry or balance. You can also center text in a flexbox.

The first step is to set the display property to "block". Then, you can add the margin property. This will instruct the web browser to apply equal margins on all sides of the element. There are two types of margins you can use: auto and auto-margin. If you are using auto-margin, you will need to change the display property to grid.

Next, you must create a div element that is smaller than the image. This div must have the place-items property set to center. Once this is done, you can use the translate method to position the div along the X-axis.

Properly centering an image in html

Centering an image in HTML can be challenging. There are various ways to center an image, but some strategies are considered more "proper" than others. Some of these techniques use HTML, while others require CSS. Generally, centering an image is done through a text-align property.

Inline images need different methods to be centered than block-level elements. For example, an image that is centered horizontally may need to be resized. An image that is centered vertically may need to be floated.

Another way to center an image in HTML is to wrap the image in a container. However, this strategy requires you to use an external CSS file. It will also change the appearance of the image on the screen. You should do this once, rather than repeatedly.

[werewolf-kat]

Freelancing web dev/designer here! I wanna add some tools and more resources to this list for everyone. Hopefully this is more exciting than it is intimidating. Webpage creation can be fun and useful - especially for those looking to build their own online portfolios as social media gets worse and worse for indies/small businesses fighting the constantly changing climate of algorithms and other corporate junk.

More casually, go and make that fan page you’ve always wanted. Start somewhere - anywhere! My first websites back in 2007 - 2010 were for virtual pet site fan pages, an American Dragon: Jake Long page begging for a season 3, my own made up adoptable pets, and a free virtual pet site of my own that used a cool tool that existed back then.

Modern design is actually cleaner to work with, more accessible, and you can still be as creative as you want despite what professional websites adhere to for their marketing standards. Lots has changed and improved since I first started...

Educational Resources

MDN Web Docs | Similar to W3Schools, might be a preferred format for some to learn from as an option. Full of interactive examples and detailed explanations!

CSS Tricks Guides | Visual articles with organized categories for each property and value involved! I always reference their Flexbox guide since flexbox stuff gets confusing to write by pure memory each time.

Kevin Powell’s YouTube | A chill channel I’m a fan of that web devs can appreciate at any level of experience! He’s got shorts for fast solutions, full troubleshooting guides, reviews for annual developer surveys, and advocates for more diversity in the web development scene that isn’t white guys such as himself. Super welcoming, friendly, and won’t talk down to you for trying to learn. The link is his playlist category that’s good for beginners out there, for your convenience.

CodePen | A massive gallery of code snippets that other developers have created and shared for free viewing/tinkering. You can find insane CSS-made art and animations on here, JavaScript samples, and more!

 Accessibility Guide | Making your website accessible is an important step in designing a page for anyone to see. Many types of disabled people surf the internet with accessibility devices such as screen readers. Those with more limited internet (speed, bandwidth, etc.) can also benefit from these standards.

Epilepsy Guide | A specific form of accessibility that’s important to consider as well. If you have moving, flashing, and otherwise visually stimulating content, look through this for solutions to make your pages safer to look at.

Meta Tag Guide | A beginner-friendly guide with examples of how HTML meta tags affect the way your public site and its pages will show up in search results.

SEO Guide | SEO is an abbreviation of Search Engine Optimization. This is good to learn if you’re a serious designer who needs your page to show in search results. Important for those of you out there making business and/or portfolio pages. 100% use your username, business name, and other unique (but not private) identifying factors as keywords that will connect your page to being found along with your social profiles.

[Fun Fact: SEO is the reason behind food blogs sharing their whole anime backstory before the actual recipe... Hurrah]

Browser Extension Tools

ColorZilla | FireFox & Chrome | Select colors from webpages, analyze CSS colors on pages, generate gradient values for CSS, and save palettes. Provides hex and rgba color values too!

RGBlind | Firefox & Chrome | Simulate some types of color blindness on your website for accessibility purposes.

Colorblindly | Chrome Only | Simulate a wider range of color blindness types, but unfortunately not available on other browsers from what I’ve found.

Page Marker | Chrome Only | Write/draw anything you need for brainstorming your page’s development, right on top of it! The marker strokes stick to that point of the page and moves with it when you scroll.

Eye Dropper | Chrome Only | For selecting and picking colors off of web pages. Gives you the hex and rgba values on the spot!

Grayscale View | Chrome Only | Good for previewing shade values and contrast on your website for accessibility and readability purposes.

Other Tools

Visual Studio Code | Open Source program provided by Microsoft of all things! This comes with many built-in tools and functions to make HTML, CSS, JS, and other compatible languages be more convenient to work with. More cozy to work with than the manual tedium of organizing things within bare text editors. Color coded words, auto-stacking, arrows that help you be sure you have things closed up properly, and more! Definitely look through its extensions shop for anything you think would help you in the ways you need for development.

openElement | Create web pages without coding. Can be good for planning how your website is laid out, or to make something without the knowledge required! I haven’t used it myself, but it looks promising.

Accessibility Checklist | A superbly handy way to track your website’s depth and level of accessibility. The + buttons give descriptions/suggestions for each item on the list to make improvements for your website.

Photo-sensitivity Analysis Tool | A free program that analyses content on your pages for any risks of epilepsy and other photo-sensitive complications among viewers. Important for accessibility!

That’s about all I can put together at this time. Be free! Go wild! The internet is still ours to build in - not just big corps, scammers, or bots.

⬇ make a webpage right now its free ⬇

neocities.org 👈 for website hosting

internetingishard.com 👈 for coding tutorial

w3schools.com 👈 for a searchable index of every html and css term under the sun and live examples of how each one works

sadgrl.online 👈 for a layout builder, if you dont want to do everything from scratch

[jcmarchi]

State of CSS 2024 Results

New Post has been published on https://thedigitalinsider.com/state-of-css-2024-results/

State of CSS 2024 Results

They’re out! Like many of you, I look forward to these coming out each year. I don’t put much stock in surveys but they can be insightful and give a snapshot of the CSS zeitgeist. There are a few little nuggets in this year’s results that I find interesting. But before I get there, you’ll want to also check out what others have already written about it.

Oh, I guess that’s it — at least it’s the most formal write-up I’ve seen. There’s a little summary by Ahmad Shadeed at the end of the survey that generally rounds things up. I’ll drop in more links as I find ’em.

In no particular order…

Demographics

Josh has way more poignant thoughts on this than I do. He rightfully calls out discrepancies in gender pay and regional pay, where men are way more compensated than women (a nonsensical and frustratingly never-ending trend) and the United States boasts more $100,000 salaries than anywhere else. The countries with the highest salaries were also the most represented in survey responses, so perhaps the results are no surprise. We’re essentially looking at a snapshot of what it’s like to be a rich, white male developer in the West.

Besides pay, my eye caught the Age Group demographics. As an aging front-ender, I often wonder what we all do when we finally get to retirement age. I officially dropped from the most represented age group (30-39, 42%) a few years ago into the third most represented tier (40-49, 21%). Long gone are my days being with the cool kids (20-29, 27%).

And if the distribution is true to life, I’m riding fast into my sunset years and will be only slightly more represented than those getting into the profession. I don’t know if anyone else feels similarly anxious about aging in this industry — but if you’re one of the 484 folks who identify with the 50+ age group, I’d love to talk with you.

Before we plow ahead, I think it’s worth calling out how relatively “new” most people are to front-end development.

Wow! Forty-freaking-four percent of respondents have less than 10 years of experience. Yes, 10 years is a high threshold, but we’re still talking about a profession that popped up in recent memory.

For perspective, someone developing for 10 years came to the field around 2014. That’s just when we were getting Flexbox, and several years after the big bang of CSS 3 and HTML 5. That’s just under half of developers who never had to deal with the headaches of table layouts, clearfix hacks, image sprites, spacer images, and rasterized rounded corners. Ethan Marcotte’s seminal article on “Responsive Web Design” predates these folks by a whopping four years!

That’s just wild. And exciting. I’m a firm believer in the next generation of front-enders but always hope that they learn from our past mistakes and become masters at the basics.

Features

I’m not entirely sure what to make of this section. When there are so many CSS features, how do you determine which are most widely used? How do you pare it down to just 50 features? Like, are filter effects really the most widely used CSS feature? So many questions, but the results are always interesting nonetheless.

What I find most interesting are the underused features. For example, hanging-punctuation comes in dead last in usage (1.57%) but is the feature that most developers (52%) have on their reading list. (If you need some reading material on it, Chris initially published the Almanac entry for hanging-punctuation back in 2013.)

I also see Anchor Positioning at the end of the long tail with reported usage at 4.8%. That’ll go up for sure now that we have at least one supporting browser engine (Chromium) but also given all of the tutorials that have sprung up in the past few months. Yes, we’ve contributed to that noise… but it’s good noise! I think Juan published what might be the most thorough and thoughtful guide on the topic yet.

I’m excited to see Cascade Layers falling smack dab in the middle of the pack at a fairly robust 18.7%. Cascade Layers are super approachable and elegantly designed that I have trouble believing anybody these days when they say that the CSS Cascade is difficult to manage. And even though @scope is currently low on the list (4.8%, same as Anchor Positioning), I’d bet the crumpled gum wrapper in my pocket that the overall sentiment of working with the Cascade will improve dramatically. We’ll still see “CSS is Awesome” memes galore, but they’ll be more like old familiar dad jokes in good time.

(Aside: Did you see the proposed designs for a new CSS logo? You can vote on them as of yesterday, but earlier versions played off the “CSS is Awesome” mean quite beautifully.)

Interestingly enough, viewport units come in at Number 11 with 44.2% usage… which lands them at Number 2 for most experience that developers have with CSS layout. Does that suggest that layout features are less widely used than CSS filters? Again, so many questions.

Frameworks

How many of you were surprised that Tailwind blew past Bootstrap as Top Dog framework in CSS Land? Nobody, right?

More interesting to me is that “No CSS framework” clocks in at Number 13 out of 21 list frameworks. Sure, its 46 votes are dwarfed by the 138 for Material UI at Number 10… but the fact that we’re seeing “no framework” as a ranking option at all would have been unimaginable just three years ago.

The same goes for CSS pre/post-processing. Sass (67%) and PostCSS (38%) are the power players, but “None” comes in third at 19%, ahead of Less, Stylus, and Lightning CSS.

It’s a real testament to the great work the CSSWG is doing to make CSS better every day. We don’t thank the CSSWG enough — thank you, team! Y’all are heroes around these parts.

CSS Usage

Josh already has a good take on the fact that only 67% of folks say they test their work on mobile phones. It should be at least tied with the 99% who test on desktops, right? Right?! Who knows, maybe some responses consider things like “Responsive Design Mode” desktop features to be the equivalent of testing on real mobile devices. I find it hard to believe that only 67% of us test mobile.

Oh, and The Great Divide is still alive and well if the results are true and 53% write more JavsScript than CSS in their day-to-day.

Missing CSS Features

This is always a fun topic to ponder. Some of the most-wanted CSS features have been lurking around 10+ years. But let’s look at the top three form this year’s survey:

Mixins

Conditional Logic

Masonry

We’re in luck team! There’s movement on all three of those fronts:

Resources

This is where I get to toot our own horn a bit because CSS-Tricks continues to place first among y’all when it comes to the blogs you follow for CSS happenings.

I’m also stoked to see Smashing Magazine right there as well. It was fifth in 2023 and I’d like to think that rise is due to me joining the team last year. Correlation implies causation, amirite?

But look at Kevin Powell and Josh in the Top 10. That’s just awesome. It speaks volumes about their teaching talents and the hard work they put into “helping people fall in love with CSS” as Kevin might say it. I was able to help Kevin with a couple of his videos last year (here’s one) and can tell you the guy cares a heckuva lot about making CSS approachable and fun.

Honestly, the rankings are not what we live for. Now that I’ve been given a second wind to work on CSS-Tricks, all I want is to publish things that are valuable to your everyday work as front-enders. That’s traditionally happened as a stream of daily articles but is shifting to more tutorials and resources, whether it’s guides (we’ve published four new ones this year), taking notes on interesting developments, spotlighting good work with links, or expanding the ol’ Almanac to account for things like functions, at-rules, and pseudos (we have lots of work to do).

My 2024 Pick

No one asked my opinion but I’ll say it anyway: Personal blogging. I’m seeing more of us in the front-end community getting back behind the keyboards of their personal websites and I’ve never been subscribed to more RSS feeds than I am today. Some started blogging as a “worry stone” during the 2020 lockdown. Some abandoned socials when Twitter X imploded. Some got way into the IndieWeb. Webrings and guestbooks are even gaining new life. Sure, it can be tough keeping up, but what a good problem to have! Let’s make RSS king once and for all.

That’s a wrap!

Seriously, a huge thanks to Sacha Greif and the entire Devographics team for the commitment to putting this survey together every year. It’s always fun. And the visualizations are always to die for.

[playstationvii]

Certainly! We can build upon the PlayStation 7 UI framework with even more sophisticated elements to support a streamlined user experience and optimized performance. Let’s look at features like contextual help overlays, responsive design for various screen types, localization support, and performance optimizations to ensure the UI is both functional and adaptable.

7. Contextual Help Overlays

For a user-friendly experience, contextual help overlays guide users through advanced features. This can include on-hover or on-click explanations of interface elements, which is especially useful for onboarding and accessibility.

// HelpOverlay.tsx component for contextual help

import React, { useState } from 'react';

interface HelpOverlayProps {

message: string;

position: { x: number; y: number };

}

export const HelpOverlay: React.FC<HelpOverlayProps> = ({ message, position }) => {

return (

<div style={{ top: position.y, left: position.x }} className="help-overlay">

{message}

</div>

);

};

// Usage in another component

import React, { useState } from 'react';

import { HelpOverlay } from './HelpOverlay';

export const Settings: React.FC = () => {

const [showHelp, setShowHelp] = useState(false);

const [helpPosition, setHelpPosition] = useState({ x: 0, y: 0 });

const handleMouseEnter = (event: React.MouseEvent) => {

setHelpPosition({ x: event.clientX, y: event.clientY });

setShowHelp(true);

};

return (

<div className="settings">

<button onMouseEnter={handleMouseEnter} onMouseLeave={() => setShowHelp(false)}>

Customize Theme

</button>

{showHelp && <HelpOverlay message="Change your theme here" position={helpPosition} />}

</div>

);

};

8. Responsive Design for Multiple Screen Types

As gaming consoles increasingly connect to diverse displays, the UI should support responsive design to adapt to both large TV screens and smaller monitors. This involves using CSS flexbox, grid layouts, and media queries to maintain usability on various screen sizes.

/* styles/Responsive.module.css */

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

@media (max-width: 768px) {

.container {

grid-template-columns: 1fr;

}

}

.largeText {

font-size: 2rem;

}

@media (max-width: 768px) {

.largeText {

font-size: 1.2rem;

}

}

9. Localization Support for Global Users

To support users worldwide, the UI should offer localization for different languages. This can be done using a localization library (e.g., react-intl or i18next) to manage text translations and formatting.

// Example using i18next for localization

import React from 'react';

import { useTranslation } from 'react-i18next';

export const Settings: React.FC = () => {

const { t } = useTranslation();

return (

<div className="settings">

<h1>{t('settings.title')}</h1>

<button>{t('settings.changeTheme')}</button>

</div>

);

};

With a translation file (e.g., en.json):

{

"settings": {

"title": "Settings",

"changeTheme": "Change Theme"

}

}

10. Performance Optimizations for Fluid UI Experience

For smooth performance, code splitting and lazy loading help manage resources effectively by only loading necessary UI components when they are needed.

// Lazy loading components in App.tsx

import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./components/Home'));

const Games = lazy(() => import('./components/Games'));

export const App: React.FC = () => (

<Suspense fallback={<div>Loading...</div>}>

<Router>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/games" element={<Games />} />

</Routes>

</Router>

</Suspense>

);

11. State Management for Optimized Data Handling

Using Redux or Context API can ensure global state management for user preferences, UI theme, and accessibility options, making data consistent across the entire UI. This helps components access the necessary state without excessive re-renders.

// Example using Context API in UserContext.tsx

import React, { createContext, useState, useContext } from 'react';

interface UserPreferences {

theme: string;

voiceCommands: boolean;

}

interface UserContextProps {

userPreferences: UserPreferences;

setUserPreferences: (prefs: UserPreferences) => void;

}

export const UserContext = createContext<UserContextProps | undefined>(undefined);

export const UserProvider: React.FC = ({ children }) => {

const [userPreferences, setUserPreferences] = useState<UserPreferences>({ theme: 'light', voiceCommands: false });

return (

<UserContext.Provider value={{ userPreferences, setUserPreferences }}>

{children}

</UserContext.Provider>

);

};

export const useUserContext = () => useContext(UserContext);

12. Dark Mode and Dynamic Themes

For better visual ergonomics, adding dark mode and dynamic theme switching allows users to adjust the interface’s look and feel according to their preference.

// ThemeSwitcher.tsx for toggling light/dark modes

import React, { useContext } from 'react';

import { UserContext } from '../context/UserContext';

export const ThemeSwitcher: React.FC = () => {

const { userPreferences, setUserPreferences } = useContext(UserContext);

const toggleTheme = () => {

setUserPreferences({

...userPreferences,

theme: userPreferences.theme === 'light' ? 'dark' : 'light',

});

};

return (

<button onClick={toggleTheme}>

Switch to {userPreferences.theme === 'light' ? 'Dark' : 'Light'} Mode

</button>

);

};

Using CSS variables for theme colors:

/* styles/theme.css */

:root {

--background-color: white;

--text-color: black;

}

[data-theme='dark'] {

--background-color: black;

--text-color: white;

}

body {

background-color: var(--background-color);

color: var(--text-color);

}

Summary

With these additions:

1. Contextual help overlays improve accessibility.

2. Responsive design ensures usability across devices.

3. Localization allows global users to interact comfortably.

4. Lazy loading and state management optimize UI performance.

5. Dark mode and dynamic themes personalize the user experience.

These features aim to make the PlayStation 7 interface versatile, globally adaptable, and highly user-centric. Let me know if there’s a specific feature here that could use more detail or customization for your vision!