#css learning
Explore tagged Tumblr posts
Text
/) /) (˶•-•˶) ♡ ; Complete reviews of CSS learning games by bunnydevs #001 (づ づ
CSS DINER:
↳ Link Here ༉‧₊ ↳ 7/10 ༉‧₊ ↳ super cute ༉‧₊ ↳ helps visualize what's going on ༉‧₊ ↳ a little difficult to understand sometimes & a better "help" section would be useful for when people get stuck! ༉‧₊
I completed up until level 15 before it started becoming confusing for me and I needed outside assistance. While I understood on a base level, I would have really enjoyed a few more examples that were in a similar setting. E.G. (selecting the top apple instead of the top orange) Specifically when becoming confused.
Did this game help me understand and use css? YES! absolutely.
FLEXBOX FROGGY:
↳ Link Here ༉‧₊ ↳ 9/10 ༉‧₊ ↳ instructions are very clear + the tools are wonderful ༉‧₊ ↳ visuals are amazing༉‧₊ ↳ easy but still makes you think༉‧₊
Finished all 24 levels! Helped a lot with visualizing what's going the hell on with flexbox and really made me think about my choices. While I didn't have to stare at the screen confused for 20 minutes, I did need to think about my choices. Bonus points for having the abilities of each thing there the whole time in case you forget!
What games should I review next? Send them into my inbox ! suggestions for all prog languages are welcome.
#filed under: bunnytalks#codeblr#filed under: bunny reviews#progblr#programming#coding#css#html#css resources#css games#css learning
23 notes
·
View notes
Text
Essentials You Need to Become a Web Developer
HTML, CSS, and JavaScript Mastery
Text Editor/Integrated Development Environment (IDE): Popular choices include Visual Studio Code, Sublime Text.
Version Control/Git: Platforms like GitHub, GitLab, and Bitbucket allow you to track changes, collaborate with others, and contribute to open-source projects.
Responsive Web Design Skills: Learn CSS frameworks like Bootstrap or Flexbox and master media queries
Understanding of Web Browsers: Familiarize yourself with browser developer tools for debugging and testing your code.
Front-End Frameworks: for example : React, Angular, or Vue.js are powerful tools for building dynamic and interactive web applications.
Back-End Development Skills: Understanding server-side programming languages (e.g., Node.js, Python, Ruby , php) and databases (e.g., MySQL, MongoDB)
Web Hosting and Deployment Knowledge: Platforms like Heroku, Vercel , Netlify, or AWS can help simplify this process.
Basic DevOps and CI/CD Understanding
Soft Skills and Problem-Solving: Effective communication, teamwork, and problem-solving skills
Confidence in Yourself: Confidence is a powerful asset. Believe in your abilities, and don't be afraid to take on challenging projects. The more you trust yourself, the more you'll be able to tackle complex coding tasks and overcome obstacles with determination.
#code#codeblr#css#html#javascript#java development company#python#studyblr#progblr#programming#comp sci#web design#web developers#web development#website design#webdev#website#tech#html css#learn to code
2K notes
·
View notes
Text
honestly I don't know where I'd end up social media wise if tumblr went down for real but yanno where you'll find me regardless? ay oh fucking three babey
#listen if you're like 'where did megs end up' that will be the most reliable place#honestly bluesky seems most likely but like#would i frequent it? who knows#i do actually have to learn xml html and css this quarter so if I can figure my shit out i may actually get a proper site up and running#friendly reminder i do have a site rn for original writing but it's really just a landing page#ugh i have so much to fuckin DO
125 notes
·
View notes
Text
hello, magnus protocol fans! are You searching for a transcript of the first episode? do You, despite knowing that there are official PDF transcripts of the magnus protocol on the rusty quill website, wish there were also a handy website format that you can pull up on your phone? perhaps one with a faded yellow background even?
well you're in luck!
enjoy :)
(all credit for the base code goes to @snarp, whose TMA transcript website is the greatest of all time and whose blanket permission i used to clone this repository)
#tmagp#the magnus protocol#if there are any problems with this website please message me it SHOULD work but as i have learned from trice forgotten. it never does.#snarp if you want me to credit you in a different way let me know#button i am very sorry i didnt manage to get the forum CSS in there… i might bite the bullet one day if there are more in that format#jules.txt
571 notes
·
View notes
Text
some silly bones cuz i dont draw him nearly enough
alt colours for him as a little fairy below
i did this by accident and i liked it too much to ignore
#havent been drawing as much cuz ive been feverishly learning html and css its so so fun#myart#bones mccoy#jim kirk#mckirk#star trek#star trek tos#star trek fanart
178 notes
·
View notes
Text
Dicking around with my website as I am wont to do from time to time and cursing violently about not knowing more coding than I do
#one day I will learn#but for now I will be a blight upon my patient friends#website#messing about#css
94 notes
·
View notes
Text
hi hi i'm a new langblr sideblog ! my name is aster, i'm 25, and i use fae/fleur/it pronouns.
currently studying japanese and newly chinese but i learned french for some years too and i dabble in other languages! i am the number one duolingo hater boooo. and i might post about learning to code and the books i'm reading too.
maybe reblog so i can find ppl to follow? :D
#langblr#language#light academia#learn hebrew#chinese langblr#language learning#mandarin#learning languages#learn japanese#learning japanese#japanese langblr#japanese language#learn mandarin#studyblr#french langblr#coding#learn to code#html css
48 notes
·
View notes
Text
Title: Possible Guide To Basic Code On AO3
Summary:
This is a list of helpful tips and tricks I have come across in my time using AO3. I by no means know how to code, this was all found through internet searches and trial and error. Basically a whole lot of 'fuck around and find out'. It includes things like the basics of creating a site skin (that I muddled my way through) like adding personalised colours/font/text size, how to block tags permanently (so you don't have to filter it out of every search manually), and how to add cool things like hyperlinks/drop down menus/coloured text/ bold & italics text anywhere (I know it shows you this one but it took me way too long to find this feature).
This is something I'm making up as I learn myself, so if it doesn't work please forgive me. 🙏
#ao3#ao3 author#ao3 link#ao3 writer#ao3 guide#ao3 code#html#css#html css#html coding#ao3 skins#ao3 site skin#ao3 stuff#ao3 skills#check it ouuuut#for yourself#its great#im learning
74 notes
·
View notes
Text
i can't hang out with the haunted eye
though i don't know why
#myart#animorphs#crayak#got carried away with this while i was customizing the webpage for this sideblog#im learning css btw. soon this blog will be so cool you wont even know its tumblr anymore#i'm torn between making it andalite tech-themed or crayak-themed to keep in tandem with the username#what do U guys Thank....#theres also the secret third option of making it chee/pemalite themed which i also have a pinterest board for :3c
111 notes
·
View notes
Text
Preview of a site skin I'm currently working on.
It's actually supposed to be very colorful, but I made it black and white out of curiosity and actually like it almost better that way!? Oh well, I was planning on making a few different color versions anyway.
#this is actually my third (?) attempt at making a full site skin#maybe this time I'll actually complete it!#although that could still take quite a while#I realize time and again that I still have a lot to learn#and the way ao3 is coded keeps putting obstacles in my way#archive of our own#ao3#ao3 skins#ao3 site skins#ao3 css#ao3 skin neos
36 notes
·
View notes
Text
Welcome back, coding enthusiasts! Today we'll talk about Git & Github , the must-know duo for any modern developer. Whether you're just starting out or need a refresher, this guide will walk you through everything from setup to intermediate-level use. Let’s jump in!
What is Git?
Git is a version control system. It helps you as a developer:
Track changes in your codebase, so if anything breaks, you can go back to a previous version. (Trust me, this happens more often than you’d think!)
Collaborate with others : whether you're working on a team project or contributing to an open-source repo, Git helps manage multiple versions of a project.
In short, Git allows you to work smarter, not harder. Developers who aren't familiar with the basics of Git? Let’s just say they’re missing a key tool in their toolkit.
What is Github ?
GitHub is a web-based platform that uses Git for version control and collaboration. It provides an interface to manage your repositories, track bugs, request new features, and much more. Think of it as a place where your Git repositories live, and where real teamwork happens. You can collaborate, share your code, and contribute to other projects, all while keeping everything well-organized.
Git & Github : not the same thing !
Git is the tool you use to create repositories and manage code on your local machine while GitHub is the platform where you host those repositories and collaborate with others. You can also host Git repositories on other platforms like GitLab and BitBucket, but GitHub is the most popular.
Installing Git (Windows, Linux, and macOS Users)
You can go ahead and download Git for your platform from (git-scm.com)
Using Git
You can use Git either through the command line (Terminal) or through a GUI. However, as a developer, it’s highly recommended to learn the terminal approach. Why? Because it’s more efficient, and understanding the commands will give you a better grasp of how Git works under the hood.
GitWorkflow
Git operates in several key areas:
Working directory (on your local machine)
Staging area (where changes are prepared to be committed)
Local repository (stored in the hidden .git directory in your project)
Remote repository (the version of the project stored on GitHub or other hosting platforms)
Let’s look at the basic commands that move code between these areas:
git init: Initializes a Git repository in your project directory, creating the .git folder.
git add: Adds your files to the staging area, where they’re prepared for committing.
git commit: Commits your staged files to your local repository.
git log: Shows the history of commits.
git push: Pushes your changes to the remote repository (like GitHub).
git pull: Pulls changes from the remote repository into your working directory.
git clone: Clones a remote repository to your local machine, maintaining the connection to the remote repo.
Branching and merging
When working in a team, it’s important to never mess up the main branch (often called master or main). This is the core of your project, and it's essential to keep it stable.
To do this, we branch out for new features or bug fixes. This way, you can make changes without affecting the main project until you’re ready to merge. Only merge your work back into the main branch once you're confident that it’s ready to go.
Getting Started: From Installation to Intermediate
Now, let’s go step-by-step through the process of using Git and GitHub from installation to pushing your first project.
Configuring Git
After installing Git, you’ll need to tell Git your name and email. This helps Git keep track of who made each change. To do this, run:
Master vs. Main Branch
By default, Git used to name the default branch master, but GitHub switched it to main for inclusivity reasons. To avoid confusion, check your default branch:
Pushing Changes to GitHub
Let’s go through an example of pushing your changes to GitHub.
First, initialize Git in your project directory:
Then to get the ‘untracked files’ , the files that we haven’t added yet to our staging area , we run the command
Now that you’ve guessed it we’re gonna run the git add command , you can add your files individually by running git add name or all at once like I did here
And finally it's time to commit our file to the local repository
Now, create a new repository on GitHub (it’s easy , just follow these instructions along with me)
Assuming you already created your github account you’ll go to this link and change username by your actual username : https://github.com/username?tab=repositories , then follow these instructions :
You can add a name and choose wether you repo can be public or private for now and forget about everything else for now.
Once your repository created on github , you’ll get this :
As you might’ve noticed, we’ve already run all these commands , all what’s left for us to do is to push our files from our local repository to our remote repository , so let’s go ahead and do that
And just like this we have successfully pushed our files to the remote repository
Here, you can see the default branch main, the total number of branches, your latest commit message along with how long ago it was made, and the number of commits you've made on that branch.
Now what is a Readme file ?
A README file is a markdown file where you can add any relevant information about your code or the specific functionality in a particular branch—since each branch can have its own README.
It also serves as a guide for anyone who clones your repository, showing them exactly how to use it.
You can add a README from this button:
Or, you can create it using a command and push it manually:
But for the sake of demonstrating how to pull content from a remote repository, we’re going with the first option:
Once that’s done, it gets added to the repository just like any other file—with a commit message and timestamp.
However, the README file isn’t on my local machine yet, so I’ll run the git pull command:
Now everything is up to date. And this is just the tiniest example of how you can pull content from your remote repository.
What is .gitignore file ?
Sometimes, you don’t want to push everything to GitHub—especially sensitive files like environment variables or API keys. These shouldn’t be shared publicly. In fact, GitHub might even send you a warning email if you do:
To avoid this, you should create a .gitignore file, like this:
Any file listed in .gitignore will not be pushed to GitHub. So you’re all set!
Cloning
When you want to copy a GitHub repository to your local machine (aka "clone" it), you have two main options:
Clone using HTTPS: This is the most straightforward method. You just copy the HTTPS link from GitHub and run:
It's simple, doesn’t require extra setup, and works well for most users. But each time you push or pull, GitHub may ask for your username and password (or personal access token if you've enabled 2FA).
But if you wanna clone using ssh , you’ll need to know a bit more about ssh keys , so let’s talk about that.
Clone using SSH (Secure Shell): This method uses SSH keys for authentication. Once set up, it’s more secure and doesn't prompt you for credentials every time. Here's how it works:
So what is an SSH key, actually?
Think of SSH keys as a digital handshake between your computer and GitHub.
Your computer generates a key pair:
A private key (stored safely on your machine)
A public key (shared with GitHub)
When you try to access GitHub via SSH, GitHub checks if the public key you've registered matches the private key on your machine.
If they match, you're in — no password prompts needed.
Steps to set up SSH with GitHub:
Generate your SSH key:
2. Start the SSH agent and add your key:
3. Copy your public key:
Then copy the output to your clipboard.
Add it to your GitHub account:
Go to GitHub → Settings → SSH and GPG keys
Click New SSH key
Paste your public key and save.
5. Now you'll be able to clone using SSH like this:
From now on, any interaction with GitHub over SSH will just work — no password typing, just smooth encrypted magic.
And there you have it ! Until next time — happy coding, and may your merges always be conflict-free! ✨👩💻👨💻
#code#codeblr#css#html#javascript#java development company#python#studyblr#progblr#programming#comp sci#web design#web developers#web development#website design#webdev#website#tech#html css#learn to code#github
60 notes
·
View notes
Text
Day 3: Beginning my first ever personal project
I'm honestly getting a little sick of beginning every post with, 'I continued working through the RWD course on freeCodeCamp', because that's pretty much all I do, every single day. And that's what I did today.
However, I started working on a personal project using HTML/CSS! Something that I realised today, as I started planning this project, is that I genuinely have no idea how to apply the knowledge that I've learned through the course. I know how to follow instructions and prompts, but I have no idea how to actually build a responsive web page. But, I think that's going to change as I start working on this project.
I'm trying to be as creative as possible with this project. I'm really going to challenge myself, and I hope this turns out the way I want it to. The main goal is to not take the easy way out with this project. The only way I'll learn is by facing difficulties.
Recently, I've noticed that I've been really struggling with creativity. I used to be an original thinker, but now, it seems as though I have lost the ability to think outside the box. And that is completely unacceptable in my world. Hopefully, this project will spark my creativity, while developing my coding skills.
With that, I shall take your leave and continue scribbling down all my ideas for this project onto my commonplace journal. Yes, my ideas have a real-world, physical home. I encourage you to keep one as well. It's a great way to build a relationship with yourself- bridge the gap between who you are and who you want to be, your thoughts and your feelings.
#html css#htmlcoding#css#computer science#coding diaries#coding#learning#studyblr#tech#computer#programming#technology#coder
38 notes
·
View notes
Text
DIGITAL_NECROPOLIS.exe - HTML Neocities/Nekoweb profile page template
LIVE PREVIEW
DOWNLOAD
#old web graphics#css#cybercore#html#html css#htmlcoding#web graphics#neocities#neocities template#web resources#neocities theme#neocities graphics#neocities themes#nekoweb#old tech#old internet#old web#oldweb#html theme#frontend#javascript#learn to code#ko fi shop#ko fi link#code#coding
75 notes
·
View notes
Text
#neopets#where my online millennials at#i use the css and html i learned TO THIS DAY#neopets nostalgia#neopians#i was also email penpals with an older british girl who wrote a multipart story in the neopian times that i loved for like 5 years#chrissy with the lime green hair and the pennangalan boots#wherever you are#i hope youre doing well#im still writing and also im fully goth now#which im realizing at this moment is probably thanks to you#tumblr polls
162 notes
·
View notes
Text
#did you ?#bunny makes blinkies#filed under: personal#open folder: fun#open folder: pop ups#codeblr#progblr#studyblr#coding#css#programming#comp sci#webdev#learn to code#programmingblr#programming blog#code blog#coding meme#aesthetic#window aesthetic
261 notes
·
View notes
Text
I love you indie web I love you Neocities I love you hobby sites held together with duct tape I love you passion I love you whimsy I love you joy
And I am killing SEO with hammers. It’s for the greater good >:3
#woe be upon the employers who try to get me to code things#the adhd brain is inefficient by nature and the dyscalculia brain hates javascript with a passion#and i know jack shit about algorithms. and that’s how i like it#i have my neocities for fun which means the hours spent coding it are never wasted#but at work#inefficiency might as well be a crime#and if i cannot waffle about and be confused for hours the end product will suffer as a result#my neocities is for me bc i thought learning HTML and CSS sounded fun#and it is!#it would not be fun if my creativity was stifled by the SEO popularity contest#my site looks like ass and I’m having a great time#many thanks to whoever’s post abt neocities crossed my dash on that fateful day#i remember you fondly#though i do not know your name#neocities ily#neocities#indie web#static sites#static website#static websites#hobby websites#personal websites#hobbies#if sad check this tag
10 notes
·
View notes