#learn codepen

[marsdevs]

How to Use CodePen - Learn with us!

CodePen is an excellent platform for testing bugs, collaborating, and discovering new ideas. The best part is it can accelerate your coding Learn how with us! Today, we'll go over what CodePen is, what you can do with it, how you can use it, and why it can be a beneficial tool for speeding up your front-end development.

[codingflicks]

Creative Codepen CSS Animation Snippets

[adz]

hi! do you have any tips on learning to program or resources that helped you along the way? so far all i know is html css and a little bit of js but i want to work my way up to the c languages someday and its kinda daunting as a goal without going to uni v": thank you in advance for any advice!

You know more than I do!! I bet some of my followers are programmers tho, pls help this person out with resources c:

i do have the codepen site saved in my bookmarks, maybe it'll be useful to you? ive found some of the examples there helpful in the past!

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

[visvivathms]

VISVIVA PRESENTS: PIRR a simplistic, elegant free theme

what's up everybody! this is visvivacodes, back to share another theme with all you lovely people! this is a simple navigation page for you to store your links and keep your blog organized. I used this one as some more practice with flexbox and transitions, so you'll see it's got a responsive design and the main container changes on hover. I hope you all love it and thanks so much for your support! pirr: noun. a gentle wind

NAVIGATION I: PIRR — join my discord!

PREVIEW: TUMBLR / CODEPEN DOWNLOAD: GITHUB / PASTEBIN / CODEPEN

FEATURES

no coding knowledge needed! fully customize from the comfort of an easily comprehensible root element (tutorial available on my discord)

responsive design that changes dimensions as your screen gets smaller - I am still learning so it doesn't look perfect on phones but it is functional! as time goes on and I learn more about flexbox, I will return to this code to make it more responsive :)

a choice of 16 FONTS for you to change the look of your navigation's written content, including your title, subtitle, and links!

link sections with inner scroll — all link sections will automatically gain a scrollbar if they get long, though I do recommend sticking to the original 18 links as it keeps the tidiness

clean and easy to read code!

if you download this pagee theme, please give this post a like or reblog!

I just had surgery yesterday so I might not be around much to answer any qustions. if you run into any problems at all, please do not hesitate to message me! I am aware of an issue inherent to flexbox where margins and padding do not work as intended in different browsers, so please let me know if this page is looking very strange in your browser!

PRICE & DONATIONS

This theme is a FREE theme! I love to code so my themes will be free for now. If you would like to support me and my work, please consider leaving a tip or buying me a coffee via cashapp ( $visviva ) :)

[helenrourke]

Hey there! 👋 I'm new to posting in archive of our own, so what does this "skin" mean? I didn't go through it as I feared it might change the story formatting or worse delete it lol.

Sorry if it's a lame question

I can answer that. Let's thank Grad School for teaching me the basics of how-to code.

So, when they ask you what kind of "skin" you would like, it’s typically for aesthetic reasons.  So, the selections they have offered you have been coded to achieve a certain aesthetic.  If you click here, you can see they explain how the work skins are intended for.  In the case of the two they offered they were intended for writers to utilize in those fandoms.

Skins are not just for works on AO3; they can be used for the site to change how it looks for you.  For example, the screen shot I’m showed above is one of the pre-made site skins that changes the site to a bluer based theme.  To can access this skin and more over here.

Now how do I use skins myself. I explained that I coded right. I have bad eyesight so I coded a site skin for myself that allows the text on AO3 bigger, so I am able to read. Yes that’s the great thing about coding you can do something as simple as that if you have the skills to do it.

Also did you know I use custom work skins in some of my works. I used a tutorial by C Ryan Smith (AiedailEclipsed) here to give my fic The Imperial House custom title chapters. That is how my fic has the Act One chapter title over Chapter One like most AO3 fics. Again, this wasn't too hard for me to do because I was taught basic coding skills in Grad School, and I've been taught how to code by my friends who are in field of web development and graphic design. I even have a codepen where they would teach me how to learn certain skills, but I haven't touched it in over a year.

Anyway, this was a bit of a rant, and I wouldn't call myself an expert in coding by any means. When I have issues I text my friend Luna lol Also I apologize if this doesn't make too much sense, I’m currently in home in bed because I’m feeling under the weather.

[athenacodes]

hello! so another tutorial - this time on grid and auto resizing images inside it with an emphasis on responsiveness and making that easier on you. basically, this tutorial should be named team no math, but we're call this the grid images tutorial.

here is the codepen you can work off of for this one. here is a link to the generator i was playing with. here is credit for the images i grabbed to show this with.

i did have someone message that i don't speak very eloquently and i want to apologize. i try to explain in a way that anyone can understand and i also speak in a train of consciousness, unprepared way so please don't think i am uncaring in that, i'm just trying to show some small tips and tricks in a straightforward, won't take up much time way. i will try to speak with a little more thought and less filler words, but i can't promise to be perfect in that since this is over video versus text.

