#website design tutorial

[lovjbini]

✩ CARRD INSPO by LOVJBINI // © owner

like or reblog if you useㅤෆㅤ2024.

✎﹏ please, put “ © owner – tutorial by @lovjbini ” in the description if you use our tutorial!

CLICK HERE FOR TUTORIAL

[seepunkrun]

mobile-friendly personal websites

@agentreynard wanted to hear more about how I made my website mobile friendly, so here's what I did:

First, crucially, I already had a one-column website that used css to style the HTML.

This made it easy to adapt to smaller screens...as soon as I learned the following three things thanks to Christopher Heng's How to Make a Mobile-Friendly Website: Responsive Design in CSS:

1. You need this magical incantation in the HEAD section of every page:

2. You need to tell your images to simmer down and not be stretching out the screen by being as wide as they want. They can be 100% wide and no more!! Add this to the css:

3. And then you'll probably need to give the page special instructions on how to act if it's being displayed on a small screen. This is the fiddly bit. What you put in here will be specific to your website, but it'll all go at the end of your css, tucked inside one of these:

That's what's known as a media query and it can take a variety of forms. This one says that if a screen is 320px wide or smaller, these rules apply. You can also use "min-width" if you want to tell it what to do if a screen is larger than a set number, and you can put whatever numbers in there you want.

Mine looks like this:

Those were all classes I used for the original layout, only now I want them to display differently on smaller screens. So I shrunk all the margins to remove white (and pink) space and now that same page looks something like this on mobile:

I did the same thing for the story files themselves, shrinking the margins so there's more room for text, but that took a different set of rules because they've got a different structure. I also added "back to top" links to the bottom of all my navigational pages.

Now, this is clearly not a foolproof or comprehensive plan. Everything I know about HTML and CSS I learned through trial and error, so I am barely qualified to say even this much. But these were the three things I needed to know before I could stick my hands in there and really shove stuff around.

[michi-chelle]

to play or not to play slow damage

[starscelly]

okay enough ppl have asked i will ATTEMPT… by this weekend at the latest hopefully. maybe. no promises. to get the template uploaded and a good tutorial for how to make the zine

[bluefigure]

Web Designing in Coimbatore

[crimsoneveline]

Making a prettier streamelements Chat display

I made another tutorial/let's try!

There I show you (and figure out myself) how to take the very simple streamelements chat display and turn it into something a bit more!

Just with simple CSS!

[theamazingannie]

Love seeing someone call AO3 a bad website in any way and then checking their bio and they’re 17. Like. Baby girl. You do not know the horrors of a badly coded fanfiction website. AO3 is a DREAM. We were in the TRENCHES back in the day

[webtutorsblog]

HTML elements are the basic building blocks of every website. They define the structure and content of a web page and enable developers to create engaging and interactive web pages that users love. Whether you're a beginner or an experienced web developer, understanding HTML elements is crucial for creating high-quality websites. With Webtutor.dev's comprehensive guide, you'll learn about the different types of HTML elements and how to use them effectively to create stunning web pages. From headings and paragraphs to links and images, this guide covers everything you need to know to get started with HTML elements. So, if you're looking to improve your web development skills, check out Webtutor.dev's guide to HTML elements today!

[divinector]

Simple Web Layout using Notepad Check out Divinector YouTube Channel For more

[frontendforever]

Subscribe & Support Guys.........

[lovjbini]

✩ CARRD INSPO by LOVJBINI // © decentbits

like or reblog if you useㅤෆㅤ2024.

✎﹏ please, put “ © decentbits – tutorial by @lovjbini ” in the description if you use our tutorial!

CLICK HERE FOR TUTORIAL

[sujanchandra]

[vintacha]

for all the artists out there, here are my favorite resources i use to learn!

Files

The Complete Famous Artist Course

Art Books and Resources

Art, Anatomy, and Color Books

PDF Files of Art Books

Internet Archive

YouTube

My YouTube Playlist of Tutorials

How to Draw Facial Features

Drawing and Art Advice

Drawing Lessons

Art Fundamentals

Anatomy of the Human Body

2D Animation

Perspective Drawing

Acland's Atlas ( GRAPHIC but very good for understanding anatomy! )

Websites

Pinterest Board for Poses

Another Pinterest Board for Poses

Pinterest Boards for References

Reference Angle

Figurosity

Sketch Daily

Line of Action

Human Anatomy

Animal Photo References

Humanae - Angélica Dass

Fine Art - Jimmy Nelson

Character Design References

CDR's Twitter Account

iamagco's Twitter Account

taco1704's Twitter Account

takuya_kakikata's Twitter Account

EtheringtonBro's Twitter Account

Drawabox

Color Wheel

Color Palette Cinema

Free Images and Pictures

Free Stock Photos

FILMGRAB

Screen Musings

William Nguyen Light Reference Tool

Animation References - sakugabooru

Animation References - Bodies in Motion

[agentromanoffsir]

neocities guide - why you should build your own html website

do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!

what is neocities?

neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."

why should I make my own website?

web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.

what would I even put on a website?

the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site

getting started: neocities/html guide

sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles

fun stuff to add to your site

want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have

web revival manifestos & communities

also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience

in conclusion

i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities

[reallycreative]

Scrolling Website Mockup Design with Canva: A Step-by-Step Guide