#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 🍃

[layakcoder]

3+ Simple Steps to Build an Animated Website Navigation Bar

Creating an animated website navigation bar can greatly improve both the functionality and visual appeal of your website. By using simple techniques, you can enhance your website’s navigation, making it both interactive and engaging for users. In this article, we’ll break down the process of building an animated website navigation bar in just a few steps. We will also explore how to incorporate advanced features like a colour effect navbar and menu navbar to add a personal touch.

Step 1: Set Up the Basic Structure for Your Animated Website Navigation Bar

The first step in building an animated website navigation bar is to establish its basic structure. This process starts by creating the HTML layout that will hold your navigation links. A simple navigation bar usually consists of an unordered list (<ul>) with list items (<li>) for each link.

For the animated navbar HTML CSS setup, ensure that your links are inside the <nav> container element. This gives your navbar a structure that can be easily styled and animated using CSS. For a modern look, you can style the list to appear horizontally, ensuring the links are aligned evenly across the screen.

This basic structure will be the foundation upon which the animation effects will be built. By adding specific classes to each <li> element, you will be able to target them with CSS and apply hover effects or more complex animations as needed.

The next step is to make your menu navbar more functional by adding the links that users will interact with. A menu navbar is a list of navigation items that guide users to different sections of the website. Ensure that these links are clear, concise, and intuitive so that visitors can easily navigate through your site.

Once you’ve set up the basic structure and links, you can move forward with adding the CSS styling and animation.

Step 2: Add Styling and Animation Effects with CSS

After setting up the basic structure of your animated website navigation bar, it’s time to move on to the CSS. Here, you’ll define the visual style and add simple animations to the navbar.

Styling the Animated Navbar HTML CSS

To give the animated website navigation bar a sleek, professional look, you can start by applying basic CSS styles. This includes setting the background color, defining font sizes for the links, and adjusting padding for a clean layout. You can also use flexbox to align the navbar items horizontally or vertically, ensuring a modern, responsive design.

Once the structure is in place, it's time to make the navbar more interactive. The most common effect is to change the appearance of each menu item when the user hovers over it. You can achieve this effect with the :hover pseudo-class in CSS. By changing the background color, text color, or adding a smooth transition effect, users will get immediate visual feedback when they interact with the navbar.

The transition property allows you to control the speed and ease of the animation, giving your animated navbar HTML CSS a polished, fluid feel. A hover effect, such as changing the background color or highlighting the active item, can help users know where they are in the navigation process.

Adding Advanced Effects: Colour Effect Navbar

To take your animated website navigation bar to the next level, consider incorporating a colour effect navbar. This feature dynamically changes the background color or text color of the navbar items as the user interacts with them. For example, you could highlight the active menu item by changing its color to reflect the section of the website the user is viewing.

A colour effect navbar is an excellent way to create a more engaging and responsive experience. This effect is especially useful for websites with long, scrolling content, as it provides users with a visual cue indicating which section they are currently on. For example, the navbar item for the section the user is reading can be highlighted with a different color, helping to orient them on the page.

To implement this effect, you can use a combination of JavaScript and CSS. JavaScript can track the scroll position of the page or the active section, and CSS can apply the necessary style changes to the navbar items.

Step 3: Enhance Responsiveness and Mobile Compatibility

A crucial part of building an effective animated website navigation bar is ensuring it works across all devices, from desktop to mobile. This is where CSS media queries come into play. These queries allow you to adjust the design of your menu navbar based on the device’s screen size.

For mobile devices, it's important to create a collapsible or "hamburger" style menu. This design keeps the navbar compact when viewed on small screens, saving space while still offering full navigation functionality. When users click on the hamburger icon, the menu can slide in or drop down, giving them access to the full list of links.

Adding a menu navbar for mobile users also requires you to add additional CSS styles to ensure that the navbar is easily accessible. On larger screens, the navbar may appear as a full horizontal menu, but on smaller screens, the items should stack vertically or be hidden behind a toggleable menu button.

Testing for Cross-Device Compatibility

Once you have built the initial animated website navigation bar, it’s essential to test its responsiveness. Make sure the navbar functions well on different screen sizes and that the animations and hover effects still work smoothly. Mobile users should have a seamless experience with the menu navbar, and the colour effect navbar should also adapt to different devices, ensuring that the user experience remains consistent.

Conclusion

Building an animated website navigation bar doesn’t need to be complex. By following these three simple steps, you can create a sleek, functional, and engaging navbar that enhances the user experience on your site. Start by setting up the basic structure with HTML, then move on to styling and animation using CSS. Adding advanced features like a colour effect navbar will give your navbar a modern touch that encourages user interaction.

To ensure a fully responsive and mobile-friendly design, don’t forget to make your menu navbar adaptable to different screen sizes. Testing across devices will help guarantee that your animated website navigation bar works seamlessly for all users. With a few simple steps, you can transform your website’s navigation into an interactive and visually appealing element that enhances both functionality and design.

