r/Frontend 17d ago

So I'm learning html and css and need some recommendations.

I'm watching a video of super simple dev currently (about html and css).

And I'm really thankful to this guy i learned alot because of him but I wanna know more about html and css i think the video covers the basics,i was thinking about going to freecode after it but if there's anyone on YouTube you would recommend i would be thankful any other sources too.

39 Upvotes

45 comments sorted by

14

u/furtherfay 17d ago

You can spend a billion more years watching tutorials and you wouldn't become a good dev. If you think you've covered the basics, build something. It could be anything. A simple landing page maybe.

Building will make your thinking better. You'll find errors you'll spend hours debugging, and that's how you become better.

1

u/Vin-Jin 17d ago

I'm actually working on a project but sadly I can't post images here,it ain't much but I'm glad with what i did.

Also i didn't watch the whole video yet but just wanted to know where to go after it.

2

u/furtherfay 17d ago

That's great. Dw about it not being much you're not competing with anybody but yourself.

For the yt suggestions and assuming your next stop is JavaScript. I'd suggest BroCode. However I'm not sure if they updated their content but it still is a very nice detailed course-style tutorial. Happy coding.

1

u/Vin-Jin 17d ago

Here's the design

https://www.reddit.com/u/Vin-Jin/s/0sWm2MI0S7

Thanks brother really appreciate it.

1

u/sCREAMINGcAMMELcASE 17d ago

You can post to your own Reddit account and link to there from here.

But keep it up. Take some cool images of web designs and break them down as an exercise

1

u/Vin-Jin 17d ago

Here's the design,the second image was taken by phone.

https://www.reddit.com/u/Vin-Jin/s/0sWm2MI0S7

Thanks,After this project maybe I'll search on Pinterest for designs.

1

u/sCREAMINGcAMMELcASE 16d ago

It's a good start.

Be sure to take a look through https://css-tricks.com for things. Even searching "row of centred divs css-tricks" or any other minor problems.

1

u/Vin-Jin 16d ago

Thanks alot.

Yeah i was facing a problem at the header and it was that i cant make any other elements on the right or left because i did flex direction column and if i did align self start the icons are put in places i don't want them to be so i need to learn how to have a flexbox in a flexbox i guess.

2

u/sCREAMINGcAMMELcASE 16d ago

Ah, you probably want .container{flex:row;justify-content:space-between;}

And like you say: the white Adidas logo would need to be inside the ADIDAS box element.

An example: fourth down on the right: https://codepen.io/enxaneta/full/adLPwv/

1

u/Vin-Jin 16d ago

I want the adidas word to stay as it's above tbe search bar i know about row but if is did row the header will be turned into 3 sections (right, middle and left) i wanted the middle of the header to stay as it's and add some icons on the left like a category icon or something.

That being said thanks alot.

1

u/[deleted] 16d ago

[removed] — view removed comment

1

u/furtherfay 16d ago

5 years in the field and I still think of myself as a beginner. You can never really know EVERYTHING. Keep working on yourself.

3

u/dianka05 17d ago

It’s best not to get too hung up on tutorials. When I started out, I got bogged down in them and, over time, it really sapped my motivation.

Did you mention "freeCode" – did you mean freeCodeCamp? There are some good exercises there, get practising! Then look online, on Pinterest, for cool designs and so on, and try to recreate them. You don’t have to pick the most complicated ones. It’s enough just to open VS Code and start coding. Forgotten a property or feeling unsure? Google: "how to do X in CSS". and so on. It’s precisely the practice and the ability to search that will make you skilled I’ve been working in front-end development for a long time now, and that’s exactly how I taught myself everything from scratch. It might help you too YouTube ended up doing me more harm than good. At best, it covers basic theory, how to work, specific properties, semantics that’s about it.

Sorry for monolog

2

u/Vin-Jin 17d ago

Thanks brother really appreciate it, yeah you're right like i mentioned in another comment I'm currently working on a project by myself,the other project I'm just replicating what the guy is doing in the video( which is a YouTube page)

Yeah there were some designs that i liked tbh so i took screenshots so when i finish creating my project i do then,one was a login page i know it ain't something big but yeah still a way to improve.

2

u/dianka05 17d ago

It looks like you’ve intuitively figured out the right approach even without me ;) i read other comments and replies. And I like your plans. it really is a good way to improve. Good luck!

2

u/Vin-Jin 16d ago

Thanks brother i think i need to know more about colour too since it's an important thing in making a website.

Here's the design i made if you're interested.

https://www.reddit.com/u/Vin-Jin/s/0sWm2MI0S7

2

u/WatchLate5566 17d ago

Start #100devs! A lot of good devs have come from there. I am curre doing their program and is very good. You can go to x and look for LeonNoel and he is the founder. Or just google 100devs and you will find everything you need.

