Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
June 16, 2024 - @167.25 (what is this?)
Forum activity rating: Four Star Posts: 52/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :happy: Open the all windows! Your mind needs storms and air! :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  I learned CSS grids !!!


« previous next »
Pages: [1] Print
Author Topic: I learned CSS grids !!!  (Read 1485 times)
Pepyogurt
Casual Poster ⚓︎
*


Käse, käse, wo ist die käse?

StatusCafe: pepyo
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« on: July 02, 2022 @794.86 »

I'm not sure where to put this since it is about website making, but I also treat everything I make the same way as my art, but!! The other day I was wanting to make another webpage for my OCs but the way I wanted it to be laid out just wasn't working with flexbox, so I finally buckled down and learned CSS grid!

For anyone looking to do the same, this is the tutorial I used (https://youtu.be/9zBsdzdE4sM). I think everything you need to know is in it, though there's probably more in-depth info that can be found elsewhere.

As for the webpage I'm building, I want to share how it looks!! Even though it's gonna need some more work, I personally think it's looking classy already



Alongside having just learned grids, I'm also trying out using Atom to edit the document instead of Codepen.
Logged

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: July 03, 2022 @10.14 »

Ooo, well done! Iv never used grids so I'll give it a watch! (My web skills are officially 10 years old this yea aaaahhhh) And it totally does look classy, I really like the green colour scheme :cheesy: Making your site locally is always a good idea! Do you find it improves your work?
I look forward to seeing how it turns out :ozwomp:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Pepyogurt
Casual Poster ⚓︎
*


Käse, käse, wo ist die käse?

StatusCafe: pepyo
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: July 03, 2022 @99.81 »

Making your site locally is always a good idea! Do you find it improves your work?

In some ways, I'm gonna miss using Codepen cuz' with long strings of text or code, it'd automatically wrap around from the edge of the screen to the beginning. I think I'll commit to using Atom in the future however since it allows me to type tags through short cuts (for example: In the past I was completely fine typing out '<div></div>' in its entirety, but now I can just type 'div':wink:. I'm still a slow coder, but at least I won't have to live through that tedium anymore.

I also find that shortcut functionality is really useful for editing CSS. There's a lot of terms I don't remember off the top of my head, so that auto-complete functionality is really useful thanks to the suggestions Atom gives.
Logged

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #3 on: July 03, 2022 @615.60 »

Quote
automatically wrap around from the edge of the screen to the beginning
Thats typically called something like word-wrap and its 100% a feature in Atom (some editors have it off or on by default) but you can usually enable it in the editor view settings!
Auto complete spoils you! My editor atm does it, but not nearly as well as VSCode and it makes me jealous everytime I use other editors :ohdear: If you set it up right it should also complete file paths for your images and stuff too. Its even more amazing when you start doing things like Javascript and it will auto complete functions and stuff!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Pepyogurt
Casual Poster ⚓︎
*


Käse, käse, wo ist die käse?

StatusCafe: pepyo
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: July 03, 2022 @700.74 »

Thats typically called something like word-wrap and its 100% a feature in Atom (some editors have it off or on by default) but you can usually enable it in the editor view settings!

Ohhhh my god! I looked around a little and Atom does have it. For my fellow Atom users out there, its under View > Enable Soft Wrap. And here I was... making the text wrap by indenting it myself, weh!

I look forward to the possible Javascript functionalities once I actually learn it...!
Logged

cinni
Full Member ⚓︎
***


believe in your dreams <3

SpaceHey: Friend Me!
StatusCafe: cinni

View Profile WWW

First 1000 Members!OG! Joined 2021!
« Reply #5 on: July 04, 2022 @124.58 »

very nice!! ^.^ the color palette is very soooothing :ha: i like how css grids make it easier to make a layout responsive. i tried to convert my site layout into css grids for better mobile accessibility but getting it to look the same while changing the code was a bit of a challenge so i gave up for now hehe
Logged

RodFireProductions
Jr. Member ⚓︎
**


🍄🖤🐀

StatusCafe: rodfire8181
iMood: rodfire8181
Itch.io: My Games

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #6 on: January 31, 2023 @220.25 »

I'm a little late to this, but CSS grids are the reason I'm able to easily manipulate my website layouts and make them mobile friendly. Over time I've been using them more and more. This guide is like my holy grail; I reference it a lot.

Here's an example that I'm quite proud of (sorry that it's blurry, I optimized the life out of it):
Logged

we art, web dev, and game dev
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (2)

Things you recently learned

Started by MemoryBoard ☺︎ ∙ General Interests

Replies: 17
Views: 1358
Last post July 05, 2023 @679.92
by Memory
what's something important you learned this year?

Started by KatKingBoard ☺︎ ∙ General Interests

Replies: 7
Views: 495
Last post January 24, 2024 @949.00
by J. Soda

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi