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

[polaryeti]

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: https://www.youtube.com/watch?v=ErRRS-rHjWc&list=PLPppPPmk0i3hZCNmbVtcP1hlwDKOdUFX9&index=3 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.

 

But I am stuck here.

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.
 

[requinix]

Knowing the fundamentals of something is different from knowing how to apply them. That works for everything: speaking a language, driving a car, cooking a dinner... What you've learned is the fundamentals but perhaps not how you actually use them.

That said, website design is another thing by itself that takes some amount of learning. Learning how to use paint and a brush doesn't mean you can sell a painting.

If you're a video person then see if you can find videos about the designing side of websites, not so much the syntax side.

[polaryeti]

Any actionable ideas you've got for me?

[requinix]

What do you mean by "actionable"? My suggestion was, given you seem to like using YouTube, to find videos that can explain aspects of page design and not just simply about HTML and CSS syntax. The idea is that you could be able to look at the elements of a page and consider, say, whether they're using flexbox or grid, or how their arrangement changes when you resize your browser window.

If your goal is really just to copy that site then use the browser developer tools to look at a site and see how they set it up, then see if you can replicate what they did (and without cheating by literally copying it).

[gizmola]

Just a note: please don't use imgur links.  That site is a mess, and the forum allows you to attach and insert images into your posts.  I editted your question to do that.  It's better for everyone to have the content referenced here.  As I answered this in the bootstrap thread you made, I'm not going to repeat my comments but they are relevant.  These days, layouts are a lot easier to do using flexbox and/or grid.  

I would also suggest using an html/css/js sandbox for your prototyping/etc.  Here's an article with quite a list of different ones.  I did already mention scrimba to you, so you can certainly use that as well. https://www.sitepoint.com/code-playgrounds/

[polaryeti]

4 hours ago, gizmola said:

Just a note: please don't use imgur links.  That site is a mess, and the forum allows you to attach and insert images into your posts.  I editted your question to do that.  It's better for everyone to have the content referenced here.  As I answered this in the bootstrap thread you made, I'm not going to repeat my comments but they are relevant.  These days, layouts are a lot easier to do using flexbox and/or grid.  

I would also suggest using an html/css/js sandbox for your prototyping/etc.  Here's an article with quite a list of different ones.  I did already mention scrimba to you, so you can certainly use that as well. https://www.sitepoint.com/code-playgrounds/

ok will avoid imgur links. I know concepts of grids and flexbox. I want to practice some real life grid, flexbox examples with solutions. Where can I find them?

[gizmola]

The courses I mentioned in the other reply cover design and include layouts with flexbox and grid.  

https://scrimba.com/learn/flexbox

https://scrimba.com/learn/cssgrid

 

You want to keep in mind that your goal is to end up proficient with making "responsive layouts" so you should be at some point absorbing some of the ideas involved in how to have a design that adapts to device viewport.  Of course you need to get down the basics first and then I think you can add in the elements that really make things responsive.  Responsiveness involves a judgement call on your part... what things should shrink or be hidden at smaller sizes.  When it's a mobile phone user, do you stack a menu or replace it entirely with a hamburger button?  You figure these things out based on your preference.  

I mentioned Kevin Powell recently.  Go through the free Scrimba course they have with him instructing.  If you particularly like his style, then you might want to look at his paid courses.  Some are free and some are paid either directly or through a Scrimba membership.  In my opinion the Scrimba membership gets you the most bang for your buck, but he has a course on flexbox you can enroll in directly:

See links to his various course at https://www.kevinpowell.co/courses/

Powell has this "free" course:  https://courses.kevinpowell.co/conquering-responsive-layouts

 

It is being done as a 21 day challenge, with new material being released day by day.  The course is just being released now, and only has the first few days of content, but it could be a really good place for you to start.

I personally like the idea of Scrimba for people learning as it gets you right to where you want to be within the courseware environment.  It also has a very active Discord community you should join if you go the Scrimb route.  You can also take the scrimba files and download them, fork your solutions etc, and they host all that for you.   But of course for your own projects you need a local environment and code editor, and he is likely presenting that material in a local environment using Visual Studio Code and the "Live Server" extension.  One nice thing about Visual Studio Code is that you can add the PHP Intelephense plugin and use it for your PHP development as well.  Most pro PHP developers are using the PHPStorm commercial editor, but VSCode is the choice of javascript developers at this point, so if you're doing a lot of both, then VSCode + Intelephense is a good alternative.

Powell's free responsive course has an early lesson on the environment and that might be helpful to you to see what he's using for his course.

[polaryeti]

thank you for your recommendations.