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

[shivajikobardan]

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 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.

[shivajikobardan]

This is the site I'm trying to create.

This is where I'm stuck.

 

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?
 

[Light-Yagami]

I'll tell you my experience learning Blender. When you're a complete beginner, you may have original ideas but can't execute them because you don't have the knowledge required. So you follow tutorials that expand your understanding of the software/whatever else until you're able to independently create something. That's how it starts. Small steps. 

 

I followed loong tutorials for absolute beginners and made notes, over and over.. It takes hours, days, weeks.. But now, I'm able to create almost any geometry on my own.

 

What I'm trying to say is - it's okay to shadow other people until you're competent enough to branch out on your own. (and I'm not saying that you're not - it's just how I feel about it)

[mariushm]

Without the source code there's not much we can do. 

 

But I can tell you that things like "missing a space after contact" can usually be solved by applying some css rule. 

 

and ... don't be afraid to use divs ..  ex  

 

div  (whole page ) 

   div  (blue bar )  

       - content - 

   end div (blue bar)  

 

   div  (top bar with home , about etc)  

       - content - 

   end div (top bar) 

 

  div actual content , the picture, text  

  end div actual content 

 

  div footer  

  end div footer

 

end div (whole page) 

 

stuff like this.. 

 

 

The 5 links (home, about, service etc) can be a div with float:right css rule, within the div for the white bar , and they can be  list elements in a list, and then you use css ex. list-style attribute to remove the bullet points, you can set the list elements as inline instead of block to have them all in a line, you can set min-width and height to get all use same width etc etc ... remove link underline, set colors when mouse is hovering over the text etc etc 

 

ps.  Just checked that youtube video you linked ... jumped from place to place.  I can tell you right away that one thing he does wrong in the video is that he uses px  everywhere ex when configuring font sizes which is not that cool. 

I guess it's fine if you need pixel perfect heights or something like that, or if you use specific fonts, but generally it's not ok as it can mess layouts if user chooses to zoom the page 

see https://blog.hubspot.com/website/css-font-size and https://www.w3.org/Style/Examples/007/units.en.htm and https://www.udacity.com/blog/2021/05/getting-started-with-setting-html-font-size.html