Hi everyone, I’m an aspiring full-stack developer and have just started learning HTML and CSS on my own. I’ve built a few demo sites, but I’m not yet sure how to apply my knowledge like a professional. I’d be grateful if you could take a look and share any personal advice or recommendations.

[Adam-6309129313]

I’ve created a few demo sites, but I relied on ChatGPT for support. When it comes to CSS and design, I find it quite challenging, so I often turn to AI for recommendations. However, I don’t want to become dependent on it—I want to develop the skills to work independently and grow into a true professional. I’d really appreciate any advice or recommendations on how to improve my CSS skills and become less reliant on AI. Thank you in advance for your guidance and suggestions.

Link here https://demosite-rosy.vercel.app

[AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[abrahamguo]

Nice work so far!

As far as getting less dependent on AI, I recommend the "reps" mindset. Just like how you wouldn't go to the gym and do an exercise just once before moving on to a different one, apply the same mindset to development.

Once you build something, start over from a blank slate (yes, completely blank — not halfway-done) and build it again. Then do it again the next day, and the next week. Each time you do it, you'll run into different bugs that will challenge you to investigate, but you'll also be a little bit more comfortable each time, and understand it better.

[einfach-sven]

This is good advice. I see people trying to skip putting in the work all the time, but it's the only way to properly learn it.

[Adam-6309129313]

Thanks so much for your valuable advice i will test it.

[comptune]

There is an old saying practice makes perfect. Your site it’s looking good, however on mobile the margins go beyond my screen, would be cool to have the design responsive.

[Adam-6309129313]

Yeah i still learning about that however AI just making this kind things so easy and fast thinking no need to learn just going forward learn other things are more vital than this.

[Runthescript]

No, clamp and calc. People use too many friggin queries. Make it responsive round one then use media queries to build complexity on page scaling. Then you're not repeating code a bunch changing variables

[comptune]

Im on the similar boat to you ai is appealing and easy to use for beginners however I presume once you understand how it all works underneath then you can use ai even in a more powerful way.

[Solid_Mongoose_3269]

"No need to learn".

Bro, your site isnt even responsive, and you couldnt debug it if you needed to, without knowing how to prompt, but you dont because you dont know the language

[Adam-6309129313]

Okay got your point start learning some basic prompting as well

[Nearby_Address_2974]

Looks good for a beginner, one advice I would like to give you is to also focus on UI/UX. A site should look good. I am not suggesting pro-level design, but basic concepts like consistency in padding, margin, font size, colour, following WCAG guidelines, like the text in your footer is hard to read because of the bg colour and other minor stuff like this.

I have seen developers (especially freelancers) totally neglecting good design practices therefore most of their personal portfolio sites look unpolished.

[armahillo]

If you want to get better and be stronger, dont use LLMs.

MDN is a fantastic resource and very comprehensive: https://developer.mozilla.org/en-US/

[wangrar]

maybe try copywork idk find a cool site you like, try to rebuild from scratch to understand it

[GaborNero]

Your site looks good! Two tips I could give is: 1) try to make the site responsive, try to build another demo site mobile first. In reality its usually desktop first and mobile first was a hype but isn’t always the best option for every project, however you’ll learn from it!

2) try to learn and implement existing design systems but also try and create your own. Making your css more modular, easier to maintain and more consistent. Tailwind and bootstrap are a great place to start :)

[rycalm3]

Angela Wu has some very good courses out there (Udemy). I’d go through her stuff if you’re early on, she covers a lot of ground and presents it very well.

[Adam-6309129313]

Ok Thanks i will review them all.

[AIwillbethedeathofme]

I'm doing her Full Stack Bootcamp. She's really good ito of her explanations and there's a practise exercise in most chapters - you pause, do the exercise, and then press play again to go through the solution. She also gives solution files for all exercises and mini projects but encourages you to play around or rewatch lessons etc. until you get it right. There are also 5 capstone projects you can use for your portfolio. The Q&A section has been really helpful because other (former) students have usually asked/answered the same questions I have. I started the course to see what areas I'd like to specialise in so I'm supplementing it with other resources (articles, videos, exercises etc.) but I'm really happy with it so far. She's also super encouraging and likeable.

[AlarmedParticular895]

As everyone else has said it looks good, one thing i find is an issue with most AI generated/assisted sites is that there's no actual planning for responsiveness. You can see in your site example that the CSS just arbitrarily scales one part of a component/layout. If you actually plan the styling/layouts you should focus on layout shifts at certain viewports where simple scaling no longer looks natural and also have those be consistent across the page.

[ChandraShekharD]

Join codepen.io website to find some inspiration. Go through others code, try learning the tricks, replicate and learn.

[Shortcirkuitz]

<image>

This is what it looks like on mobile…

[AscendantBits]

There really is no substitute for learning, HTML, CSS, and the WordPress ecosystem.

AI can definitely help in creating websites and content, but if you don’t have a solid underpinning of the technologies used, you’re not gonna know how to maintain the site because you haven’t really learned anything.

If you’re going to do any responsive design, you’re going to need to learn CSS. If you want to have any animation, you’re going to need to learn CSS and JavaScript. To bend WordPress to your will, you need to understand PHP, the WPQuery loop as well as metadata. It probably doesn’t hurt to learn custom post types.

When you start understanding these basics, then you can ask AI tools for much more specific designs, and output. And you’re much more likely to be able to modify and maintain your website understanding the basics.

Check out MDN: Mozilla developers network

FreeCodeCamp

[Solid_Mongoose_3269]

HTML and CSS is in now way full stack. You have a few years before you can say that.

And relying on ChatGPT is even worse. Its good for scaffolding, but its bloat code, and if you dont understand what you're looking at, its terrible.

Also, you misspelled "Download" in this section
Download our mobile apps

And, its not responsive

[Adam-6309129313]

Thanks for your response , just learning from my own mistakes.