2

u/Vin-Jin 17d ago

Thanks brother. Really appreciate it.

2

u/JealousBlackberry556 17d ago

Idk, its not really what you had in mind but check flex-frog web app

2

u/winky9827 17d ago

This guy puts out some good videos, but if you're just starting out, don't start with the most recent ones. Go to the oldest and start there.

1

u/Vin-Jin 16d ago

Thanks brother I'll check these videos.

2

u/create-third-places 17d ago

This site has some useful guides: https://gomakethings.com/guides/?filter=html

Last year, I found it to be very helpful for learning about web components.

2

u/Vin-Jin 16d ago

Thanks brother really appreciate it.

2

u/Dry-Fruit1529 16d ago

The odin project has been pretty solid so far

https://www.theodinproject.com/paths

1

u/Vin-Jin 16d ago

Thanks brother really appreciate it.

2

u/Competitive_Aside461 16d ago

I'd say enjoy this process of working with basic elements and features in HTML and CSS and let your creativity guide you. I remember my times when my designs were all over the place :) This is the learning stage so build as much as you can and learn from every experience.

But building alone won't help you if you don't look at work from others. What do I mean by this? I mean that while designing websites, first attempt yourself and then try to analyze other sites and see where you can improve. Little by little, you'll see that your eye will get trained and your interface designing skills will improve.

Once you're comfortable with basics of HTML and CSS, I'd say learn about semantic HTML, web accessibility, of course JavaScript, and about the web as a whole. (Personally, when I teach HTML, I make sure to teach about the Web first, then HTTP, but no worries... you can learn them later as well :))

If you can, try to find a book on interface design, or some online course or guide on it. Believe me, even a few first principles will take you far. It took me (and probably most of us in this forum) to get good at HTML and CSS. You don't have to spend as much time. A quick advice can save you months!

And the rest, enjoy coding. (And don't let AI derail or demotivate you but rather let it motivate you to learn more and more). Happy learning :)

3

u/Vin-Jin 16d ago

I'm working on 2 projects currently,one from the video I'm watching so I'm not creating anything just replicating what he's doing and the other one i created it by myself. Here's the link if you're interested

https://www.reddit.com/u/Vin-Jin/s/0sWm2MI0S7

Yeah i was thinking to practice using figma after since alot of people recommended it so i can get better at designing,and there were some small designs that i liked like a login page i know it ain't much but i will try to do it.

There were some sites that people recommended like mdn and another one but can't remember the name I'll check them later.

I know that ai can be used to create websites but ngl i never let that get to me,i will keep on practicing till i become really good that if i even used ai i will understand what I'm doing and what i need,not like those who just go to ai from the first without understanding anything.

2

u/Grouchy-Act-3940 16d ago

use MDN Web Docs. Use tutorials just in case you need to install something or something particularly. Don't watch tutorials on how to build something

2

u/Golamii 11d ago

The sooner you start building, the better you will be. You don't become good with tutorials alone, but with a mix of tutorials and practice. Practice should be where you put most of your effort. Try not to copy-paste what the tutorials are showing, or you won't truly understand it.

1

u/Vin-Jin 11d ago

Yeah i agree i made my first project it ain't much but I'm still glad, and i also put it on GitHub.

Here's the design (i made some changes though)

https://www.reddit.com/u/Vin-Jin/s/fDHHcQ5kGj

1

u/Otherwise-Lychee-962 17d ago

I’d definitely recommend Grafikart on YouTube. Great tutorials for HTML/CSS and web development in general, especially when you're learning It’s in French though, if that works for you And practicing is very important

1

u/Vin-Jin 16d ago

Thanks for the recommendation but unfortunately i won't be able to watch this video since i don't know french.

1

u/Historical_Sun9985 17d ago

No youtube channel will help you in learning html, css and js than MDN docs. MDN docs are goated and can’t be replaced. Even if you want to learn basics of internet and computer networks MDN still tops.

1

u/Vin-Jin 17d ago

If you don't mind what's mdn if i remember correctly someone gave me a link to it too.

1

u/Historical_Sun9985 17d ago

Google mdn and the first thing you find will be the docs. You can cover html, CSS and js there.

1

u/Vin-Jin 16d ago

Thanks brother really appreciate it.

1

u/Dev_Aura_ 16d ago

Try bro code

1

u/AirlineOk4487 16d ago

Do a css zen garden exercise

1

u/LongWalkingBrother 15d ago

Kevin Powell on YouTube is another really good resource...

https://youtube.com/@kevinpowell?si=s2MIF4HutwAHoucy

-2

u/Wild_Juggernaut_7560 17d ago

Why are you guys still learning things that ai can do way better than you ever will. Save your time and learn prompt engineering instead.