[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

[jcmarchi]

Yet Another Anchor Positioning Quirk

New Post has been published on https://thedigitalinsider.com/yet-another-anchor-positioning-quirk/

Yet Another Anchor Positioning Quirk

I strongly believe Anchor Positioning will go down as one of the greatest additions to CSS. It may not be as game-changing as Flexbox or Grid, but it does fill a positioning gap that has been missing for decades. As awesome as I think it is, CSS Anchor Positioning has a lot of quirks, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has bugged me since I first saw it.

The inception

It all started a month ago when I was reading about what other people have made using Anchor Positioning, specifically this post by Temani Afif about “Anchor Positioning & Scroll-Driven Animations.” I strongly encourage you to read it and find out what caught my eye there. Combining Anchor Positioning and Scroll-Driven Animation, he makes a range slider that changes colors while it progresses.

Amazing by itself, but it’s interesting that he is using two target elements with the same anchor name, each attached to its corresponding anchor, just like magic. If this doesn’t seem as interesting as it looks, we should then briefly recap how Anchor Positioning works.

CSS Anchor Positioning and the anchor-scope property

See our complete CSS Anchor Positioning Guide for a comprehensive deep dive.

Anchor Positioning brings two new concepts to CSS, an anchor element and a target element. The anchor is the element used as a reference for positioning other elements, hence the anchor name. While the target is an absolutely-positioned element placed relative to one or more anchors.

An anchor and a target can be almost every element, so you can think of them as just two div sitting next to each other:

<div class="anchor">anchor</div> <div class="target">target</div>

To start, we first have to register the anchor element in CSS using the anchor-name property:

.anchor anchor-name: --my-anchor;

And the position-anchor property on an absolutely-positioned element attaches it to an anchor of the same name. However, to move the target around the anchor we need the position-area property.

.target position: absolute; position-anchor: --my-anchor; position-area: top right;

This works great, but things get complicated if we change our markup to include more anchors and targets:

<ul> <li> <div class="anchor">anchor 1</div> <div class="target">target 1</div> </li> <li> <div class="anchor">anchor 2</div> <div class="target">target 2</div> </li> <li> <div class="anchor">anchor 3</div> <div class="target">target 3</div> </li> </ul>

Instead of each target attaching to its closest anchor, they all pile up at the last registered anchor in the DOM.

The anchor-scope property was introduced in Chrome 131 as an answer to this issue. It limits the scope of anchors to a subtree so that each target attaches correctly. However, I don’t want to focus on this property, because what initially caught my attention was that Temani didn’t use it. For some reason, they all attached correctly, again, like magic.

What’s happening?

Targets usually attach to the last anchor on the DOM instead of their closest anchor, but in our first example, we saw two anchors with the same anchor-name and their corresponding targets attached. All this without the anchor-scope property. What’s happening?

Two words: Containing Block.

Something to know about Anchor Positioning is that it relies a lot on how an element’s containing block is built. This isn’t something inherently from Anchor Positioning but from absolute positioning. Absolute elements are positioned relative to their containing block, and inset properties like top: 0px, left: 30px or inset: 1rem are just moving an element around its containing block boundaries, creating what’s called the inset-modified containing block.

A target attached to an anchor isn’t any different, and what the position-area property does under the table is change the target’s inset-modified containing block so it is right next to the anchor.

Usually, the containing block of an absolutely-positioned element is the whole viewport, but it can be changed by any ancestor with a position other than static (usually relative). Temani takes advantage of this fact and creates a new containing block for each slider, so they can only be attached to their corresponding anchors. If you snoop around the code, you can find it at the beginning:

label position: relative; /* No, It's not useless so don't remove it (or remove it and see what happens) */

If we use this tactic on our previous examples, suddenly they are all correctly attached!

Yet another quirk

We didn’t need to use the anchor-scope property to attach each anchor to its respective target, but instead took advantage of how the containing block of absolute elements is computed. However, there is yet another approach, one that doesn’t need any extra bits of code.

This occurred to me when I was also experimenting with Scroll-Driven Animations and Anchor Positioning and trying to attach text-bubble footnotes on the side of a post, like the following:

Logically, each footnote would be a target, but the choice of an anchor is a little more tricky. I initially thought that each paragraph would work as an anchor, but that would mean having more than one anchor with the same anchor-name. The result: all the targets would pile up at the last anchor:

This could be solved using our prior approach of creating a new containing block for each note. However, there is another route we can take, what I call the reductionist method. The problem comes when there is more than one anchor with the same anchor-name, so we will reduce the number of anchors to one, using an element that could work as the common anchor for all targets.

In this case, we just want to position each target on the sides of the post so we can use the entire body of the post as an anchor, and since each target is naturally aligned on the vertical axis, what’s left is to move them along the horizontal axis:

You can better check how it was done on the original post!

Conclusion

The anchor-scope may be the most recent CSS property to be shipped to a browser (so far, just in Chrome 131+), so we can’t expect its support to be something out of this world. And while I would love to use it every now and there, it will remain bound to short demos for a while. This isn’t a reason to limit the use of other Anchor Positioning properties, which are supported in Chrome 125 onwards (and let’s hope in other browsers in the near future), so I hope these little quirks can help you to keep using Anchor Positioning without any fear.

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

[divinector]

Church Website Design

[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!

[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