Here are a few things I made. Click them to test out for yourself. In depth explanations are beneath each link, and throughout each app.
I built this website from scratch to W3C standards with progressive enhancement (no WYSIWYG editors), and it works in all major browsers. I made all of the:
That means I made it work and look good all the way down to a screen width from 280px to 1920px wide. So it will even work on cell phones and other mobile devices with small screens.
If you're on a desktop computer: Resize your window below 724px wide until you see the style change. The triangle up top is a button you click or tap for navigation.
Notice how when over 725px wide, all the images continue to stay perfectly centered when resizing the window. If you don't see that, your browser might need to be updated so it has the ability to render flex boxes, otherwise you'll just see them spaced equally from left to right, but not perfectly centered every time.
The responsiveness of the popup modals when you click on them also continue to be proportional to the screen width and height, and how when the images are larger, you can scroll down to see the rest of the popup (without the overflow: auto; property/value, you wouldn't be able to see it).
The breakpoints and buttons for each popup still look good too. The white-space property has been set to not wrap the text. After you click on a popup, notice the red 'Close (X)' button when resizing the window from 1920px wide down to 280px, and how it stays as one single unit instead of breaking into 2 separate pieces of 'Close', and an ugly overlapping block of '(X)' (a very common mistake with WYSIWYG editors).
SVG, or Scalable Vector Graphics, are types of graphics that are infinitely scalable, and never pixelated. You can do many cools things with SVG buttons.
I set the svg buttons on this site inside an <object> tag to make people cache the buttons and not have to download the file over and over again everytime they go to a new page. Doing so makes it more efficient than if I wrote it inline. This saves 23kb everytime, a very valuable thing if you have a bad internet connection.
You can have wonky shaped buttons. On a desktop with an updated browser like Firefox or Chrome: resize your window to under 675px, then move your mouse in between the teeth of any cog, and notice how it won't brighten up unless it touches the cog or it's teeth. So you can have wonky shaped buttons in any way you desire.
Let's say you wanted SVG link navigation that looked like a flower with many overlapping flower petals. Then when you hover one of the petals, it would change color, come to the top of the ones overlapping it, and go to a certain page when you click it. And if you clicked anywhere between each petal, nothing would happen.
Semantic markup is very important for blind people that use screen readers. They have programs that go through the code I write, and read the words out loud so they can go through the site. Having semantic markup like <article> <section>, and <nav> tags help search engines and screen readers recognize what a tag contains, so it's more efficient for the user to go through and understand.
SEO is Search Engine Optimization. It's a long term strategy to help you rank higher in search results. The basics of it are to have relevant search terms inside the <title>, <meta> description, and <h#> tags, but search engines often like more. To give more, I utilize schema.org's microdata. Doing this can give you a chance at having a snippet of your code inside the searh results, which can bring much more traffic to your site.
SEO matters because, let's say you want a website that sells organic dog food. So you make a business, get your suppliers, ship it to a warehouse, and set up your website with a WYSIWYG editor (WhatYouSeeIsWhatYouGet). Those editors usually only create a bunch of <div> tags for everything, which are generalized tags for essentially anything. With no relevant title, meta, heading tags, nor schema and other SEO markup: Your chance of getting any traffic from free search results is going to be 0. Especially if you're a local business. You won't even show up on google maps or anything else like that. The only way you will get any traffic with a site like that is by burning money into paid advertisements. On the other hand, if you did the research to set those properly with hot keywords, you registered with the major search engines to submit your sitemap(s) and your local business: you can expect free traffic. There are some other factors involved, but what I just said are some of the biggest and most important.
Hover your mouse over the images below, click to see them MUCH larger, and scroll as needed. I put more than just the art on this website here. This website looks prettier on Chrome or anything based off it because I could style the scroll bar with webkit, but it's still pretty on Firefox, just slightly less.