Mastering Web Development: A Comprehensive Guide for Beginners
In the vast landscape of technology, web development stands as a crucial cornerstone. It encompasses the art and science of building websites, ranging from simple static pages to complex web applications. Whether you're aiming to pursue a career in software development or seeking to enhance your digital presence, understanding web development is essential.
In this comprehensive guide, we'll take you through the fundamental concepts and practical skills needed to master web development from scratch. Let's dive in!
1. Understanding HTML (Hypertext Markup Language)
HTML serves as the backbone of every web page, providing the structure and content. It uses tags to define different elements such as headings, paragraphs, images, and links. By mastering HTML, you'll be able to create well-structured and semantically meaningful web documents.
2. Exploring CSS (Cascading Style Sheets)
CSS is the language used to style HTML elements, enhancing their appearance and layout. With CSS, you can customize colors, fonts, spacing, and more, giving your website a polished and professional look. Understanding CSS selectors and properties is essential for effective styling.
3. Introduction to JavaScript
JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages. From simple animations to complex web applications, JavaScript powers a wide range of functionalities. Learning JavaScript fundamentals such as variables, functions, and events is crucial for web development.
4. Building Responsive Websites
In today's mobile-centric world, it's essential to create websites that adapt seamlessly to various screen sizes and devices. Responsive web design achieves this by using fluid grids, flexible images, and media queries. Mastering responsive design principles ensures that your websites look great on desktops, tablets, and smartphones.
5. Introduction to Version Control with Git
Git is a powerful tool for tracking changes in your codebase and collaborating with other developers. By learning Git basics such as branching, merging, and committing, you can streamline your development workflow and effectively manage project versions.
6. Introduction to Front-End Frameworks
Front-end frameworks like Bootstrap, Foundation, and Materialise provide pre-designed components and stylesheets to expedite web development. By leveraging these frameworks, you can create responsive and visually appealing websites with less effort and code.
7. Introduction to Back-End Development
While front-end development focuses on the user interface, back-end development deals with server-side logic and database management. Learning back-end languages such as Node.js, Python, or PHP enables you to build dynamic web applications and handle user interactions efficiently.
8. Deploying Your Website
Once you've developed your website, it's time to make it accessible to the world. Deploying a website involves selecting a web hosting provider, uploading your files, and configuring domain settings. Understanding the deployment process ensures that your website goes live smoothly.
9. Conclusion and Next Steps
Congratulations on completing this comprehensive guide to mastering web development! By now, you've gained a solid understanding of HTML, CSS, JavaScript, version control, frameworks, and deployment. As you continue your journey in web development, remember to stay curious, practice regularly, and explore advanced topics to further refine your skills.
Resources for Further Learning:
Online tutorials and documentation
Interactive coding platforms
Community forums and discussion groups
Next Steps:
Explore advanced topics such as web performance optimization, server-side rendering, and progressive web apps.
Build real-world projects to apply your skills and showcase your portfolio.
Stay updated with the latest trends and technologies in web development through blogs, podcasts, and conferences.
With dedication and perseverance, you'll continue to evolve as a proficient web developer, creating innovative solutions and contributing to the ever-changing digital landscape . Happy coding!
This week I have been developing my knowledge of using APIs within my web app using the javascript Fetch API. In the small app below I have used the dictionary API (which is free, link below):
Free Dictionary API
This very basic API returns a JSON with a meaning of the world and audio snippet of how to pronounce the word. I followed along to a very good tutorial on YouTube to help build this app which is here:
(43) JavaScript Project in 5 min - English Dictionary Project #HTML, #CSS and #JavaScript - YouTube
You can see the finished product below:
As you can see this is a very good example of working with a very basic API. It basically returns a JSON object which we then turn into an iterable JS object with the .json() method. You can see a snippet of the script below:
Once we have generated an object we can point to the data within its arrays and assign it to the innerText or 'src' (audio) of the website's elements.
Some further learning required to understand exactly how this works is:
Promises
Async functions
Await
Although this is basic I plan to go to Rapid API and look through the various free APIs available and build a bigger application that requires API keys, options which are included within the API calls header.
Another coding question regarding the 1st template: how do you change the colour of the background when you hover the settings, restart and save? When I hover over it's a green?
If you're struggling with figuring out how to style certain elements, I would highly recommend watching my video on how to use Developer Tools, or any other video/tutorial on it. It's a really great tool for web-design and coding, and will tell you how to target a certain element to style it.
With that said, if you wanted to change the background colour of the buttons on hover (I'm assuming this is with the dark theme), you would have to find this part of the CSS code:
and then it's just a matter of changing the var(--dark-contrast) to any of the other variables, or just hard-coding it with a hex code colour of your choice.
i would die for a "how to use html and css to format ao3" lesson from you 👀 no pressure but i'm genuinely in awe :)
Hello! So sorry it’s taken me ages to get to this.
It's no pressure at all! I have tried to cover the basics of HTML/CSS on AO3 here, and instead of writing very extensively about the syntax which is very Google-able, I have tried to include little tips and tricks that have come in handy for me.
This, by no means, is a complete guide but I hope it can get you started with HTML and CSS on AO3!
It got pretty long, so the answer’s below the cut.
Okay, so let’s start at the very beginning, shall we?
What is HTML and CSS?
Well, HTML is Hyper Text Markup Language and CSS is Cascading Style Sheets.
But that is something that probably doesn’t help a lot, so to put it very simply, HTML provides the structure of a webpage while CSS does the styling, that is, fixing how and where the elements should exist, how to shape them, how to space them, all so that the webpage looks great.
Something to keep in mind is that all web pages can run only on HTML but the end result is not going to be something that’s nice to look at. In fact, without CSS, the page might not even make a lot of sense. Here, take a look at Tumblr itself with all CSS disabled (there’s a very useful extension called Web Developer that allows you to do this):
Not very nice to look at, but all the elements of the page are here only with the help of HTML.
And look, this is what the above section looks like with CSS enabled:
This was just a brief visual walkthrough to show what HTML and CSS really do, but let’s move on to HTML and CSS in the world of AO3.
Where does the HTML and CSS go on AO3?
The HTML part of the code is put into the text box when you post a new story/new chapter. You must have noticed the two options — Rich Text and HTML — and it’s important to have HTML selected for AO3 to identify the HTML tags that you’ll be using.
All your content goes into this textbox. Whatever text you may be writing, whatever images you may be hosting, whatever links you might want to add— everything goes here.
Now, for styling all the content that you’ve put into the textbox, you need CSS, and that happens through work skins. It’s super simple, and all you have to do is go to Skins on your AO3 panel and then to My Work Skins, and then create a new work skin where you can dump all of your CSS code.
Okay, so onward we go.
How to HTML and CSS?
I’m no expert in web design and my knowledge mostly comes from Coursera, one summer internship, one class in college, and extensive online searching. And, I’ll tell you this, the most I have learnt is from extensive online searching.
Because at the very heart of it, web design is not so much about understanding and applying concepts (as with other coding languages) but more about visualizing elements and testing them out. I must add that this is completely my opinion as a person who rather enjoys data structures and algorithms as compared to web dev, and I’m certain that seasoned web developers will disagree with my views here.
Right, so the online searching. The best in the business when it comes to explaining HTML/CSS is www.w3schools.com. They have sample code, short and sweet explanations, and an online IDE to test your code. Really, it’s a win-win situation.
Alrighty, so now you know where to look for your HTML tags and CSS properties but how do you figure out which ones to use?
HTML Tags
I’ll talk about the HTML that’s required for coding on AO3 exclusively.
But before that— every HTML document has two main parts: the <head> and the <body>. But here on AO3, we only code the <body> which, as its name suggests, holds the content that’s going to appear on the browser. The <head> part is not required for AO3 work skins at all.
Okay, so how to code HTML on AO3? Well, your best friends are going to be the container tags such as <div> and <span>, and the paragraph tag <p>. What these tags do is they create areas on your browser — you can imagine them as small rectangles and squares — where you can put in your content via HTML, and then later style using CSS.
See this? The entire shaded area belongs to a <div> which is styled by a CSS class called “tumblr” (to keep things simple, we’ll only focus on CSS classes, and not id’s. It won’t really hamper developing a workskin in any way.)
This above belongs to a <p> that is styled by a CSS class “tumblrbody”. And, this <p> exists within the <div> mentioned above.
Here’s a <span> styled using the CSS class “tumblrtags”, which comes within the <div> and <p> we just discussed.
Basically, the idea is that the entire page will have to be divided into all these subsections, nested within each other if required, so that they can then be styled using CSS.
Other HTML tags that come in handy are the <a> and <img> tags.
The <a> or anchor tag is used to embed links. Want your reader to be led to a separate page while they’re reading your story? This is it. (This one’s quite common, and authors use them quite frequently in their notes to link to their Twitter/Tumblr etc.)
The <img> tag is used to embed images as the name suggests.
See how the picture is within an <img> tag styled by a CSS class “tumblrimg”?
Again, I’m not talking about the syntax of these tags or how they have to be written because that’s something which can very easily be found on w3schools or any other web dev tutorial website.
So, that’s pretty much about HTML. Now, CSS.
CSS Properties
So, when I talk about how most of my web dev happens through thorough internet searching, I’m mostly talking about CSS. Because HTML tags aren’t difficult to remember, they stay in memory when you keep designing web pages, but CSS properties... ugh.
But before we begin, a short note on CSS classes. To simplify matters you can look at them as labels given to your HTML container tags (<div> for example). Once you assign the label to your HTML element, you can then style that label in your CSS, and introduce properties to it which you want to see in your HTML. It basically forms the link between your HTML and CSS.
Say, I have a <div> that I want to style, then I’ll give it a label like this: <div class=”mongoosesurprise”>Your code</div>. The class name is mongoosesurprise, and when I have to style that particular <div>, I’ll have CSS code that looks like this:
Now, about CSS properties.
You see all the words in white followed by a colon? max-width? border? background-image? That’s it— CSS properties. I can never remember if it is maxwidth or max-width, whether it’s margin-right or right-margin, whether it’s padding-right or right-padding, and that’s where the Googling comes in.
Again, like with HTML, I’ll only talk about CSS on AO3. Unlike regular CSS, CSS here always has to start with #workskin. And then, #workskin can be followed by our class name. (The class name must be preceded by a fullstop though, like in the picture above.)
My CSS design procedure is all over the place. I entirely work on the basis of trial and error. I keep adjusting properties like max-width and padding and margin to see how the elements fit best. (It doesn’t take me as long as it did four-five years ago to estimate these values and I’d attribute that to practice and inspecting a lot of web pages. On a related note, it’s great to learn web design by inspecting other pages.)
I realize this isn’t great advice but like I said, it’s always been about trial and error when it comes to CSS. What I can say conclusively is that with properties width, height, display, position, padding, and margin most of your HTML tags will be placed properly. But when it comes to styling, the list is really quite endless. From a number of font-related properties to border, there’s a lot— and, thus, Google.
And, finally, what you must know for HTML/CSS on AO3 is how to host images.
Hosting Images
If you want your work to contain images, it’s best to host them somewhere online. Imgur is a great option; it’s free and really simple to use. Once the image is uploaded, you can get the share links and put it in your HTML <img> tag (under the src attribute— again, very syntactical so I’m not getting into that), or if you want you can put it in your CSS as an attribute for the property “background-image” (like in the code above).
You’ll have to make minor changes to the share link though, that is, add the image extension (.png or .jpg) to the end of the link. Also, sometimes the image doesn’t render if there’s no ‘i’ preceding ‘imgur.com’. Here’s a sample link that works perfectly: http://i.imgur.com/aSMSztl.png.
And, I think that’s pretty much it.
This covers the absolute basics of how to code HTML/CSS on AO3. But I’d like to repeat that by no means is this everything. If there’s a particular area you’d want me to explain, please feel to drop in an ask!
Hi so if I wanted to make a game like you did, do you have any advice?
Hey hey!
If you’re new to creating an IF game, there are a few things to think about:
1) Interactive fiction is a huge undertaking. Even if you plan on making a small game (like, say, 30k per average playthrough), the amount of content you’ll have to create to account for player choice is going to grow exponentially depending on how many choices and different mechanics you include. You will want to be prepared for that. As you’re planning and developing, start small and allow for natural growth as you get more comfortable with your systems. If you choose a bunch of gameplay elements right off the bat, you’re going to get overwhelmed.
2) Play IF games. Like a lot of games. Check out different platforms and different engines; this will give you an idea of what’s in store, what your eventual game can look like, and what restrictions you’ll be working with.
For example, ChoiceScript offers very little control over what your game looks like; Twine allows you to develop your own stylesheet, so you can customize your game’s appearance to be pretty much whatever you want. If visual elements are important to you, that’s something to consider. (Inkle, Ren’py, and other IF engines are, again, all different).
3) Choose an engine and practice. Get accustomed to what the code is like; this will help you plan your gameplay mechanics and figure out how to execute them. You can see my post here which includes popular IF engines and links to tutorials for beginners.
You don’t need to make a full game just to practice; I usually keep what I call a “mess copy” in my Twine editor so I can practice different gameplay elements and figure out how to code them using placeholder text.
4) While you’re practicing coding, start developing your worldbuilding. Write down some thoughts about what world you want to set this in. If you’re doing fantasy, you’ll want to figure out the rules of your world (how your magic system works, how your supernatural elements work, the cultures, the people, etc). As you figure out your setting, think about ways you can implement that worldbuilding into your game mechanics (for example, Wayfarer’s ancestry option reflects the different peoples that inhabit the world).
5) Make a beat chart. I know there’s usually a big debate surrounding the benefits and drawbacks of outlining and some writers really do not like outlining, but if you’re making an IF game, at the very least make a beat chart of your entire game. A beat chart breaks down the overall narrative structure of your game into very broad building blocks. It maps out the process of how you get your characters from the beginning to the end of your story and account for any major variations along the way (for example: multiple endings). Though IF incorporates player choice, there is still going to be a roughly linear thoroughline. You want to know what this thoroughline is before you start writing, otherwise you are going to get overwhelmed with new ideas and variations and remember, content grows exponentially in IF.
If you don’t have a plan, you may back yourself into a corner where you it is physically and mentally impossible for you to create enough content for all of your choices and variations.
6) If you’re working in Twine (or another engine that allows you to import your own CSS stylesheet), spend some time researching web design. I started learning CSS because I wanted to use custom tumblr themes and pages; a lot of my love for web design comes from tumblr’s theme maker community. Seeing how designers have made designs I like has been a really good source of inspiration. I’m at the point now where if I have an idea I want to execute, I can usually google it, follow a tutorial and a functional version of that idea. It may take a few tries and it might be a little cobbled together (I’m still a CSS novice), but I can usually make something work.
7) Get involved in the IF community. Whether it’s on tumblr or on the Choice of Games forum or intfiction, spending some time researching common IF gameplay mechanics and reading how different developers have handled them is really valuable. I lurk on a lot of forums (usually when I’m researching a problem and Google has led me a random corner of the IF community) and the conversations on these forums are all very valuable.
Fandom Userscript Cookbook: Five Projects to Get Your Feet Wet
Target audience: This post is dedicated, with love, to all novice, aspiring, occasional, or thwarted coders in fandom. If you did a code bootcamp once and don’t know where to start applying your new skillz, this is for you. If you're pretty good with HTML and CSS but the W3Schools Javascript tutorials have you feeling out of your depth, this is for you. If you can do neat things in Python but don’t know a good entry point for web programming, this is for you. Seasoned programmers looking for small, fun, low-investment hobby projects with useful end results are also welcome to raid this post for ideas.
You will need:
The Tampermonkey browser extension to run and edit userscripts
A handful of example userscripts from greasyfork.org. Just pick a few that look nifty and install them. AO3 Savior is a solid starting point for fandom tinkering.
Your browser dev tools. Hit F12 or right click > Inspect Element to find the stuff on the page you want to tweak and experiment with it. Move over to the Console tab once you’ve got code to test out and debug.
Javascript references and tutorials. W3Schools has loads of both. Mozilla’s JS documentation is top-notch, and I often just keep their reference lists of built-in String and Array functions open in tabs as I code. StackOverflow is useful for questions, but don’t assume the code snippets you find there are always reliable or copypastable.
That’s it. No development environment. No installing node.js or Ruby or Java or two different versions of Python. No build tools, no dependency management, no fucking Docker containers. No command line, even. Just a browser extension, the browser’s built-in dev tools, and reference material. Let’s go.
You might also want:
jQuery and its documentation. If you’re wrestling with a mess of generic spans and divs and sparse, unhelpful use of classes, jQuery selectors are your best bet for finding the element you want before you snap and go on a murderous rampage. jQuery also happens to be the most ubiquitous JS library out there, the essential Swiss army knife for working with Javascript’s... quirks, so experience with it is useful. It gets a bad rap because trying to build a whole house with a Swiss army knife is a fool’s errand, but it’s excellent for the stuff we're about to do.
Git or other source control, if you’ve already got it set up. By all means share your work on Github. Greasy Fork can publish a userscript from a Github repo. It can also publish a userscript from an uploaded text file or some code you pasted into the upload form, so don’t stress about it if you’re using a more informal process.
A text editor. Yes, seriously, this is optional. It’s a question of whether you’d rather code everything right there in Tampermonkey’s live editor, or keep a separate copy to paste into Tampermonkey’s live editor for testing. Are you feeling lucky, punk?
Project #1: Hack on an existing userscript
Install some nifty-looking scripts for websites you visit regularly. Use them. Ponder small additions that would make them even niftier. Take a look at their code in the Tampermonkey editor. (Dashboard > click on the script name.) Try to figure out what each bit is doing.
Then change something, hit save, and refresh the page.
Break it. Make it select the wrong element on the page to modify. Make it blow up with a huge pile of console errors. Add a console.log("I’m a teapot"); in the middle of a loop so it prints fifty times. Savor your power to make the background wizardry of the internet do incredibly dumb shit.
Then try a small improvement. It will probably break again. That's why you've got the live editor and the console, baby--poke it, prod it, and make it log everything it's doing until you've made it work.
Suggested bells and whistles to make the already-excellent AO3 Savior script even fancier:
Enable wildcards on a field that currently requires an exact match. Surely there’s at least one song lyric or Richard Siken quote you never want to see in any part of a fic title ever again, right?
Add some text to the placeholder message. Give it a pretty background color. Change the amount of space it takes up on the page.
Blacklist any work with more than 10 fandoms listed. Then add a line to the AO3 Savior Config script to make the number customizable.
Add a global blacklist of terms that will get a work hidden no matter what field they're in.
Add a list of blacklisted tag combinations. Like "I'm okay with some coffee shop AUs, but the ones that are also tagged as fluff don't interest me, please hide them." Or "Character A/Character B is cute but I don't want to read PWP about them."
Anything else you think of!
Project #2: Good Artists Borrow, Great Artists Fork (DIY blacklisting)
Looking at existing scripts as a model for the boilerplate you'll need, create a script that runs on a site you use regularly that doesn't already have a blacklisting/filtering feature. If you can't think of one, Dreamwidth comments make a good guinea pig. (There's a blacklist script for them out there, but reinventing wheels for fun is how you learn, right? ...right?) Create a simple blacklisting script of your own for that site.
Start small for the site-specific HTML wrangling. Take an array of blacklisted keywords and log any chunk of post/comment text that contains one of them.
Then try to make the post/comment it belongs to disappear.
Then add a placeholder.
Then get fancy with whitelists and matching metadata like usernames/titles/tags as well.
Crib from existing blacklist scripts like AO3 Savior as shamelessly as you feel the need to. If you publish the resulting userscript for others to install (which you should, if it fills an unmet need!), please comment up any substantial chunks of copypasted or closely-reproduced code with credit/a link to the original. If your script basically is the original with some key changes, like our extra-fancy AO3 Savior above, see if there’s a public Git repo you can fork.
Project #3: Make the dread Tumblr beast do a thing
Create a small script that runs on the Tumblr dashboard. Make it find all the posts on the page and log their IDs. Then log whether they're originals or reblogs. Then add a fancy border to the originals. Then add a different fancy border to your own posts. All of this data should be right there in the post HTML, so no need to derive it by looking for "x reblogged y" or source links or whatever--just make liberal use of Inspect Element and the post's data- attributes.
Extra credit: Explore the wildly variable messes that Tumblr's API spews out, and try to recreate XKit's timestamps feature with jQuery AJAX calls. (Post timestamps are one of the few reliable API data points.) Get a zillion bright ideas about what else you could do with the API data. Go through more actual post data to catalogue all the inconsistencies you’d have to catch. Cry as Tumblr kills the dream you dreamed.
Project #4: Make the dread Tumblr beast FIX a thing
Create a script that runs on individual Tumblr blogs (subdomains of tumblr.com). Browse some blogs with various themes until you've found a post with the upside-down reblog-chain bug and a post with reblogs displaying normally. Note the HTML differences between them. Make the script detect and highlight upside-down stacks of blockquotes. Then see if you can make it extract the blockquotes and reassemble them in the correct order. At this point you may be mobbed by friends and acquaintainces who want a fix for this fucking bug, which you can take as an opportunity to bury any lingering doubts about the usefulness of your scripting adventures.
(Note: Upside-down reblogs are the bug du jour as of September 2019. If you stumble upon this post later, please substitute whatever the latest Tumblr fuckery is that you'd like to fix.)
Project #5: Regular expressions are a hard limit
I mentioned up above that Dreamwidth comments are good guinea pigs for user scripting? You know what that means. Kinkmemes. Anon memes too, but kinkmemes (appropriately enough) offer so many opportunities for coding masochism. So here's a little exercise in sadism on my part, for anyone who wants to have fun (or "fun") with regular expressions:
Write a userscript that highlights all the prompts on any given page of a kinkmeme that have been filled.
Specifically, scan all the comment subject lines on the page for anything that looks like the title of a kinkmeme fill, and if you find one, highlight the prompt at the top of its thread. The nice ones will start with "FILL:" or end with "part 1/?" or "3/3 COMPLETE." The less nice ones will be more like "(former) minifill [37a / 50(?)] still haven't thought of a name for this thing" or "title that's just the subject line of the original prompt, Chapter 3." Your job is to catch as many of the weird ones as you can using regular expressions, while keeping false positives to a minimum.
Test it out on a real live kinkmeme, especially one without strict subject-line-formatting policies. I guarantee you, you will be delighted at some of the arcane shit your script manages to catch. And probably astonished at some of the arcane shit you never thought to look for because who the hell would even format a kinkmeme fill like that? Truly, freeform user input is a wonderful and terrible thing.
If that's not enough masochism for you, you could always try to make the script work on LiveJournal kinkmemes too!
Firefox 70 Released — The latest release includes a handful of interesting CSS changes, such as the display property now accepting two keyword values (for setting both inner and outer display types), password generation for input type='password' fields, improved underline styling, and more. There's also the usual Firefox 70 for developers post outlining all the key changes in a bulletpoint fashion.
Mozilla
Focusing on Focus — Focus behavior in Web browsers has been in flux and under-specified for years. Efforts are now underway to clear up some of the confusion (particularly around Shadow DOM and autofocus) and begin to firm up the specs “to hopefully make focus in HTML make sense to browser engineers and web authors”.
Rakina Zata Amni (WHATWG)
Frontends Without Backend with FaunaDB Auth + Native GraphQL — FaunaDB is a globally distributed, scalable database. Thanks to built-in security and native GraphQL, frontends can directly communicate with FaunaDB in a secure way which eliminates the need to pass through a backend and greatly reduces latency.
FaunaDB sponsor
The "P" in Progressive Enhancement Stands for "Pragmatism" — Demonstrates how using progressive enhancement with CSS can be used to build things up gradually. “With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.”
Andy Bell
Can We Please Style The <select> Control? — Highlights issues developers are facing when working with the the built-in <select> element, and what efforts are being undertaken to hopefully improve it.
Greg Whitworth
Style Hover, Focus, and Active States Differently — Why you should (and how to) style hover, focus, and active states differently.
Zell Liew
💻 Jobs
Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.
X-Team
Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.
Vettery
📙 Articles, Tutorials & Opinion
Making Tables Responsive with Minimal CSS — When creating table-based layouts you may be tempted to implement some sort of custom grid-system or pull in a pre-built library. The author argues against this, recommending using just “tables and some simple CSS”.
Bradley Taunt
Box Alignment and Overflow — Runs through a data-loss issue you may face when using box alignment properties in certain scenarios, and highlights how the 'safe' overflow alignment keyword can help prevent such a loss.
Chen Hui Jing
State Management for Flutter Apps with MobX — Learn how to use MobX to ease state management on a Flutter project.
CircleCI sponsor
How to Design Delightful Dark Themes — Plenty of practical tips here on how to design dark themes that are “readable, balanced, and delightful”.
Teresa Man
Options for Hosting Your Own Non-JavaScript-Based Analytics — Rounds-up a range of alternatives to Google Analytics.
Chris Coyier
The 'Perfect' Responsive Menu — Here’s how to create a menu that is accessible and works across mobile and desktop browsers without any duplication.
Polypane
JAMstack Tools and The Spectrum of Classification — An overview of JAMStack services and tools, along with some notes on their pros and cons.
Chris Coyier
The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning
Progress KendoReact sponsor
An Introduction to Regular Expressions for Web Developers
Chris Achard
🔧 Code, Tools & Resources
Peaks.js: Interact with Audio Waveforms — A client-side JavaScript component to display and interact with audio waveforms in the browser. Here’s the related GitHub repo.
Indrek Lasn
TinaCMS: A Site Editing Toolkit for Modern React-Based Sites — An open-source real-time site editing toolkit currently aimed at Gatsby and Next.js users.
Tina
Open Doodles: A Collection of Free CC0 'Sketchy' Illustrations — You can even generate a set with your own custom colors (as above).
Pablo Stanley
Typetura: Fluid Typesetting — We linked to this responsive typography tool when it was in beta earlier this year, and now it’s generally available (paid). It'll help set up text transitions between breakpoints — here’s a demo of it in action.
Typetura
▶ A Realistic 'Water Effect' with Just HTML & CSS — A very convincing effect using the <feTurbulence> SVG filter. Here's the code.
Red Stapler
🗓 Upcoming Events
VueConfTO 2019, November 11-12 — Toronto, Canada — The first ever Vue Conference in Canada.
Chrome Dev Summit, November 11-12 — San Francisco, USA — A two-day summit to learn about the latest from Chrome, plus techniques for building the modern Web. Note: Registrations are now closed, but the event can be joined remotely.
Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen speakers, covering the most important web perf insights.
HalfStack Conf, November 22 — London, UK — A single day event focused on UI-centric JavaScript and web development.
Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world.
dotCSS, December 4 — Paris, France — The largest CSS conference in Europe.
i know css/html and code my own themes. one side effect of this is that every so often i encounter someone—a friend or a friend’s friend, usually—who has installed a new theme and is now struggling to customize or tweak it without knowing how to go about doing that.
now i’m always happy to help out, but these are always things that take just a few minutes to figure out if you can read the code and, well, give a man a fish or teach a man to fish. you know how it goes.
so here we go: this is how to fish.
PART ONE: UNDERSTANDING CSS & HTML
let me lead with this: it is normal to feel confused, overwhelmed, intimidated, stupid, and/or frustrated when working with an unfamiliar coding language. my father has been writing software for forty years, but he will look at what is to me a page of very basic css/html and be completely baffled by it all the same. this is normal. please don’t let it discourage you if you feel this way at first.
in my opinion, the first step to conquering these feelings is to wrap your brain around the big picture of what these languages do. what do we use them for?
well, all web pages — and thus, all tumblr themes — are written in these two languages. the only thing you need to know for our purposes is this: html holds the content of a web page, and css controls its appearance.
how does this work?
a webpage is built of html objects called <div> tags. think of them like bricks: you stack a bunch of <div>s on top of each other and bam! you have a house. but it’s a terrible house, because it’s just a pile of bricks with stuff scribbled on them.
this is where the css comes in. a <div> tag can have a unique id or belong to a general class, and we use css to style the appearances of our <div>s on a per-id and per-class basis. to return to our housebuilding metaphor, css is our blueprint: it gives order, structural stability, and aesthetic coherence to our messy pile of bricks, and now, bam! we have a house. for real.
PART TWO: THE SYNTAX
coding languages are like human languages in that they have their own unique vocabulary and grammar. to tweak a tumblr theme, you need to have a basic grasp of this syntax so you can understand what you’re looking at.
css manipulates objects called elements. usually, an element is the id or class of a <div>, but an element can correlate to any html tag. the basic anatomy of a css element goes like this:
selector {
property: value;
}
and we can translate this into english as “when the element this selector is looking for occurs, it will look the way i have described it here.”
selectors might look like this: h1 { or #id { or .class {
the distinction between these different types of selectors is not important for our purposes. all you need to know is that the selector corresponds to (or selects) a particular html tag, like: <h1>, <div id = "id">, or <div class="class">.
properties are the visual features of an element, like its height, width, color, and so on, and the value is a statement that describes the desired setting for the property. a property-value statement is called a declaration, and a collection of declarations is called a declaration block.
you can generally figure out what a declaration is doing by looking at the name of the property, since they’re pretty self explanatory most of the time. for example, font-size: 12px; says that any text contained in this element is going to have its size set such that a character is 12 pixels tall.
[ sidebar: if you are a Tiny Font person, consider using the knowledge you’ve gained from this tutorial to edit your theme such that the text of all your posts is very small, and then don’t use small text or sub/superscripts in your replies. you’ll get the Tiny Font aesthetic on your blog with perfect consistency, without rendering your posts illegible on the dashboard. ]
PART 3: MAKING YOUR CHANGES
the key to quickly and easily modifying a tumblr theme is to be able to identify the name of the css selector for the element you want to modify. let’s look at my own theme as an example.
depending on what changes you want to make and how the theme’s creator laid out their code, you may not have to do much work at all to get the selector.
for example, if you want to do something with your theme’s pagination buttons, it’s a pretty reasonable guess that the css selector will be something like “pagination_next” or “pagination_prev”, and you can go straight to the html editor and do a ctrl+F search for “pagination” to find it.
but what if the selector isn’t immediately obvious? for the purposes of this example, let’s say i want to change the text of the blog description from red to dark blue (while preserving the red color of other elements in the theme, which precludes simply using tumblr’s in-built color picker.)
i could just scroll through the theme code until i found a selector that looked like the one i wanted, and then change something and update the preview & repeat ad nauseum until i found the right one. but again, depending on how the theme’s creator did their coding, this might be very difficult, frustrating, and time consuming. many prolific tumblr theme creators don’t lay out their code in a particularly human-readable way.
fortunately, there is a much easier way.
step 1: load your tumblr and right-click somewhere on the page. depending on what browser you use, the exact name of what you’re looking for will vary, but the keyword to look for is “inspect”:
click this.
(if you are using safari, you need to make sure “show develop menu” is checked in the advanced tab of the preferences window.)
step 2: your screen will now look something like this:
if the element you want to change is in a popup or tab, open it so it’s visible on the screen.
step 3: the topmost box in the inspector displays all the html of your theme. if you hover over an html tag, the corresponding element will be highlighted in blue.
find the <body> tag. you may need to expand this manually depending on your browser. move your mouse down the line of divs until you find the element you want to modify.
here, my mouse is hovering over <div id="blg_desc"> in the inspector, and you can see how the blog description is shown in a blue rectangle. (the large orange shape shows the size of the element’s margins.)
this tells me that the css selector for this element is #blg_desc.
step 4: close the inspector and open tumblr’s theme customization interface. go to edit html. ctrl+f to find the css selector:
now, my goal is to change the text color, so the declaration i’m interested in is color:{color:6};. the {color:6} value is an object tumblr uses to store colors in a theme as an alternative to using rgb or hex codes (like #B61818, which is the shade of red i have stored in {color:6}. these objects correlate to the color picker under theme options:
thus, if i change the value of color to {color:1}, the text of my blog description will be blue instead of red. i can also write this as color:#0d52c0;.
(note that the exact shade of red/blue in my description varies a little from line to line; this is because of styling i did within the html itself that makes some lines transparent, and thus lighter because of the pale grey background.)
& if you use pages with custom html, the inspector trick will of course work for them too.
PART FOUR: IN SUMMARY
remember that css/html is not magic. it might feel intimidating, but at the end of the day it’s just a language for translating human thoughts like “i want a small purple square” into instructions a computer can understand, like this:
and all you need to do to make the changes you want is 1) identify the css selector and 2) understand the properties you’re manipulating. 1) is the difficult part, because everybody lays out their selectors differently—but using the inspector will allow you to instantly identify selectors by sight. and once you have that, 2) is super easy, because properties are standard and intended to be readily legible to humans.
you may occasionally run into tricky properties, like for example display or position, which do things that are a little more abstract / not immediately obvious. for those cases, refer to the w3schools css dictionary for clear, simple, but still comprehensive explanations for proper usage.
