Jump to content

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


polaryeti
 Share

Recommended Posts


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.

 sample1.png

But I am stuck here.

sample2.png

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.
 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.