Improve, ok, but how?

Hello to everyone.

On the advice of an old post in this forum I tryed to replicate this template http://www.os-templates.com/free-website-templates/gogopo .
I wrote almost 400 lines of code between HTML and CSS, so I try my resposive layout and it was so bad, so I took a look to at original file and it’s much more complex then mine.
I’m studying web programming for about 2 months, alternating between intensive periods and some downtime. I made the intermediate projects for the front-end certificate but I want learn how to organize a page (front-end for now), from <!DOCUMENT html> to </html>.
My question is: what can I do? Where I can improve my skills? Do I have to take a famous site and inspect it every day? How did you improve this aspect?

As a experienced .net back-end developer, I decided that was time for learning about front-end development, so I’m thrilling this path myself for the past 3 months.

I watched some online courses about html, css, JavaScript, jQuery and bootstrap. (Most of them at udemy)
Every major course section has a project or something like that. First I try to do it myself, no matter how horrible my Code turns, after that I observe how the instructor develop the solution, than I try to develop it again from scratch, learning from my mistakes.

Sometimes it can be frustrating, because you feel you are developing your skills too slow. But think in the long term… maybe a year from now you’ll be remember of today with a smile on your face.

The secret is not to give up.

3 Likes

You tried your best and you failed miserably. That’s actually a good thing and hopefully it won’t be the last time. The next step is to identify your weaknesses, and it looks like you’ve done that, too. Now you must work on them.

Just keep alternating between learning and doing. Instead of trying to reproduce something else, learn the tools deeply enough to know that you can reproduce something else. In other words, learn how to cook, not how to follow a recipe.

Even if you’ve already studied HTML and CSS, it’s often a good idea to learn things from different angles. Try these if you haven’t already:



2 Likes

When I first started, back in 1999, I often viewed the source code of sites. In the early 2000 era, personal hand-coded blogs were very popular. Taking the code from various sites and playing around with it offline was part of what made me a better web developer.

6 Likes

@stefalber I find this screen cast helpful from time to time when I’m thinking about HTML markup and creating a page from scratch: https://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/.

1 Like

Thank you all for the answers. I will deepen each reference and follow the various suggestions. I ask another thing, for a project like that I have to use some framework?

I wouldn’t bother too much looking at the source code of a famous site. Most of these sites use generated content and are a whole lot more complex than just a website a single person might code. You have to remember that a lot of these sites have teams of people working on them and they implement several different libraries.

What you need to learn is a grid system. This is a way to organize elements on a page in such a way that they are responsive.

@frafful

When do you start to use Bootstrap?

After doing some simple websites, like Google.com, using only HTML and CSS.
Once you feel that you get the basics, and understand the structure of CSS, you can go on to Bootstrap.

1 Like