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

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.

When I watch a tutorial video, I know everything they’re 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.

https://imgur.com/a/Vd1Fg5m

But I am stuck here.

https://imgur.com/a/5ZeygkU

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.

This is a very common problem learners run into, so it is a great question to ask! :grinning:

Have you found any tutorials or videos that teach in a way that you like?

Urggghhhh, pet peeve triggered…html and css are NOT programing!!!
Ok, now ive whinged I guess I have to say something constructive but Im appalling at CSS, does my head in (thank god for flexbox), so heres some thoughts.

They’re building websites with their own thought process and I have a different thought process.

And how is your thought process going for you? You may know the rules of html and css but you havent learnt how to play effectively yet and the people your not willing to listen to have. How you approach a problem and what tools are good for what job is what you are ignoring and may need to learn. I know it can be ■■■■ boring but going through those tutorials can help you to learn how to approach problems in different ways. There are MANY different ways to layout a page

Years and years of practice (JS) and Im still crap! But then I have bad memory and other problems. One month is nothing, but its an awesome start and it sounds like your putting effort in…heck, you even read a book on it, Ive never read a book on JS in my whole life :stuck_out_tongue_winking_eye: . If your ready to quit now then your right its prolly not for you, but if you really want it then just stick at it and it WILL eventually come to you. And yeah I faced it. Due to my learning/memory problems it never came easy to me. I had to keep looking up the structure of a for loop for a year before I could remember the order of declaration, comparison, iteration. But I LOVE it so much I just never stopped.
Get on Twitter and find the html/css experts and ask them. Theres an awesome community of creators out there and many have helped me over the years. Just dont nag, show work and keep on creating. When you ask questions like this seeing your work (code) will help people know what you used to create what you have and give them an idea what your doing wrong, where to go next and what other options you may of had. Plus they dont have to create test cases, Im a lot more inclined to help if I can just tweak what someone has done already and not have to create something new. Put your work on somewhere like Codepen, Codepen has an awesome community in its self. Dont delete your question posts on Codepen, it shows that your putting in an effort…Im happy to help anyone thats helping themselves and ignore all other people (been used like a tool to many times). Theres another place thats awesome for html/css and not JS but I cant remember what its called, its all about design and html/css.
When you see something you want to try to copy, look at their code, get an idea for how they did it, then go to bed and the next day try to recreate it. I wouldnt start blind just yet, you have too much to learn still.
Dont give up mate, making stuff is awesome. Seeing the end product and overcoming all your problems is so ■■■■ satisfying.

hehe, really, ■■■■ gets censored? Okey dokey :stuck_out_tongue_winking_eye:

I’ve not found anyone who teaches like I want/like yet. I learn mostly by doing, getting confused and seeking answers if there are no good teachers teaching. If I can get a good video lecture, I learn fast as well.

Learning by doing is the best way now that you have the basics figured out. If you get stuck, asking here like you are already doing is great :grinning:

I don’t have many HTML and CSS only examples yet, but this work-in-progress section has some beginner JS content: Coding Exercises

If I’ve to share code with assets, how do I share it? For eg: code with images on my hard drive…

Images will be tricky, but you can share your code on a site like codepen.io :grinning:

For your local images, swap them out with free ones from sites like unsplash.com.

Some other options are…
Pay for a shared hosting site. They can be really cheap and even cheaper if you pay for a year up front. Just be aware that some dont allow cross linking of resources but a lot do. Ive used this option in the past (like 10 plus years ago).
Pay for a vps. Can also be real cheap and great fun if your into that kinda nerdy stuff. LowEndBox is a great place to find them. Some can be quite scammy tho, read through the comments and ask around. Theyre not all shonky tho, I had one for a few years that only cost me 12US a year, wish I could remember who it was with.
AWS can give you one year of a free trial. At least you could put off worrying about it for a year.
And the main way is to just put all your images in the source code as base64. Codepen allows for up to 1meg of source files on the free tier. Base64 will increase the file size of the image by one 3rd, but you can always reencode the file as webp to decrease size and you can also decrease the image dimensions and the browser can just resize it to what ever. One thing, if your using an IMG tag in your html and you dont want to put the base64 in there coz its ugly and long, you cant put it in the css using “content”, a lot of people dont seem to realize you can do that. Heres an example… JS Bin - Collaborative JavaScript Debugging

EDIT: Oh, and one cheat that I thought of but never got around to checking if it works, but should, is you can reference css files of another pen if you click on the settings clog for css. So if its 1meg per pen you could create a pen just to store the big image and reference it in another pen.

EDITEDIT: Just updated the example to show how you can use a css variable for the base64 data if you want to use the image in multiple elements without adding extra classes to the element.

EDITEDITEDIT: Fixed the url to the example, oops :stuck_out_tongue_winking_eye:

1 Like

For images, it may also be pretty cost effective to use a cloud provider like AWS S3 as a remote image server.

thanks for the information. imgur and imgbb might be alright as well?

I looked at an S3 once and couldnt figure out how to just upload an image and get a direct link to the image without using JS? I wouldnt be surprised if you can, I just didnt find it and went with a vps coz it was fun. I just had another EXTREMELY quick look and same thing. And its a shame because it is VERY cheap as long as your image doesnt go viral and you didnt set a spend limit.

But I did find another service I havent heard of before that seems to have an extremely generaous free tier, which is good coz you wouldnt want to have to use the paying one, cheapest was 89 a month. But the free tier has 25 credits a month, with each credit either being 1gig of storage a month or 1gig of transfer or one for their awesome services (you can resize/woteva through a url to the image). So 1gig of storage and 24 transfer or 3gig storage and 22 transfer, etc. The ONLY thing I found lacking was not being able to restrict the domains that could access the file, but not the biggest problem (just means other people could link to your file and use your limit, but lots of services have that prob). If anyone knows anything bad about this service please say, might start using it myself.

You can use a few image hosting sites but they typically dont actually let you in the terms of service and I try not to abuse free services. I know for sure you can use flikr still, but Im pretty sure its against the TOS to use it without the full embed.

Cloudinary ftw! :baseball:

1 Like

Cloudflare Pages has a good free tier (for static content) and is the worlds largest CDN (90% global internet users > 100ms)

You can also now add workers (cloud functions) onto routes to add anything dynamic you would want…

For apps (chat app style) you should look at Firebase…

I’m still waiting for @kirupa bossman to do a Firebase tutorial … :stuck_out_tongue_winking_eye:

1 Like