anyway, the template i'm using as an example is free to use as a base, without credit, same with all the others in my tutorials so far, so long as you are using it to actually make your own. i would like to say with this one please don't use it with no significant changes and try to claim it as your own. throw some credit in your guidebook or something, i don't mind, just throw a bone on that one because at that point it is solely my template. but even then, you're free to use it with credit.

anyway, go wild, i hope this helps you learn, adds a new trick to your repertoire, or just overall helps alleviate some of the pressures of coding off of someone. have a great day, rpc!

[anbroids]

hi!!! I loved ur hometsuck kids theme sm it made me want to go back into coding after so long(^^; I wanted to know how u learned it and if u have any tips for newcomers. Ty !!

oh holy shit this is ask is SO SWEET :,) thank you so much anon and i’m so happy to hear it made you want to get back into coding! we seriously need a tumblr theme renaissance. what i would give to see people coding and sharing/reblogging themes like the older days on tumblr. life could be dream.

i learned html and css from making my own tumblr themes as a kid! i think tumblr themes are literally such a good introduction into learning front-end development. BUT to be fair i also took a few programming classes and was a big coding nerd in school and that definitely helped me become a lot more comfortable with making themes from scratch and adding custom script. if you are interested in learning javascript, learnjavascript.online is a great source for starting out and getting some practice!

i think a great way to get your bearings is to look at some base themes and poke around at the code just to familiarize yourself with some of the tumblr-specific syntax. @theme-hunter has a great database of themes to look at with some tutorials for beginners compiled here. i think the best way to learn how div blocks function and what you are capable of changing is by playing around with preexisting code and seeing what you can create. i did this until i was comfortable enough to make a few base themes of my own from scratch that i can go back and reference when starting a new theme or coding project.

tumblr also has a list of their block elements online with some introduction to custom themes, which is helpful to reference when styling the features built into each tumblr blog like title, descriptions, posts, notes, etc.

as far as tips for newcomers, here’s a few things top of mind:

google is your best friend, seriously, i can't tell you how many times i am googling the most rudimentary of things because i'm always forgetting little syntax things. chances are, if there's something you want to achieve with code there will be someone on stack overflow with some advice, or a tutorial on codepen or w3schools that you can use as reference.

troubleshoot with inspect element! i usually build my code straight into the tumblr theme html and css on a sideblog, save, and then keep a tab of that blog open that i can refresh and inspect element to look for errors in the console. i think firefox works the best, but i would recommend always loading your blog in a few different browsers since there is css syntax that is specific to mozilla or chrome (eg. custom scrollbars or pure-css animations)

there are lot of browser extensions that can make the coding process easier! i recommend eye dropper for pulling and matching hex codes. i also use fonts ninja a lot for getting accurate weights and names for custom fonts. a few more that come to mind are window resizer and css viewer (chrome/mozilla) if you want to check those out!

happy coding!

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

[werewolf-codes]

Hey there! I think that your codes are all really awesome! Do you have any tips for relatively new coders? I've been a lime on WoJM for quite a while now, and a bubblegum for a bit too. I would love to be able to code my own lessons one day. So, I guess that was a really convoluted way of saying: Do you have any resources that helped you when you were first starting out?

Thanks for your time.

Hope you're having a good day. <3

I.L

Hey hello! Thank you so much that means a lot! Honestly I think it depends on what way works with you the best. Personally I am more of a physical / Hands on learner so I learned how to code fast by looking at other codes for reference. This doesn't mean like copy and paste someone else's code but like, just look at how everything is laid out and figure out what's what. I also got a lot of help from my friend Holly. They just taught me how to insert fonts!!!

And if you learn best by reading and watching videos I recommend using W3schools, it teachers you what everything is and has the codes. I also watched this video: Learn HTML . If you want to start making codes I would 100% start with wallpost codes. They are simple and easy and a lot of fun to make. Then slowly work your way up, to lessons, articles, PTs & backstories and then books. Defiantly don't you need to rush into the process and take your time on each code!!!

One last thing, I honestly wouldn't use W3schools for actually making codes because if you exit the site on accident, refresh by mistake or close chrome or google then all your progress is gone right away. I would use something like Codepen to make your codes!

I hope this helped some!!!

Love, Tobias.

[codingflicks]

Hover Effects inspiration

[makers-muse]

Unleashing Creativity: Teaching Web Development Basics

Gaining a foundational understanding of web development is becoming just as important for students as traditional education in this age of digital innovation. Students’ creativity is stimulated and they are prepared for a world in which having an online presence is crucial by being introduced to HTML, CSS, and fundamental web design concepts.

Here are some methods teachers can use:

Project-Based Learning: Plan experiential learning opportunities that walk students through building a simple website. Introduce CSS for styling gradually after starting with basic HTML structures.

Platform: Use online platforms like CodePen, Glitch, or Repl.it to provide a real-time coding environment. These platforms allow students to see instant visual results as they code.

