Still a lot of trial and error after 6 months, what am I missing?
Hi guys,Although i've been doing css for a while now i still struggle to get things right in the first place like.. there's still a lot of back and forth after all this time. which makes me question if i know what am i doing? Is there a method or structure i should be following that i don't know of or does it really takes a long time to get there? Thanks in advance.
6 Replies
Have you structured a learning path for yourself or are you taking courses or just clicking around when videos/articles sound interesting? It could be very easy to jump around aimlessly and learning things without knowing the basics. I would recommend trying some of the beginner courses and make sure you have a solid foundation of html/css to build upon.
You can learn the properties but if you don’t know the fundamentals eg the box model, stacking contexts, the cascade and specificity etc things will be more difficult.
That said there is nothing wrong with trial and error with properties you’re not familiar with, reading the docs and playing around with the values. However so much of css depends on what else you’ve done in your stylesheet that you need to understand what you’ve done and how that effects what you do next.
Do you learn better with videos or reading ? If reading -> - MDN-HTML - MDN-CSS or google around and find courses/tutorials through a platform you enjoy using. There are tons like Tutorials Point KPows Scrimba HTML/CSS Crash Courseor a more in-depth Scrimba Learn HTML CSS Course One very crucial part of all of this is making sure you’re coding along with the tutorials in whatever form you choose. You could consume all three tutorials but if you aren’t getting your fingers on the keys and practicing the concepts , it would take two times longer to learn. That’s why I enjoy scrimba as it’s very convenient to have the code editor built in. Also practicing on your own. FrontEnd Mentor and iCodeThis gives you projects to complete and has helped me improve just by giving me something to complete every day
Do you learn better with videos or reading ? If reading -> - MDN-HTML - MDN-CSS or google around and find courses/tutorials through a platform you enjoy using. There are tons like Tutorials Point KPows Scrimba HTML/CSS Crash Courseor a more in-depth Scrimba Learn HTML CSS Course One very crucial part of all of this is making sure you’re coding along with the tutorials in whatever form you choose. You could consume all three tutorials but if you aren’t getting your fingers on the keys and practicing the concepts , it would take two times longer to learn. That’s why I enjoy scrimba as it’s very convenient to have the code editor built in. Also practicing on your own. FrontEnd Mentor and iCodeThis gives you projects to complete and has helped me improve just by giving me something to complete every day
MDN Web Docs
Introduction to HTML - Learn web development | MDN
At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as i...
MDN Web Docs
Learn to style HTML using CSS - Learn web development | MDN
Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animatio...
HTML5 Tutorial
HTML5 Tutorial - HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice.
Scrimba
HTML and CSS course: Learn HTML and CSS for free
This course will teach you HTML and CSS through building and deploying five awesome projects. It is also fully interactive, with over 75 coding challenges. There are no prerequisites, so it is suitable for absolute beginners.
By a lot of back and forth do you mean writing a css property, saving, then opening your browser to see how it looks? I do that constantly when writing css and I've been using it for 4 years now
Or just going to the docs constantly? Also perfectly normal
It's all just practice and yes it really does take that long. I feel like I've barely scratched the surface
I like the method/approach Kevin is using for a project, from design to code. Check out these two videos. The second one goes deeper into structuring the css.
https://www.youtube.com/watch?v=kmFr_8U81vU
Kevin Powell
YouTube
A simple approach to layouts when going from design to code
When we have a static design file, whether that’s a Figma design or a .jpg file, often the hardest part is breaking down and figuring out how the layout is going to work. In this video, I take a look at how you can break down a layout into it’s pieces to help make the process a lot easier.
🔗 Links
✅ The Frontend Mentor Project: https://www.fron...
Kevin Powell
YouTube
Responsive layout practice for beginners
The project I’m working on in this video 👉https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK
🔗 Links
✅ Frontend Mentor Project from this video: https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK
✅ VS Code Live Server extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.Live...
Thanks clevermissfox, I definetly go over my fundamentals again and see what i am missing. and the scrimba link looks great I will give it a try.
thanks that gives me a little hope
this is great!! one of my main issue was the layouts, i was constantly making div after div and was going crazy. this hits the nail. thanks a lot.
Scrimba and iCodeThis have both been vital in my improvement. The convenience of not having to go back and forth from vscode to browser while you are learning/practiicing really is amazing. Scrimba you can even add files and dependancies and they can compile many more languages than something like codepen, you can record from it, fork it , clone it, download it. Its really helpful for sharing code too as people can see your code, interact iwth it in the mini-browser, fork it, its brilliant. They are about to launch a new version i think, i believe its in beta currently but its all thanks to KPow that i even found it while looking for his courses. Speaking of, his free course Conquering Responsive Layouts is also worth a look if youre struggling in that area
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!