#responsive css table

[furiouslovepolice]

Responsive Sortable Table for HTML Websites

People watch website both from Laptop and Mobile. So, when a web developer creates Table, he or she should make it as responsive. Sometimes it is important to set different color for odd and even row that reader can read the table easily. This Code can make your Table Header sortable too.

[divinector]

Responsive Pricing Plan

[codenewbies]

Responsive Price Plan Design

[codingflicks]

Pricing Table design

[izicodes]

Sugary Scribbles | #8

Saturday 6th January 2024

IT'S BASICALLY WORKING (on larger screens)! My never-ending war on website responsiveness continues! I have a large screen and I stupidly only took into account of MY screen size. What I did do though is created a message for phone-table sizes because it just wouldn't make sense it working on really small devices - in my opinion~! But for now I will put this on hold because I am excited about my other project idea I came up with yesterday oops~!

This is my first project of the year and it's super adorable in my opinion! It paints, it erases, it deletes and it saves your artwork! Ticks all the boxes I made at the beginning of the project! Turned a simple 'Make a HTML painting webpage' into something more cuter and cool! Job well done! 😩🙌🏾💗

You can try it out (if you have a larger screen size), all that happens is the painting will be off the mouse direction a bit, sorry!

link to the Sugary-Scribbles web app! 🍡

Lastly, here is a cool drawing I made as I was testing the site~! I'm a better artist than this I swear, just not good using a mouse...

List of resources I used during the project

Figma - to plan the webpage

Canva: to make the header

Photopea: for further photo editing

RedKetchup: to colour pick quickly

CSS Animations: to add the zoom-in-n-out animation

MDN Canvas: to know what the element does properly

YouTube Tutorial: to get inspiration and extra help

Flaticon: for the icons and cursors

Html2canvas API: to turn the drawing into an image (tutorial)

That's all, have a nice day/night and happy coding! 🖤

[soophia-studies]

100 days of code - day 22

Hello again 😊

Today I studied a few topics, they were: SVG, Tables, and CSS units.

SVG is an image format based in vectors and geometrical shapes, instead of pixel, it means that svg can scale to any size without losing resolution. SVGs are widely used on the web to create icons, logos, and this graphic stuff.

Tables are tables, I learned how to create one, how to style it, and the best practices using it.

Also, I learned about CSS units, until now I was using almost only px that is a absolute unit, It doesn't scale, different from other relative units like em, rem, vh and vw that scale relative to something and are ideal for responsive websites.

With vw I can make the font size always be x% of the viewport width, like so:

That's it 😴

[murielcook]

stealing this list of early web & 90s inspired sites & adding a few of my own here:

🖥️ http://ita.toys

🖥️ http://syntaxmag.online

🖥️ http://dirt.fyi

🖥️ http://biter.ph

https://mutterbutter.neocities.org/main/

https://y2kstardust.neocities.org/home

https://sweetcharm.net

https://virtual-milk-2000.neocities.org

The original links (💻) feel, imo, less inspired by actual web 1-2 and more inspired by the print pubs of the same era. BUT it is impressive and deserves to be explored and shouted out.

a beautiful website in the late 90s would have likely been forced to about 600-700px wide reading area to ensure compatibility not w mobile, w small desk/laptop screens, bc we didn't have responsive sizing yet. layouts were often achieved with painstaking image slicing positioned with tables. exotic fonts were more rarely used bc css didn't support font sharing and it ate bandwidth. midi soundtracks fell in and out of favor & were scene dependent.

css animation wasn't a thing, and javascript was if you know you know. So gifs and sometimes flash were more common (flash being more 2.0 imo). Raw, boxy, grey element styling often poked through on forms and buttons etc. tho it was popular to color/style scrollbars for a bit

The 4 I picked hew closer to memory. They are all very high effort and maximalist examples tho. A new wave of the older form.

It's good I love this!!

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[skinsort]

I don't think I have a ton of followers, but for those who are here, below the cut is basically a very long think piece on jcink skinning that will probably offend a lot of people, but it's my honest take and I'm willing to hear other people's constructively expressed criticisms, and am very open to revising my opinion. I just was surprised by the SOPs I found in the jcink rpc when I started writing this skin and was doing research into whether I wanted to try selling it or not. For anyone wondering about the future the TLDR is as follows: I will probably make another skin and sell it as a multisale and see how that goes. This will probably happen a long time from now. I will probably never take custom commissions. I will probably charge more than people would like for my skins, but I think I have good reasons for that. More below the cut on the actual thoughts.

