I suck at HTML and CSS

What are great ways to go from being a beginner to the advance level of html and css

Practice. Read. Practice. Repeat.

2 Likes

Learn how to create basic layouts. Learn to use a grid with Bootstrap or CSS, and learn flexbox. Once you are able to center most items and arrange the page how you want, you got the hardest part down. From there, look at other websites’ code and see how they do certain things and possibly try to copy some of their ideas.

1 Like

Learn by doing is the best way. Copy someones code and edit it as you like. Do what ever you like to do with your code. Even doing error in your code also the way of learn things. SO keep going and do enjoy your coding everyday. Happy coding :nerd_face:

1 Like

Check others’ page source and practice again and again.

Draw cartoons in css 30 days long.

Okay, I got some free time… my expanded answer: :slight_smile:

Become very familiar with the Google Chrome Developer Tools. Really, this should be your best friend as you’re learning/using CSS layout. Using this tool, you can make temporary CSS changes and see the effect/changes immediately on your browser page. Then you’ll be able to learn quickly what the different CSS properties does, and it’s relationship/effect with others.

Designing a page layout in Photoshop, and then converting that layout to a working HTML/CSS is a very valuable exercise too – then making that single-width, static photoshop design become responsive is the next challenge. — then making sure that your code works in various screen/devices is the next challenge.

Given a layout (let me use what I’m currently working right now), you can use Developer Tools to go over your HTML code, and highlight the div/section you’re interested in.

Take note of the blue, green and orange shaded areas…

That’s html/code you’ve currently selected.

You can make quick HTML edits here, adding classes, inline style, etc… and see it’s effect.

On the right pane, you can see the CSS rules that are in effect. Learn to read this column. Some of the CSS properties you’ll see have an “overstrike text”, meaning another CSS property is overriding it.

You can create CSS styles on the fly from within the Developer tools. This is useful if you want to play “what if” or experiment, or try out different values/things. I use the .cls and + often. (See upper right)

and if you look at the Computed properties, these are the “rules” in effect for that selected div.

The colors on the above box matches the shaded colors on your browser preview.

TIP: Learn how to use SCSS or LESS. It makes grouping and writing CSS code less verbose and organizes it clearly.

This is my CSS markup for the above layout.

And make sure to test your code on different screen widths, devices, etc.

I’m using a software called CodeKit so if I make a CSS change in my .LESS source files, Codekit compiles it to CSS, adds all the necessary web browser auto-prefixes, generates a source map, adds IE checking, compiles and minify it… then it upgdates the browser view on all my devices so I can see the changes immediately without hitting Refresh on all devices.

Hope this gives you some tips.

But really, it all boils down to practice, practice and practice and making lots of ugly websites at first.

5 Likes

That is a lot of devices…

2 Likes

Just (5) devices to cover iOS, Android and Windows mobile.
From L-R: iPhone, Win8 (ARM), Android phone, Android Tablet (Kindle), and iPad Air

I used to have an iPod and Nook Tablet. The iPod broke, and the Nook Tablet is totally useless for modern websites. The Nook, Win8 and Android phone were bought used on eBay for not much money. The Kindle was on Amazon sale. It’s not a big $$$ investment.

I develop all my client’s website properties so it never hurts to be prepared when annual Analytics report:
4+ Million Users
11.2 Million Pageviews
5.6 Million Sessions.

Distributed across:

Desktop: 50.8%

Mobile: 39.3%
Tablet: 9.8%

So for me, testing on mobile/tablet is a must… 50% of their traffic comes from these devices!
(Resizing browser window to mimic an actual device has it’s limitation and is not perfect rendering.)

YMMV…

3 Likes

And if you don’t have all the actual devices you can simulate them with chrome devtools Device Mode.

Or if you have your site hosted somewhere you can test it on a site like https://sizzy.co/

Simulating the device isn’t as good/accurate but still a tool worth using.

2 Likes

Frontend Masters, a website that hosts live workshops about everything related to frontend development uploads all their workshops into their website as courses. They have very good in-depth courses about frontend technologies. They also sponsor a free ebook called frontend handbook 2018 that list learning resources about frontend languages, frameworks, libraries, tooling, architecture and style guides :slight_smile:

Do fcc tasks. :confused: