Finished learning basics of html and css. Want to do some projects using only html and css.

shivajikobardan

Well-Known Coder
Pardon me if this is not allowed here, you can remove this if this is not allowed.

I’ve finished learning basics of HTML and CSS indvidually. I.e topic by topic w/o creating a project.
If you want to know the topics that I’ve learnt, I’ve learnt around everything contained in the book “learning web design by jennifer robbins”.
Now, I want to do some projects using only html and css. Please share some beginner friendly projects(websites) to do. I’m really stuck and unable to create any projects even though I know the basics. And it’s really scaring me away from programming.
I don’t want to look at tutorials that make projects because IDK but that doesn’t help me at this point. They’re building websites with their own thought process and I have a different thought process.
IDK what could help me. If you ever faced this phase, do share how you overcame this phase.

For eg:
I watch this video. I know everything he’s doing in the video. But when I’ve to create a site without looking at him, I don’t get it. I try to make stuffs but then I fail.

I was trying to create this site.
eLsTyDFmrKFyS84ehmIcSQcTkM0MYMihXsOfIpiWGDM1CR-3S2IRLXP8zk70aguLGf-YfBEmfgSEwd66646N38vvTqr0zocqCOZm8_KiEuTT5zmHPLTI6XVToL7aHUwSBWkDEmzCqAXiphaEqojU8gjQ9kzy2AyEn4C5AzgzcDhwpnV1WLosMGRuMgIlVQ

But I am stuck here.
LLy9sqseMCfdllJh20jRln73P2Llb_kxw38mvq4Q7vje54-2l6GmK503bIrvFiOGJn1WeE3WnBX18RleGC2sC31BMcFqFDeMqON1IQH-dt16kJn568b9ylpQRIdA0WqaFosi8xJFDJH6BJq62CfqAQPbk8UJMm1KGsoNrjAI44gF716FrxhACLhBgXFQNg

Words are lost here and I’m failing to debug them. Eg: “CODING.” is overlapped with first navbar.

I’m missing a space after “CONTACT” as well. Issues like this happens everytime. How do I get out of them?

I’d like to see some projects examples that I can build step by step at this phase with some guidance as well. I tried courses by Jonas Schmedtan but didn’t like it, tried academind’s course and didn’t like it. Both were bestsellers courses. Don’t like brad traversy’s way of presentation either. It says a lot about me and maybe I’m not built for programming.

What I could do with CSS could also be done with bootstrap but the main point is that I am fundamentally not able to create something from scratch. I’ve put around 1 month on learning html and css and looking at my current situation, I’m having to rethink about my programming career, if that’s even right for me.
 

BorkedSystem32

King Coder
When it comes to issues with layouts like the one you described, I'd recommend you take a step backwards: check your error/warning console in your browser and look carefully over your code. Does anything about it look off? Are you being bombarded with errors/warnings? And if so, whereabouts in the code are they coming from? From then on, just make small tweaks to see how you can get the result you desire. That's my two cents.

In regards to doing projects, my suggestion is just look at any old website like Facebook, any news site like CNN or BBC, shopping sites, etc. And just examine their layout/design(and code too, if you're that curious) and just start building from scratch. You claim to have learned the basics: now put them to work. Just code by yourself with a reference/documentation manual opened in a browser tab. Copying from tutorials can only get you so far, because you may end up repeating snippets of code when you go to work on bigger projects which involve other people, or when you're hired for a company and you go to show your work, you have effectively just plagiarised something and claimed it as your own. And it sets back your creativity too: the only thing you can build is the only thing you're comfortable building because you were raised to build that thing only. Step outside your comfort zone. If you're really stuck, go online and look for ideas, but if there are links to tutorials with these ideas, do not click on them. Take the idea and just start working away on it.

I hope this helps.
 

shivajikobardan

Well-Known Coder
I try to do exactly what you said. But I build stuffs in such a different nonsense way that it's hilarious and sad at the same time. I need to learn proper patterns to build navbar, hero section, footer etc. Where can I find them? "CSS Cookbook" had it but it's outdated.
 
Top