Tumgik
#Learn Online CSS
webtutorsblog · 9 months
Text
Exploring 10 Sophisticated CSS Properties with Webtutor
Tumblr media
In the ever-evolving landscape of web design, CSS (Cascading Style Sheets) stands as a cornerstone for creating stunning and visually captivating websites. As a web designer or developer, having a firm grasp of CSS properties is crucial to craft unique user experiences and bring your creative vision to life. In this blog post, we will delve into advanced CSS properties that can elevate your design game to new heights. Plus, we will introduce you to WebTutor, the ultimate online platform for mastering code and unleashing your web design potential.
Flexbox (display: flex)
Gone are the days of complex float-based layouts. With the 'display: flex' property, Flexbox simplifies the way you structure layouts, align content, and distribute space within a container. Designers can create responsive and dynamic designs, making it easier to build everything from navigation bars to complete page layouts.
Grid Layout (display: grid)
For those craving even more control over layouts, the 'display: grid' property offers a powerful solution. Grid Layout divides a web page into rows and columns, allowing designers to arrange content in a grid format. This approach grants unparalleled control over alignment, spacing, and responsiveness.
CSS Variables (custom properties)
CSS Variables, also known as custom properties, enable designers to define reusable values within stylesheets. This advancement allows for easier theming, dynamic theming, and quicker updates across an entire website. By centralizing key values, designers can swiftly adjust colors, fonts, and other design elements across the site.
Transitions and Animations (transition, animation)
Creating engaging user experiences often involves smooth transitions and animations. With the 'transition' and 'animation' properties, designers can add eye-catching effects to various elements, enhancing user engagement and guiding their attention to important content.
Box Shadow (box-shadow)
Box shadows add depth and dimension to design elements, making them stand out from the page. This property enables designers to create subtle or bold shadows that can make buttons, cards, and other elements pop, adding a touch of elegance to the overall design.
Background Blend Mode (background-blend-mode)
Background images can play a significant role in design aesthetics. The 'background-blend-mode' property lets designers blend background images with background colors in creative ways, resulting in captivating visual effects and unique design elements.
Transform (transform)
The 'transform' property opens up a world of possibilities for manipulating elements in 2D and 3D space. Designers can rotate, scale, skew, and translate elements to achieve striking visual effects that captivate users' attention and create a sense of interactivity.
Custom Fonts (font-face)
Typography is a cornerstone of web design, and the 'font-face' property allows designers to use custom fonts that might not be available on users' devices. This property ensures consistent typography across different platforms, enhancing the website's visual identity.
Gradients (linear-gradient, radial-gradient)
Gradients are versatile tools for adding depth and visual interest to backgrounds, buttons, and other design elements. With 'linear-gradient' and 'radial-gradient' properties, designers can experiment with color blends, creating stunning visual effects that catch the eye.
Scroll Snap (scroll-snap-type)
Enhancing user experience is paramount in modern web design. The 'scroll-snap-type' property assists in creating smoother scrolling experiences by snapping to predefined points on a page. This is particularly useful for websites with sections or galleries that need precise alignment during scrolling.
Introducing WebTutor: Your Pathway to Mastery
Now that you've discovered the power of these 10 advanced CSS properties, it's time to turn your knowledge into skills. Meet WebTutor, the ultimate online platform for learning code. With WebTutor, you'll embark on a transformative learning journey, guided by industry experts who are passionate about helping you master web design, development, and more.
Why Choose WebTutor?
Comprehensive Curriculum: WebTutor offers a curated curriculum that covers everything from the basics to advanced topics, ensuring you have a strong foundation for your journey into web design.
Interactive Learning
Dive into hands-on coding exercises and real-world projects that give you the practical experience needed to excel in the field.
Expert Instructors
Learn from experienced professionals who are dedicated to your success. WebTutor's instructors are there to answer your questions, provide guidance, and share industry insights.
Flexible Learning
Whether you're a full-time student or a working professional, WebTutor's flexible learning options allow you to study at your own pace, making it convenient to achieve your goals.
Community Support
Join a vibrant community of learners, collaborate on projects, share ideas, and celebrate your milestones together.
Conclusion
Mastering CSS properties opens the door to a world of creative possibilities in web design. As you explore these advanced properties, remember that practice makes perfect. And there is no better way to practice than through WebTutor, where you'll gain the skills and confidence to build beautiful, responsive, and user-friendly websites. Start your journey with WebTutor today and take your web design skills to new heights!
Learn more with WebTutor
Ultimate Guide to CSS Animations
Latest CSS Tricks and Features
Latest CSS Trends
Create Stunning Websites with CSS for Beginners
0 notes
mirrorbird · 7 months
Text
161 notes · View notes
izicodes · 1 year
Text
The FreeCodeCamp Study Challenge!
Tumblr media
I literally just completed this challenge and I thought why not share the challenge on here for other people to take part in if they wanted to!
FreeCodeCamp is an open-source platform that offers various coding courses and certifications for web developers. The goal of this challenge is to choose one of the available courses on the FreeCodeCamp platform, complete the course, and earn the certificate at the end.
The challenge is self-paced, so the duration is entirely up to you. The challenge is there to motivate people into coding and/or continue their coding studies! Especially people in the Codeblr community!
Tumblr media
FreeCodeCamp [LINK] offers the following courses:
(NEW) Responsive Web Design Certification (I've done this one)
JavaScript Algorithms and Data Structures Certification (I am going to do this one next)
Front End Libraries Certification
Data Visualization Certification
APIs and Microservices Certification
Quality Assurance Certification
Scientific Computing with Python Certification
Data Analysis with Python Certification
Information Security Certification
Machine Learning with Python Certification
Each course is broken down into multiple sections, and completing all the sections in a course will earn you a certification for that course.
Tumblr media
To start the FreeCodeCamp Challenge, follow the steps below:
Choose a course on the FreeCodeCamp platform that you would like to complete.
Complete the course and earn the certificate.
Post about your progress every day that you study using the #freecodecampchallenge hashtag. You can post about what you have done towards the challenge, what you have learned, and any challenges you faced and how you overcame them.
Tumblr media
The FreeCodeCamp Challenge is an excellent opportunity to improve your coding skills and earn a valuable certification!!!! Even add that to your resume/CV! I completed this challenge and you can see me posting about it - LINK.
Remember to post about your progress using the #freecodecampchallenge hashtag to track your progress and connect with other participants AND you don't have to study straight days, meaning you can take days off whenever you feel like it!
Good luck!
254 notes · View notes
puppyeared · 4 months
Text
Tumblr media
I CANT USE CSS ON ARTFIGHT...............
#I WAS REALLY HOPING TO FIX THE FUCKING. PARAGRAPH WIDTH. SIGH#idk why but it stretches across the ENTIRE page like. it takes up the full width of the browser and it BOTHERS ME. ON ALL THE PAGES#i could try manually putting shift breaks but im worried it might not look so good on mobile. ugghh... auyggghhh.....#im already learning CSS and API so i thought i could put it to good use but. AUGH#this whole time ive had to go into the inspect panel myself and change the padding so i dont have to read the length of the screen#like a fucking typewriter... i would have also loved to use custom fonts and animations......#i did find a guide for BBCode which the site uses on default and it covers basic styling but its not the same. sniffle#you CAN unlock CSS if you donate $25 to the page which seems fair. and if i could do it i would but. i do not have any way of#sending or receiving money online </3 i really need to figure out how to do that so i can set up comms like i said i would last summer#but it intimidates me.... and im already kept on a short leash when it comes to that so it feels like a lot of things could go wrong#i think toyhouse allows CSS or some sort of code...?? i remember seeing some oc pages with custom layouts#if thats the case i'll try fiddling with it but im not very familiar with using toyhouse so thatll take a while#(thanks again for the code sal ^_^ ill put it on my pin once its ready but im trying to learn my way around the site heh ;;)#at least i can use my pixel dividers.. ive been digging around for pixels to use and found some really cute ones#yapping
43 notes · View notes
keeplearninbud · 8 months
Text
Day 1 (10-7-23)
I'm keeping it simple today. I'm restarting freeCodeCamp's responsive web design certification. I've already done a good chunk of it, including some of the projects, but I am dissatisfied with how those turned out. Additionally, it's been so long since I've coded that I just need a reminder of the basic terms and syntax.
I didn't start at the very beginning - I redid the survey project a little more recently and didn't feel I needed to do it again. Instead I worked on the CSS box model course and was pleased to find that it all came back to me pretty quickly. Learning something new can be intimidating to me as a former Gifted Kid ™ and recovering perfectionist, so it was nice to do something easy for day 1.
After a few more courses, the next project is a tribute page, and I have a really exciting idea for it! I'm trying to theme my projects to tell a story in order to make learning more exciting for my brain. I figure if I can wring some dopamine outta this damn thing while I learn, I'll want to come back for more.
It's time for dinner now though! I got some soba noodles and I am very excited to make somethin tasty with them :)
10 notes · View notes
blacksailsgf · 11 months
Text
Tumblr media
'unknown time left' well good luck compressing 11 years' worth of posts from this fucking blog
12 notes · View notes
blogpreetikatiyar · 2 years
Text
WhatsApp Clone Using HTML and CSS
What does cloning a website means?
To make a copy
Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.
Any website can be cloned. You are also free to integrate some additional new features while cloning your website.
Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.
Let’s learn how to clone a website just using HTML5 and CSS in a simple way. 
Will take an example of WhatsApp Website and will clone it. 
WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).
Key WhatsApp Terminology 
Cross Platform
Messaging apps
End-to-end encryption
Video & Audio Calls
WhatsApp Business
HTML (Hyper Text Markup Language) –
HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications
It represents the structure of a web page
It comprises of series of elements which tells the browser how to display the content
Basic Structure of a HTML Document –
<!DOCTYPE html>
<html>
<head>
    <title>WhatsApp Clone</title>
