• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed ⇾ an outdated guide to bad coding ⇽

sox

sox

فلسطین زندہ باد
ff7d6c9f82655cfefb43b515a034ee31.jpg

hello hello! i'm making this thread to a) hopefully simplify the process of learning to code, and b) show you guys a nifty little tool that i use to design my codes before i even touch bbcode, which lets them look a lot cleaner and more cohesive than if i were to design them on the fly: Adobe XD! it's a completely free cloud-based design program that lets you design your layout and then copy the markup and style sheet to do as you please. i'm gonna post several videos explaining how i use the software, so pls ignore my ugly lisp voice and i hope this makes your lives easier! DISCLAIMER: Adobe XD doesn't work on Chromebooks!! so if you have a Chromebook, you may have to use Figma or some other editing software. I haven't used those as much, but I can learn alongside you and we can figure it out together c:


LEARNING ADOBE XD
- introduction: x
- formatting classes: x
- shadows: x

LEARNING ADOBE DREAMWEAVER
- walkthrough part one: x
- walkthrough part two: x
- walkthrough part three: x
- walkthrough part four: x

OTHER TUTORIALS
- object layering: x
 
Last edited:
Designing BBCode in Adobe XD: Introduction
The first part of our XD series (yes, that name makes me just as uncomfortable as it makes you) teaches us how to find our way around the software once it's been downloaded, how to format objects in our layouts, and how to turn the layout into useful code. Enjoy! My cat really wanted to make her presence known in the background.



​
 
chezmoi said:
thank you for your enthusiasm! i don't mind at all hehe it's an open forum for questions and comments c:
Click to expand...
okay but that first video was amazing and super helpful! i honestly can't wait to see more.
and you have a rly cute voice. it is not ugly (ง'̀-'́)ง
 
constellation said:
okay but that first video was amazing and super helpful! i honestly can't wait to see more.
and you have a rly cute voice. it is not ugly (ง'̀-'́)ง
Click to expand...
if you don't stop this instant ima plant a fat smooch!!! you've been warned!!!
 

Designing BBCode in Adobe XD: Formatting Classes
The second part of our XD series teaches us how to take the gross ugly markup that the software gave us and turn it into BBCode that we recognize and can manipulate. If a lot of these CSS properties look unfamiliar to you, let me know and I'll upload a tutorial on navigating classes. Enjoy!



​
 

Designing BBCode in Adobe XD: Shadows
The third part of our XD series teaches us how to make box and text shadows in our design, and how to convert those into the proper code for our BBCodes. Enjoy!



Code: 
[nobr]