Interactive Tutorials: Introduce interactive tutorials that guide students through the basics of HTML and CSS. Platforms like Codecademy or freeCodeCamp offer step-by-step lessons with immediate feedback.

Platform: Codecademy, freeCodeCamp, and Khan Academy are excellent platforms for interactive tutorials, allowing students to learn at their own pace.

Collaborative Coding: Encourage your students to collaborate on projects during collaborative coding sessions. This encourages collaboration and facilitates peer learning among students.

Platform: Utilize version control systems like GitHub, GitLab, or Bitbucket. These platforms enable students to collaborate on code, manage versions, and receive feedback from peers and teachers.

Web Development Bootcamps: Introduce mini “BOOTCAMP” sessions where students immerse themselves in intensive, focused learning for a short period. Cover key HTML and CSS concepts during these sessions.

Platform: Platforms like Udacity, Coursera, or edX offer short-term courses and bootcamps on web development that can be adapted for classroom use.

Showcasing Web Design Principles: Teach not just the coding but also the principles of good web design. Discuss topics like user experience (UX) and user interface (UI) design.

Throughout your classes, provide fascinating information about web development. For example, did you know that the very first website ever made is still up and running? Being able to share these trivia not only makes learning more enjoyable but also piques students’ interests.

For kids, adding a foundational understanding of web programming to upper-grade courses opens up a world of opportunities. Makers’ Muse Ed-Tech provides the materials and tools required to make learning successful and interesting. Teachers may spark students’ interest in technology and equip them to become the next generation of digital landscape creators by teaching HTML, CSS, and fundamental web design principles. Together with Makers’ Muse, let’s educators take our students on this fascinating adventure that will cultivate their creativity and provide them with the tools they need to succeed in the rapidly changing field of web development.

[skinsort]

Hello, I've been thinking about code and selling code and sharing code in the rpc because someone posed the question to me of what I'd want to happen if someone was heavily editing a skin I sold, and to be honest, my first instinct was 'take my name off it'. That was met with some surprise, but let me explain why.

Code, to me, is a largely democratic landscape. If you want to learn, hundreds of thousands of people and websites have come together to teach you. Masses of people share open source work on codepen, stack overflow etc. Code as a skill is like assembling an especially abstract puzzle where you can only think about the pieces, not really see them. But most puzzles have similar strategies to solve- start with the corner pieces, then the edges, then the most recognizable patterns etc etc etc working your way down to the more and more difficult details. Most of code- most of my job writing code- involves minimizing the amount of time working on those shared strategies so we can have more time to work on the the interesting bits, the hard bits. the bits that make the site we're working on unique and useful. Frankly, jcink is the easy part of code, by and large. Your data is already structured and provided to you in a very particular way. It is inefficiently, but largely documented. Many other people have solved all the problems you are likely to have trying to build a skin. Skinning is html and css for the vast majority of items. It is the easy stuff. If I sell code, that code is now the property of the person I sold it to. It is not shareable or redistributable. You can't take my code and resell it as your own, but as far as I'm concerned you can do whatever you want with it. If I solved problems that might otherwise feel difficult (accessibility and responsiveness come to mind) cool. You can solve the easy ones, like styling and colors and fonts you like. You can add or subtract things that vibe with what you want that code to do. Once it is sold, it is yours to do with what you like when it comes to personal use. This is true of almost all coding contracts that exist in the entire world. If it weren't, no one would ever hire external contractors to do any work for their company, and I can tell you now, even companies which could fully afford to do all their tech in house absolutely do not in 99% of cases if their business isn't selling their own tech. The rule is generally- you may do anything you like with this, except resell it to someone else. So why take my name off it? I don't endorse how other people code. Even in my professional life, I've taken projects off my portfolio because the client took a project I worked on and broke it (imo), often with other professional developers doing the breaking. If a prospective employer were to go look at it, I'd be embarrassed by what it looks like today. Tell me why I (and my team) created a website that was fully responsive, and they went back to make it adaptive in the year of our lord 2022 because they preferred to have pixel perfect views at 3 specific breakpoints rather than a responsive site. I don't know, it's infuriating. I can't cite that project as an example of my work anymore, because it isn't. I would never leave a site in that state.

So, my first instinct with the idea of people using a skin i sell them as a base is 'take my name off it.' I don't want to be associated if responsive/accessible features are lost due to others working on a skin I wrote. But at the same time, where is the line between using something as a base, and editing a few small features? I certainly don't want to be an arbiter of that, or have to field questions or navigate feelings about it. In fact, personally I would not feel upset at all if someone used a paid for skin as a base, and inviting that kind of discussion is the only way I possibly could get upset since people have weird attitudes about a lot of this stuff. So I think the more practical standard is just to put credit, but make it explicit that the work has been heavily altered. Don't resell or redistribute, and you're golden, imo. Anyway, those are my feelings as someone who writes code for a living. I'm interested to hear counterpoints - constructively of course.

[rashardmro]

# css images? cool shit I learned on codepen

rashardmro