</head>
<body>
    <h1>let's learn Web Development</h1>
    <p>My first project - WhatsApp Cloning</p>
</body>
</html>
Let’s Explain the above code –
- It is used to defines that the document is HTML5 document
- It is the root elements on an HTML Page
- It contains all the meta information about the HTML Page
- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc. 
- It defines the largest heading for any topic, it ranges from -
- It defines a paragraph in the HTML page
Elements – 
It is the collection of start and end tag, and in between content is inserted between them. 
It major components are– 
Opening Tag – Used to tell the browser where the content starts. 
Closing Tag – Used to tell the browser where the content material ends. 
Content – Whatever written inside the opening and closing tag is content. 
Some Most Commonly used tags are – 
– Used to define a document or section, as it contains information related to titles and heading of related content. 
– The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site
– Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another. 
– It is used to define a paragraph. Content written inside tag always starts from a new line. 
– It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.
- It is used to group multiple elements together. It helps in applying CSS. 
- Image tag is used to embed an image in a web page. 
CSS (Cascading Style Sheet) – 
CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media. 
It used for designing web pages, in order to make web pages presentable. 
It is standardized across Web Browsers and is one of the core languages of the open web system/technology.
CSS Selector – 
CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc. 
Types of CSS Selectors – 
Element Selector – It selects the HTML elements directly using name 
ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element. 
Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements. 
Universal Selector – It selects all the elements of the webpage, and apply changes to it. 
Group Selector – It is used when same style is to be applied on many elements. It helps in non-duplication of code. 
Different ways of applying CSS - 
CSS can be applied in different ways – 
Inline CSS – 
Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.
<h1 style="color:blue;">Let's learn Web Development</h1>
Internal CSS –
It is defined or written within the <style> element, nested instead <head> section of HTML document. 
It is mainly used when need to apply CSS on a particular page. 
<style type="text/css">
    h1 {
      color:blue;
    }