[class=bkgd]

        position: relative;

        box-sizing: border-box;

        width: 300px;

        height: 400px;

        background-color: #3F0D16;

        overflow: hidden;

        margin-right: auto;

        margin-left: auto;

        padding: 0;

    [/class]

    [class=pic]

        position: absolute;

        overflow: visible;

        width: 100px;

        height: 100px;

        left: 100px;

        top: 21px;

        background: url(https://www.biography.com/.image/t_share/MTIwNjA4NjMzMjIxNzExMzcy/napoleon-i-9420291-2-402.jpg);

        background-size: 100%;

        border-radius: 200px;

        border: 2px solid #BC7837;

        box-shadow: 3px 3px 0px #000;

    [/class]

    [class=text]

        position: relative;

        overflow: auto;

        width: 260px;

        height: 220px;

        font-size: 10px;

        font-weight: normal;

        line-height: 11px;

        color: #A49582;

        padding: 5px;

        text-align: justify;

    [/class]

    [class=textcontainer]

        position: absolute;

        overflow: hidden;

        width: 250px;

        height: 220px;

        left: 25px;

        top: 165px;

        background-color: #042F28;

        border-radius: 10px;

        box-shadow: 3px 3px 0px #000;

    [/class]

    [class=title]

        position: absolute;

        left: 25px;

        top: 130px;

        overflow: hidden;

        width: 251px;

        height: 28px;

        text-align: center;

        font-family: Righteous;

        font-style: normal;

        font-weight: normal;

        font-size: 20px;

        color: rgba(164,149,130,1);

        text-shadow: 3px 3px 0px #000;

    [/class]

[/nobr]

[div class=bkgd]

    [div class=pic][/div]

    [div class=textcontainer][div class=text][font=Quicksand]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Ut venenatis tellus in metus vulputate eu scelerisque. Cursus mattis molestie a iaculis at erat pellentesque. Vel elit scelerisque mauris pellentesque pulvinar pellentesque. Ut etiam sit amet nisl purus in mollis nunc sed. Venenatis lectus magna fringilla urna. Erat imperdiet sed euismod nisi porta lorem mollis. Lectus urna duis convallis convallis tellus id interdum velit laoreet. In est ante in nibh mauris cursus. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Semper risus in hendrerit gravida rutrum quisque non. Cursus metus aliquam eleifend mi in nulla posuere. Elementum facilisis leo vel fringilla. Rhoncus urna neque viverra justo nec ultrices dui sapien eget.



Quam viverra orci sagittis eu volutpat odio facilisis. Lacus vel facilisis volutpat est. Id aliquet lectus proin nibh. Ultricies tristique nulla aliquet enim tortor at auctor. Mi quis hendrerit dolor magna. Risus feugiat in ante metus. Magnis dis parturient montes nascetur ridiculus. Phasellus egestas tellus rutrum tellus. Dictum non consectetur a erat nam. Tincidunt tortor aliquam nulla facilisi cras. Aliquam nulla facilisi cras fermentum.



Non quam lacus suspendisse faucibus. Consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis. Convallis a cras semper auctor neque vitae tempus quam. Eu volutpat odio facilisis mauris sit amet massa. Consectetur purus ut faucibus pulvinar elementum integer. Scelerisque felis imperdiet proin fermentum leo. Fringilla est ullamcorper eget nulla facilisi. Fermentum iaculis eu non diam phasellus vestibulum lorem. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Eget nunc scelerisque viverra mauris. Dui faucibus in ornare quam. Rhoncus urna neque viverra justo nec. Ultricies leo integer malesuada nunc. Porttitor massa id neque aliquam vestibulum morbi. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Id aliquet risus feugiat in ante.



Neque vitae tempus quam pellentesque. Nulla facilisi cras fermentum odio eu feugiat. Blandit libero volutpat sed cras ornare. Dictum at tempor commodo ullamcorper a lacus vestibulum. Id faucibus nisl tincidunt eget nullam non nisi est sit. Ut porttitor leo a diam sollicitudin tempor id. Amet mauris commodo quis imperdiet massa tincidunt. Nisl condimentum id venenatis a. Pharetra sit amet aliquam id diam maecenas ultricies. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Est velit egestas dui id ornare. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Mi quis hendrerit dolor magna eget. Eget gravida cum sociis natoque penatibus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Id interdum velit laoreet id donec ultrices tincidunt. Sapien eget mi proin sed libero enim sed faucibus.



Lectus nulla at volutpat diam ut venenatis tellus. Fames ac turpis egestas sed tempus urna et. Sit amet mattis vulputate enim. Quis blandit turpis cursus in hac. Nullam ac tortor vitae purus. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Tincidunt id aliquet risus feugiat in ante metus. Ultrices sagittis orci a scelerisque purus semper eget duis. Et tortor consequat id porta nibh venenatis cras sed felis. Enim nunc faucibus a pellentesque sit. Aliquam etiam erat velit scelerisque in dictum non consectetur. Accumsan tortor posuere ac ut consequat semper viverra nam. Pellentesque massa placerat duis ultricies lacus sed turpis. Posuere lorem ipsum dolor sit amet consectetur adipiscing.





[/font][/div][/div]

    [div class=title]NAPOLEAN BONAPARTE[/div]

[/div]
 
Last edited:
irenic said:
I don't code a whole lot due to work and school so watching this inspires me to create some codes with adobe xd and see what i can do
Click to expand...
oof my heart is happy ;-; i hope you like it!! i’m sure you’ll make some bomb codes
 
I really enjoy watching you videos! Your coding is really nice ;; I had a quick question as to how easy it would be to achieve putting text over an image? Or even a solid colored background with text over an image?

I'm relatively new to BBCoding + and wanted to know how easy// hard it is. I don't have Adobe XD and I'm just not the greatest at coding in general!
 
iMeisaki said:
I really enjoy watching you videos! Your coding is really nice ;; I had a quick question as to how easy it would be to achieve putting text over an image? Or even a solid colored background with text over an image?

I'm relatively new to BBCoding + and wanted to know how easy// hard it is. I don't have Adobe XD and I'm just not the greatest at coding in general!
Click to expand...
hello! thank you so much for your kind words c: it's pretty easy to layer objects/text over images, so long as you have your divs in the right order. let's say you have a div for you image, and a div for your text. if you write the code for your text before the code for the image, then the image will cover the text and you won't be able to see your words. here's a quick example:

[class=image] position: absolute; overflow: visible; width: 300px; height: 400px; top: 40px; left: 90px; background: url(https://i.pinimg.com/564x/56/89/3d/56893d92c0b1ecc5dfd239bae2b77cc0.jpg); background-size: 100%; border-radius: 100%; border: 10px solid #fff9e8; [/class] [class=text] position: absolute; width: auto; top: 55px; left: 80px; margin-left: auto; margin-right: auto; color: #1f0c00; font-size: 60px; font-weight: 700; transform: rotate(8deg); text-shadow: 2px 2px 0px #fff9e8; [/class]
[div class=image]
[div class=text]life's a bitch, boy.[/div] [/div]
Code: 
[nobr]
[class=image]
   position: absolute;
   overflow: visible;
   width: 300px;
   height: 400px;
   top: 40px;
   left: 90px;
   background: url(https://i.pinimg.com/564x/56/89/3d/56893d92c0b1ecc5dfd239bae2b77cc0.jpg);
   background-size: 100%;
   border-radius: 100%;
   border: 10px solid #fff9e8;
[/class]
[class=text]
   position: absolute;
   width: auto;
   top: 55px;
   left: 80px;
   margin-left: auto;
   margin-right: auto;
   color: #1f0c00;
   font-size: 60px;
   font-weight: 700;
   transform: rotate(8deg);
   text-shadow: 2px 2px 0px #fff9e8;
[/class]

[div=background-color:#ebb93b;position:relative;height:500px;width:500px;margin-left:auto;margin-right:auto;]
[div class=image][/div]
[div class=text][font=Arizonia]life's a bitch, boy.[/font][/div]
[/div]
[/nobr]

in this code, i have two classes: the image and the text. the background div is just for some contrast, which is why i didn't give it a class. you can use this same format with putting other objects over pictures, too. i hope this helps!
 
Seriously love this! I can’t wait to get my new laptop so I can try all of this myself! 🥳 So helpful. 😋
 
Editing BBCode in Adobe Dreamweaver: Part One
A tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: Part one of unknown many bc who knows how long it'll take to edit this. Every code is a gamble lol


​
 
Here's a good resource that talks about alternatives to Dreamweaver if you're interested in this process! As I said in the video, it's definitely NOT a necessary step, but it saves me a whole lot of time and helps me pump out a code in a day or two at most.
 
Editing BBCode in Adobe Dreamweaver: Part Two
Part 2/? of our tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: In this video, we do a lot of the tedious adjusting and scaling objects to fit them exactly how we want, as well as format text that goes in those objects,


​
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

marrimola
Help Coding For Mobile!
Replies
2
Views
101
marrimola
marrimola
marrimola
Resource marri's menagerie ⋆｡°✩ various attempts at coding
2
Replies
37
Views
761
marrimola
marrimola
Deluna
Closed Muh Codes
Replies
4
Views
190
Deluna
Deluna
opaline
Resource read all about it — freebies
Replies
12
Views
737
CHUUYAS_HAT
CHUUYAS_HAT
summerwine
Help pls help me with tabs !!!
Replies
2
Views
118
summerwine
summerwine
Back
Top