There were a few obstacles that became immediately obvious when beginning to work on a jcink skin for the first time.

First off, jcink is imo fundamentally bugged.

It has a slow initial load time even on the default skin, always over a second, usually over 2 in my testing. Industry standard is .5, and php (the backend language of jcink's templating system, and i assume the databases), though old, is perfectly capable of meeting that threshold. I personally find this an infuriating fact about jcink, especially since I can do nothing about it.

There are two distinct skins on any site by default, neither of which are responsive. Responsiveness basically refers to whether or not a website looks good regardless of screen size. It's a universal concern in any modern tech company. I understand that when jcink was first written, a lot of what's possible today wasn't available, however we are long since past the time (in my opinion) that it would have been simple for John to reskin the default view of jcink to be responsive and provide that as an alternative to the og defaults. If nothing else, this would provide a better standard for what a 'functional' skin might look like, and maybe even a baseline for people to build off of. Instead we have tables which are generally unusable in modern web design.

Jcink is also not terribly accessible by default. I found text labels missing in several places (for screen reader users), no keyboard accessibility on a few default functions (for people who can't use a mouse), and of course, nothing in the docs to remind people to keep what features there are in the default skin.

Then we have the added complications of the jcink rpc community, the skinners and coder in general within the space. I think I can break down my thoughts on this into three main categories: Price, Product, and People. I have a lot of thoughts about these topics, so bear with me.

Price

Look me in the eyes. Not one single skinner I could find was charging a market rate for front end web development. The most expensive person I could find wasn't even asking for 25% of the money a front end website developer would make for a skin professionally, and I found them because people were putting them on blast for charging as much as they did. The jcink rpc has been getting bargain basement prices on code for EVER, and seems to have NO concept of the time and complexity of writing actually good code.

I have mixed feelings on this.

I have not seen a professional grade skin in the wild, not once, not even my own. The css on my skin is sloppy. There are areas I got a serious case of the fuckits on and wrote some ugly code. There's at least one info page on my site that looks weird af on mobile and I have no intention of fixing it. I say this with love, compassion, and appreciation for everyone who codes for this community. Not one single jcink skin I have ever interacted with would constitute a professional level of work in my field. No one whose work I have interacted with (again, including my own!!) should be charging a fully professional rate.

This is a hobby. We do this for fun. We shouldn't be in an arms race for the prettiest skins, but we are. People like nice interfaces, it will affect their decision to consider or nope out of a site. So, we're in a situation that for a 'not boring' skin, custom skinning has become much more of a norm. In order to have a successful site, admins generally need to invest in a decent skin. With a custom skin, you can easily get to $250 in cost, and I've seen it go quite high from there. That's a lot of money for a site which may not survive. That's a big fuckin' deal. Some people are serial site starters so if one fails, that's fine, the skin can be reused, but I personally have not adminned a site since 2016 until a month ago. If I had sunk $250 into a skin, plus $80 for jcink premium for a site that never took off, suddenly my 'free' hobby becomes quite dear. I think it's only right that there be a certain degree of friendliness in the community when it comes to pricing because of this, even for truly professional coders (again, of which I've seen zero). Skinners are part of the ecosystem and deserve to be properly valued. Admins shouldn't have to pay out the ass just to have a better chance of their site taking off.

There's a great deal of risk involved in most skinning transactions I know of. First off, unlike the real world, we often don't know each other's irl identities. This makes a situation rife for scammers on both ends of the transaction- from skinners not getting paid for delivered work, and customers not getting the product they asked for, if they get it at all. This rightfully affects both parties' feelings on how to adjust pricing to account for risk. If you're a coder, prices should be higher, if you're an admin, prices should be lower. This has been more or less solved for multisales with payhip etc, but custom skins are still fraught, and in a world where plenty of players won't consider a site if they've seen the skin too much, that is still a significant chunk of the activity at play.

So do I think skinners should be paid fully professional rates? No. From what I have seen and learned, absolutely not. It didn't occur to me to track the time spent on my skin until quite late in the process, but if I had to guess I'd put it at about 40 hours worth of work. I'll talk more about this in the product section if that seems like a lot of time to you. I'll throw out a very loose figure and say that $50/hr is about right as a figure for what a professional developer would make doing this kind of work, after tax etc. If you're being responsible about the IRS, it would bump significantly higher. If you multiply that by the 40 hours I spent on my skin, we're getting into multiple thousands of dollars for a custom skin if people were charging professional rates. Now it's very possible that if I made skinning My Thing, that I'd build up a library of components I could pull on to make skins much more quickly. I know for a fact that many skinners do. But even if we say I halve my time on my second skin (optimistic but v possible), we're at $1000 if I was charging the prices I charge my employer to keep me on board. That is CLEARLY unsustainable for a hobby centric community where money never gets involved. So what should pricing look like? I really think that depends on the product.

Product

So. I think there's some room for honest reflection in jcink skinning communities about what is being sold. To contextualize this, I have to lay out the basics of what my general mindset is around what makes a website good for its users.

The obvious one, and the one that I think gets the most attention in jcink skinning is aesthetics. How a site looks, whether it's pretty, etc. I think this is important, I care about things looking good, but out of these five concerns, this one is frankly last on my list of what's important.

UX Design/Functionality. No, this is not the same as aesthetics. Is a site easy to understand, use and navigate. Does it make it seamless for a user to get where they want. Does it provide the contextual information they expect from the page they're visiting. These questions are fundamental for me, and I'd rather have a well designed user experience, than a well designed asethetic experience on a site.

Accessibility. Is a site readable. IS A SITE READABLE. IS A SITE READABLE. Is there enough contrast on a page that a colorblind user could read it? Can you navigate it with a keyboard? How about a screenreader? Is the text large enough for standard screen sizes. Does it stay large enough across devices?

Responsiveness. If someone on a phone visits my site, will they have a good experience in every view? Will they have the functionality they need? What about a tablet? What about someone with a small desktop screen, or a huge one? If I have hovers somewhere on my site, is it still navigable on mobile, or is it now an unintuitive situation? Phones take way longer to load than most computers, do all the assets (gifs, images, multiple fonts, etc) on my site make it frustrating for a mobile user to visit my pages?

Performance. When I said jcink is bugged earlier, performance was one my complaints. The base page load time of jcink is shitty. However, what's worse is when a skin takes a baseline of 2 seconds for pages to load, and bumps it up to 5, 8 or (the worst I've seen) 13 seconds to load after someone tries to visit a page. I have not seen a single jcink skin (aside from my own), which adds less than a second of loadtime to jcink's default performance. Again, in an industry where the basic standard is under half a second, jcink skins do not perform to a professional level.

If a website fails along these metrics, it cannot be considered professional for general public consumption. The problem is, everything except aesthetics requires a considerable baseline of knowledge and practice to do well. These are problems that many fortune 500 companies have not figured out (that's because their execs are dumb dinosaurs, but still). So when it comes to the question of 'how much should a skin cost', I think a skinner is obligated to consider their product. Is it aesthetically pleasing? Is it functional? Is it accessible? Is it responsive? Is it performant? For most skins, the answer to at least three of these questions is NO, and I think that pricing should reflect that. In my opinion, I think most skinners do well with asethetics, some skinners do well with functionality, and I have yet to see any truly accessible, responsive, or performant skins in the wild. When it came to writing mine, I think I needed about 5 hours to get familiar with how jcink worked, and then if I only wanted my site to look good on a desktop monitor, I probably could have spent 10-15 hours to write my skin as a noob having to look up every php variable John uses in jcink's terrible docs. That is not what I did. My skin is fully responsive, it is fully accessible, it is to my personal taste aesthetically, and is very performant (on average .25-.35 added seconds to my load time) despite having piles of functional scripts (all of which i wrote myself) on several pages. I also wrote several things that make my life and my member's lives easier. I have a member directory and face claim that require no work on my end past sorting an accepted character into the right member group. I have an autotracker built into member profiles so people can keep track of their threads. I have a button which allows members with lower end computers to turn off most graphics on the site so their computers don't sound like airplanes taking off. I have a light mode/dark mode switch that guests and members can both use. Personally, I would not feel like a freak for charging $1000 for a custom skin of this caliber. It's half what I would earn normally (using the $50/hr figure from earlier), and it lives up to all my standards for what professional code ought to do for its users vs. one or two. The css is not my best work, but I can say without undue arrogance that it's far and away easier to touch without breaking things than any other skin I've looked at, and the actual interface that people see and interact with is great. Again, the aesthetics are simple and to my taste, but it makes sense and has lots of quality of life bits and bobs in it. I'm proud of it. I understand if that entire paragraph read wildly, but I don't say any of it lightly or with the intention to belittle anyone. I'm trying to contextualize how I think about how price relates to what is actually being delivered. But even though I genuinely feel $1000 would be an excellent deal for the work I have done on my skin, I could not possibly stomach charging that much money to a single person for this skin, which (in addition to me using it on my own site) is why it is not going on sale.

To be honest, I have NO idea how much time a typical skinner spends on a custom skin. My approach is different from most people who do this for the community, and I also do adjacent work professionally and have for many years. I suspect that if asked to achieve all 5 of the above criteria, I would be able to do that significantly faster than most skinners. That said, I have no library of components I can turn to, and I hate a lot of the standard choices in building skins and would rather write my own. Isotope, cfs, etc can burn, they're bad code. There's tradeoffs to how I'd do things and how others would, which have significant impacts on time spent, but also on the outcome. Generally however, when it comes to jcink pricing, and how much people should charge or spend on a skin, I think the above 5 things should be the primary metrics. I made my own because I couldn't find a single skin that was truly accessible or responsive, and because I know how the sausage is made I simply couldn't stomach it. I can't really tell you how much you SHOULD pay for a skin that only does Aesthetics and Function, or only Function and Accessibility or any other combination. It's really not my place. I have thoughts on what I would charge, trying to be fair to myself and others if I were to make a multisale. But that's for a different post.

People

And then there's people. I touched on this earlier with some talk about scamming. I have heard horror stories on both ends of this interaction, and I think, simply speaking, it has created a lot of distrust around something which is a core decision for a lot of boards- which skinner to work with, what standards to set, how much things should cost, how to arrange payment. Payment structure has to take care of both you and the commissioner, but it also has to take into account that lots of people are gonna drive you up a wall, go ten rounds on their requirements, and then expect finished work two weeks after they finally got back to you about a core feature. With all due respect, clients who know NOTHING about tech and still have a lot of opinions on exactly how things should be done are my personal nightmare. I have not figured out any good way to account for this. I think custom commissions can be great for both the coder and the customer, but it's a total crapshoot as far as I can tell with no solve that I know of. I think there is also greater than average honesty and flexibility required from both parties in a non-professional setting(like jcink coding is) where money is still being exchanged. I think skinners have to be honest about their capabilities, their timeline, and how they want to work with customers. I think customers have to be honest about their expectations, their priorities and their consistency (are they going to change their mind frequently). I think both people need to be willing to find compromise. Since NO ONE is producing professional products and NO ONE is paying professional prices, there needs to be an understanding that sometimes things need to adjust. But, with custom skinning, it's often a lot of money for people. 250+ is a significant chunk of change. It feels wild to pay that much and not get exactly what you want. However, exactly what you want may be outside the skillset of a hobbyist, or it may simply be difficult or tedious or finicky, even for a professional. You want me to do custom svg clipping all over a skin? I'd rather die than do that during my free time. Furthermore, no skinner is being paid to do EVERYTHING that a professional site might demand. Being unhappy that you didn't get every concern addressed is not reasonable with the rates getting paid right now. There's ground to give on both sides. Flexibility is key, and it gets hard when there's money on the line.

Okay but so what?

Bish i don't know!!! Skinning is difficult niche stuff, especially if you're actually meeting any kind of professional standard. It's really easy to do badly. Paying for products where there is literally no professional available is always complicated. Idk what to tell you man. I'm just saying that I don't think anyone is getting paid a rate they deserve relative to the time they put in (probably), and simultaneously people don't get a product that lives up to the rest of the web right now because there's no real industry level professionalism available. And what's worst is that it's nobody's fault!! It's a tough spot to be in as a community! As for me, I'll probably do multisales in the future, and I'll probably charge significantly more than others because I'll be delivering significantly more. I am simply incapable of coding something that isn't responsive and accessible and performant if I'm going to charge money for it. It simply shan't happen, which means my time and skill will be reflected in the work and ergo the price. As for commissions, other people's taste irritates me too much to willingly get into typical freelancing in any capacity (affectionately, i will never be doing certain aesthetics unless people are willing to pay me my full rate, which no one should lol). I will almost certainly never do fully custom commission work. It is simultaneously not worth my time to do it for the rates offered by the jcink rpc, and it's not worth a commissioners money to pay for my skills when people are well used to skins that don't rise to professional standards anyway. Since I've finished my skin I've started posting some of the scripts I whipped up on caution. You can scroll back in this blog and find some of them. I'll probably continue to do that with anything I think another skinner could use. I will probably also start posting tutorials for discrete components so people have some examples of what responsive coding looks like. It's a tough nut to crack if you've never seen it up close before! If I'm really going to be a good member of the community I should probably start posting those here too more regularly. I basically just really want to help people out with their coding and contribute to the overall health of jcink skinning without undervaluing myself or gatekeeping good code. I will probably post my thoughts on how I'll be structuring the pricing for upcoming work in the next week or so. Expect updates after the holidays on upcoming skin ideas. Most of them have to do with implementing fun design stuff I never get to do at work- parallax effects, color manipulations, funky shapes, abusing css filter rules. I'd love to hear what kinds of things people would be excited to see first!

[digvijay00]

Unleashing the Power of the Full Stack Developer: A New Era in Tech Excellence

Introduction

In the rapidly evolving landscape of technology, the role of a full stack developer has emerged as a cornerstone for building cutting-edge digital solutions. As we delve into the intricacies of this dynamic profession, we witness the fusion of technical prowess and versatility. The era of the full stack developer is upon us, reshaping the way we conceive, create, and interact with digital innovations. To become a full-stack developer you can learn from Uncodemy, which provides the best full-developer course in Delhi. It will create lots of opportunities for your future.

Understanding the Full Stack Developer

What is a Full Stack Developer?

A full-stack developer is a multifaceted professional who possesses expertise in both front-end and back-end technologies. This holistic skill set empowers them to navigate the entire spectrum of web development, from designing user interfaces to managing databases and server configurations.

The Tech Arsenal

Full-stack developers are equipped with a diverse toolbox, including proficiency in languages such as HTML, CSS, JavaScript, Python, and more. Their adaptability extends to frameworks like React, Angular, and Vue.js on the front end, and Node.js, Django, and Ruby on Rails on the back end. This versatility ensures they can seamlessly integrate different components, fostering a cohesive and efficient development process.

Navigating the Full Stack Landscape

Bridging the Gap

One of the distinctive features of a full-stack developer is their ability to bridge the gap between front-end and back-end development. This ensures a smoother collaboration between design and functionality, ultimately leading to a more cohesive and user-friendly end product.

Agile Development

In the contemporary tech environment, where agility is paramount, full stack developers shine. Their capacity to switch between tasks and address challenges at various levels of the development process makes them invaluable assets in agile development methodologies.

The Full Stack Advantage in Web Development

Streamlined Communication

Efficient communication between different components of a web application is crucial for its success. Full stack developers, with their comprehensive skill set, facilitate seamless interaction between the user interface, server, and database, resulting in faster response times and enhanced user experiences.

Cost-Effectiveness

Hiring separate front-end and back-end developers can be a costly affair. Enter the full stack developer, a cost-effective solution for businesses aiming to streamline their development teams without compromising on expertise. This consolidation of skills ensures a leaner, more efficient development process.

Staying Ahead in the Full Stack Game

Continuous Learning

The tech landscape is ever-changing, and full-stack developers understand the importance of continuous learning. Whether it’s adopting new frameworks or staying abreast of emerging technologies, the commitment to staying relevant is ingrained in the ethos of a full-stack developer.

Building Robust Solutions

In the era of full-stack development, the focus extends beyond creating functional applications. Full-stack developers are architects of robust, scalable solutions. Their proficiency in handling both client and server-side aspects empowers them to design applications that can evolve and adapt to the dynamic needs of the digital realm.

Conclusion

In conclusion, the era of the full-stack developer is a testament to the evolution of web development. These versatile professionals bring a unique blend of skills to the table, enhancing collaboration, reducing costs, and driving innovation. As businesses navigate the complexities of the digital landscape, embracing the prowess of full-stack developers becomes not just an option but a strategic imperative.

Source Link: https://www.blogsocialnews.com/unleashing-the-power-of-the-full-stack-developer-a-new-era-in-tech-excellence/

[zephiris]

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

[divinector]

Responsive Price Plan Design

[mmainulhasan]

Prompt Examples for Learning Web Development

Coding is both an art and a science. It’s about creatively solving problems, bringing ideas to life, and constantly learning and adapting.

Because technology advances at such a rapid pace, it is essential to be fluent in a variety of languages, tools, and domains.

Sometimes it’s difficult to pick up the right resources from the ocean of tutorials, demos, and resources.

And on top of that, sometimes we have to learn and apply so fast due to tight deadlines of the projects. In this case, we need a friend who can help us learn and work faster and better. And thanks to AI by this, our learning becomes faster and more fun.

Today, we’ll look at how learning prompts that AI drives can change the way you learn web development.

How you can craft prompt engineering for web development, the difference between a generic prompt and a bit tweaked prompt can eventually change your desired results and make your learning journey more smooth and more enjoyable.

You can also use this knowledge to learn other fields more quickly and interactively.

Table of Contents

Learning Prompts

HTML Prompt Examples

CSS Prompt Examples

Debugging Prompts

Testing Prompts

Crafting Better Prompts

Further Reading and Resources

🎯Learning Prompts

Prompts are at the heart of AI-powered learning. Prompts are questions or commands that guide AI models like GPT-3 or GPT-4 to generate the desired responses. They act as a springboard for the AI to dive into the knowledge it’s been trained on and come up with relevant outputs.

You can use AI’s capabilities in a variety of scenarios in web development, including debugging, code generation, and even learning new web development concepts.

Now, we’ll go through some basic prompts and their outputs, as well as a little tweaking of the prompt commands to see how the output is becoming more result oriented, giving you a sense of how you may build your prompt commands for better results.

Prompt Commands for Learning HTML Basics

Learning the basics of web development involves understanding the structure and syntax of HTML, CSS, and JavaScript. Here are some prompt examples you can use:

Create a simple HTML structure with a header, main content section, and footer.

This prompt returns a simple HTML skeleton. But if you want a more detailed structure, you could modify the prompt to include specific HTML elements. For example:

Create a simple HTML structure with a header containing a navigation bar, a main content section with a paragraph and an image, and a footer with copyright information.

Curious to know more? Visit our blog for the complete post and dive deeper into Learning Web Development with AI Prompts.

[codingflicks]

Bootstrap Pricing Table design

[izicodes]

Hii ! I’m in a bit of a problem rn and I’m wondering if you could help ( sorry for bothering you )

So school just finished and I’m on vacation for like 3 months so I really want to learn how to code ( I mainly want to make cool websites and stuff ). So I started to learn html and css but it just seems so overwhelming especially seeing all the ressources and tutorials online, could you please help me know what to learn first ? 💖

Hiya! 💗

Yeah, I can help! It can be overwhelming at first, but it's best to break it down into chunks and tackle them bit by bit.

For now, as a complete beginner, use these 3 resources:

HTML and CSS course video - LINK

W3School (for extra help) - HTML LINK | CSS LINK

MDN (for even extra help) - HTML LINK | CSS LINK

After that, work on projects to test your knowledge:

List of 11 projects to tackle - LINK

Here is the list of things you want to cover in HTML:

Basic structure

Tags and elements

Attributes

Forms

Semantic markup

Tables

The same but for CSS:

Selectors

Box model (margin, padding, border)

Typography (fonts, text properties)

Colours and backgrounds

Layout and positioning (floats, flexbox, grid)

Responsive design (media queries)

Transitions and animations

Now that you have a list of what you need to cover, tackle them one by one, making sure you understand the topic before you head over to the next. The video tutorial covers all of this and more. If you don't understand a bit in the video, stop and look on W3School and MDN for further understanding and then continue on with the video. Also, tackle the video slowing. Don't rush, don't do it, it'll just make the learning process even longer if you getting not understand things.

The resources I listed are my complete go-to. After that, as you've noticed, there are hundreds more. Go through the ones you need for the specific project you're working on or the topic you're studying only.

Hope this helps and good luck! 💻💗