</style>
External CSS –
It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.
<link rel="stylesheet" type="text/css" href="style.css"> 
It is written instead head tag. 
For more detailed guide – Click here 
Let’s implement the above learnt concepts – 
In this example will clone a static page of WhatsApp using Internal CSS- 
<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    :root {
      font-size: 15px;
      --primaryColor: #075e54;
      --secondaryColor: #aaa9a8;
      --tertierColor: #25d366;
    }
    * {
      margin: 0;
      padding: 0;
      font-family: inherit;
      font-size: inherit;
    }
    body {
      font-family: Helvetica;
      font-weight: 300;
    }
    img {
      object-fit: cover;
      width: 100%;
    }
    .container {
      margin: 0 1.2em;
    }
    header {
      background-color: var(--primaryColor);
      padding: 1.4em 0;
    }
    header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
    }
    header .logo {
      font-size: 1.5rem;
      font-weight: 300;
    }
    header .menu {
      margin-left: 18px;
    }
    .nav-bar {
      background-color: var(--primaryColor);
      margin-bottom: 8px;
      display: grid;
      grid-template-columns: 16% 28% 28% 28%;
      justify-items: space-between;
      align-items: center;
      text-align: center;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }
    .nav {
      color: var(--secondaryColor);
      text-transform: uppercase;
      padding: 1em 0;
    }
    .nav.active {
      border-bottom: 3px solid white;
      color: white;
    }
    .chat {
      padding: 1em 0;
      display: flex;
      justify-content: space-between;
    }
    .chat .info {
      display: flex;
    }
    .chat .username {
      font-size: 1.2rem;
      margin-bottom: 5px;
      font-weight: 300;
    }
    .chat .recent-chat {
      color: gray;
      max-width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .chat .recent-chat .read {
      color: #34b7f1;
    }
    .chat .photo {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      margin-right: 18px;
    }
    .chat .recent-chat-time {
      font-size: 12px;
      color: gray;
    }
    .contact-button {
      padding: 1em;
      border: 0;
      border-radius: 50%;
      color: white;
      transform: rotate(0deg);
      font-size: 1.3rem;
      position: fixed;
      bottom: 20px;
      right: 1.2em;
      background-color: var(--tertierColor);
    }
  </style>
  <title>WhatsApp</title>
  <link rel="icon" type="image/x-icon" href="wp.png" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<!-- Body section starte here -->
<body>
  <header>
    <div class="container">
      <h1 class="logo">WhatsApp</h1>
      <div>
        <a role="button" class="bi bi-search icon"></a>
        <a role="button" class="bi bi-three-dots-vertical icon menu"></a>
      </div>
    </div>
  </header>
  <nav class="nav-bar">
    <span class="bi bi-camera-fill nav"></span>
    <a role="button" class="nav active">Chats</a>
    <a role="button" class="nav">Status</a>
    <a role="button" class="nav">Calls</a>
  </nav>
  <!-- Chat section starts here -->
  <!-- chat 1 -->
  <section class="chats">
    <div class="container">
      <div class="chat">
        <div class="info">
          <!-- <img class="photo" src="user-2.png" alt="User" /> -->
          <img class="photo" src="user-2.png" alt="User" />
          <div>
            <h6 class="username">Anurag</h6>
            <p class="recent-chat">
              <i class="bi bi-check2-all"></i> Yes, i remembered that! 😄
            </p>
          </div>
        </div>
        <small class="recent-chat-time"> 04:20 PM </small>
      </div>
      <!-- chat 2 -->
      <div class="chat">
        <div class="info">
          <img class="photo" src="user-2.png" alt="User" />
          <div>
            <h6 class="username">Cipher</h6>
            <p class="recent-chat">Do you wanna hangout?</p>
          </div>
        </div>
        <small class="recent-chat-time"> 10:20 AM </small>
      </div>
      <!-- chat 3 -->
      <div class="chat">
        <div class="info">
          <img class="photo" src="user-2.png" alt="User" />
          <div>
            <h6 class="username">CipherSchools</h6>
            <p class="recent-chat">
              <i class="bi bi-check2-all read"></i> Hey bro, time to band!
              🥁🎸
            </p>
          </div>
        </div>
        <small class="recent-chat-time"> Yesterday </small>
      </div>
      <!-- chat 4 -->
      <div class="chat">
        <div class="info">
          <img class="photo" src="user-2.png" alt="User" />
          <div>
            <h6 class="username">Schools</h6>
            <p class="recent-chat">Hey, where are you now? 🙄</p>
          </div>
        </div>
        <small class="recent-chat-time"> 7/22/21 </small>
      </div>
      <!-- chat 5 -->
      <div class="chat">
        <div class="info">
          <img class="photo" src="user-2.png" alt="User" />
          <div>
            <h6 class="username">Anurag CS</h6>
            <p class="recent-chat">
              <i class="bi bi-check2-all read"></i> May i borrow your games
              for 2 weeks?
            </p>
          </div>
        </div>
        <small class="recent-chat-time"> 7/22/21 </small>
      </div>
      <!-- Contact button on the whatsapp -->
      <button type="button" class="bi bi-chat-right-text-fill contact-button"></button>
    </div>
  </section>
</body>
</html>
23 notes · View notes
snapeingturtle · 5 months
Text
I speak 0 languages. My first language doesn't count because everyone has one of those. English doesn't count either because everyone knows English. I took Swedish for 6 years and understand some of it still but I can't form a coherent sentence so I can't count that. And all I have to show for French is the nearly 700 day streak on Duolingo with no other attempts to use the damn language so that doesn't count either.
4 notes · View notes
citrucee · 1 year
Text
i wish i could offer website commissions. i keep hounding my friends like Let’s Make A Site so i’d love to be able to offer that as a service. problem is i don’t know how to implement features that most sites have like receiving and storing inputs from users, and i haven’t done any backend work when it comes to hosting sites, i just handed that off to neocities. but i mean hey if you want a personal site or a blog i can make you one of those, but not much else!
7 notes · View notes
digilearnteach · 9 months
Text
2 notes · View notes
divinector · 1 year
Photo
Tumblr media
Responsive Resume CV Website
3 notes · View notes
webtutorsblog · 10 months
Text
Learning Advanced CSS Techniques with WebTutor
Tumblr media
In the ever-evolving world of web design, mastering CSS (Cascading Style Sheets) is an absolute necessity to create visually stunning and responsive websites. While most developers are familiar with the basics of CSS, delving into advanced techniques can set you apart as a design maestro. In this blog post, we'll delve into the realm of CSS advanced techniques, exploring how they can transform your web design game. And to help you on your journey to becoming a CSS expert, we'll introduce you to the invaluable resource, Webtutor.dev.
Unleashing the Power of Advanced CSS
Flexbox Mastery: Flexbox is a layout model that can effortlessly handle complex layout structures. With its ability to create responsive grids and alignment control, mastering Flexbox can greatly enhance your design efficiency.
Grid Layouts: CSS Grid Layout unlocks the potential to design intricate layouts with ease. Creating responsive grids that adapt flawlessly to different screen sizes becomes a breeze, allowing for dynamic and engaging web designs.
Custom Animations: Advanced CSS empowers you to create captivating animations without relying on external libraries. From smooth transitions to complex keyframe animations, your designs can come to life in ways you've only imagined.
Responsive Typography: Tailoring typography for various devices is a hallmark of modern design. Learn how to use CSS to create fluid typography that adjusts harmoniously across different screen sizes, enhancing readability and aesthetics.
Transforms and Transitions: Elevate user experience with transformative effects and seamless transitions. Combine 2D and 3D transforms with transitions to build engaging interactions that captivate your audience.
The Benefits of Mastering Advanced CSS
Design Freedom: Advanced CSS techniques provide you with the creative freedom to bring your design visions to reality, without being limited by technical constraints.
Improved Performance: CSS animations and effects can be more performant than JavaScript alternatives, leading to smoother user experiences.
Responsive Design Excellence: With advanced techniques, crafting responsive designs becomes intuitive, ensuring your websites look and function flawlessly on any device.
Efficient Workflow: Streamlined layouts and animations allow for more efficient coding and quicker development cycles.
Professional Growth: As you master advanced CSS, your value as a web designer increases, opening up new opportunities and challenging projects.
Learning Advanced CSS with Webtutor.dev
To embark on your journey towards becoming an advanced CSS designer, Webtutor.dev is your ultimate companion. Their comprehensive Advanced CSS course is designed to guide you through each technique step by step, ensuring you gain practical expertise.
Here's what you can expect from the Webtutor.dev Advanced CSS course
In-Depth Modules: Dive deep into each advanced technique, with clear explanations and hands-on exercises.
Practical Projects: Apply your knowledge through real-world projects that showcase your newfound skills.
Expert Guidance: Benefit from the insights of experienced instructors who are passionate about your growth.
Interactive Learning: Engage in interactive coding sessions that reinforce your understanding and boost your confidence.
Community Support: Join a vibrant community of learners, where you can exchange ideas, seek help, and celebrate your progress.
Conclusion
Elevating your web design game with advanced CSS techniques is a rewarding endeavor that can set you on the path to becoming a design virtuoso. From responsive layouts to captivating animations, mastering these techniques opens doors to limitless creativity. Webtutor.dev offers an unbeatable resource to guide you on this journey, providing a structured and supportive learning environment that empowers you to create stunning, cutting-edge designs.
Visit Webtutor.dev to start your journey into advanced CSS today. Unleash your design potential and create web experiences that leave a lasting impression. Happy designing!
Explore more
From Zero to Hero: How to Create Stunning Websites With CSS for Beginners
The Ultimate Guide to CSS Animations: Engage and Delight Your Audience
Latest CSS Tricks and Features of 2023
Latest CSS Trends in 2023
0 notes
shwetaglobereach · 11 days
Text
HTML & CSS Essentials: Building Web Brilliance
Tumblr media
Unlock the power of HTML & CSS for dynamic web design. From structure to style, learn to create stunning websites with this foundational duo. #HTML #CSS #WebDesign
1 note · View note
agentromanoffsir · 1 year
Text
Tumblr media
neocities guide - why you should build your own html website
do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!
what is neocities?
neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."
why should I make my own website?
web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.
what would I even put on a website?
the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site
getting started: neocities/html guide
sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles
fun stuff to add to your site
want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have
web revival manifestos & communities
also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience
in conclusion
i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities
Tumblr media
74K notes · View notes
cleverfirenacho · 29 days
Text
1 note · View note
oflgtfol · 6 months
Text
i have a 3d model thing i have in mind that i want to create for a webpage kinda thing but first i need to learn javascript. and then i must learn threejs
0 notes