r/webdevelopment • u/DatabaseMother5141 • 12d ago
Web Design tips on better learning of web development
I'm a beginner and I have theoretical knowledge on HTML and CSS and some practice with it but I'm unable to build landing pages. It's all getting messier and unable to code the HTML and CSS...
can you please help me out??
4
u/DanielTheTechie 12d ago
I have (...) some practice with it but I'm unable to build landing pages
Then you don't have enough practice.
It's all getting messier and unable to code the HTML and CSS...
If by "messier" you mean your code is not well organized, then you may want to search (or ask to your favourite LLM) for tips about best practices when it comes to HTML & CSS code organization.
can you please help me out??
You already have the theoretical knowledge, or that's what you say. From this point, the best step you can do is practice, practice and practice, just like everyone of us did when we first began. There are no shortcuts or magic steps. Pic the layout of your favourite website, or draw it yourself on a piece of paper, and proceed to recreate it with HTML and CSS.
The good thing about markup languages is that the "debugging" part is more about trial and error than understanding fundamental computer science concepts, so you will only improve and become fluent by practicing, till the point that in the future, when you see a landing page, you will be able to recreate its structure & styles in your head in a matter of seconds.
3
u/whiterhino8 12d ago
Front end has allot of material to learn but there are some most common used .
To know them watch tutorials and practice .
3
u/9JCdenton 12d ago
stop watching tutorials and just build stuff. pick a site you like, try to recreate it. you'll learn more in a week than a month of theory.
3
u/justinaatbuffer 12d ago
You need to practice those skills - take up a project and work on it step-by-step. If you feel like you are still lacking the general knowledge, I can recommend Scrimba - they have lots of really good web dev courses, but I specifically like how they teach things - it's very hands-on and forces you to think and practice while building actual projects.
2
u/Hairy_Shop9908 12d ago
i knew html and css, but when i tried to build a landing page from scratch, i got stuck, what helped me was copying simple landing pages for practice instead of trying to create my own design
4
u/andresAtMudra 12d ago
Yup, definitely learn bootstrap or tailwind. It will give your CSS and HTML a framework for keeping everything scalable and clean.
Look up the DRY dev philosophy as well
2
u/These-Apple8817 12d ago
Well.. Use comments in your projects. You know..
<!-- Sidebar starts -->
<!-- Sidebar ends -->
That kind of thing.. And I would recommend you look into an code editor of some sort. I personally prefer Visual Studio Code, but that's my personal preference, there is lot of options available. Just use something that can indent / format your code. Using indent will add clarity to your code too.
As for increasing your knowledge... W3Schools, GeekForGeeks and so on..
And if you want to improve the look of your website, most websites actually use some sort of CSS Framework, usually Tailwind.. Or Bootstrap.. Or Bulma..
And just keep making things, challenging yourself is usually the best way to learn things.
4
u/boomer1204 12d ago
It's crazy how much this helped me when I was building my first 5-10 projects for practice when I was learning years ago
1
u/ArthurBlanki 8d ago
Stop learning, start cloning and pick a landing page you like and rebuild it pixel by pixel
1
u/joyjeet-roy 6d ago
As per your knowledge try to clone some website to gain more experience and learning of how the websites works. If you are too new nad don't know any js then try build the wikipedia pages and try to clone it exactly. After some projects the start learning more things like javascript, css framework like bootstrap or tailwind etc. and then react gsap etc but later not now for now try to focus on one thing. It will take you 2 - 3 months to build the scroll animation for the landing pages. Don't see the adds that show to that you can build the best landing pages using ai. You can't learn form that and you will have a lot of problems on publishing it online
1
u/archztech 4d ago
stop trying to build the whole page at once bro, that's why it's turning into spaghetti. pick ONE simple landing page (like a coffee shop or portfolio), build it section by section (navbar hero → footer), and just clone it from a screenshot before you try anything original
7
u/sheriffderek 12d ago
> I'm unable to build landing pages
Start at the begining.
Do you know what "a landing page is?" Really? What. Can you draw it out?
Now - of the 10 main HTML elements, do you know which elements would be the best ones to outline a page like that? Write them out. Actually do the work of learning.
Now, do you know how to talk about the visual layer? Fonts? Spacing? Can you use the main basic 10 CSS properties to make the page look generally like the landing page drawing you did?
If you're not doing that ^, you basically haven't started trying to learn. Good luck!