HTML-CSS Exercises

HTML-CSS Exercises


So I recently decided I’m going to learn to code with the aim of quitting my 9-5 and becoming a full time remote web developer (or similar).

Anyway I was working through the HTML and CSS introductory exercises today. There is a lot to take in and I was wondering if there are any practice exercises that I can work on? You know, like something where it shows me a page I need to create using the things I learnt and I have to try create it with no help other than being able to look back at the notes. I think this is the best way to get stuff to stick in my head. I have gone through everything in those first two sections and understood it, but if I don’t put it to use I know I will just forget it all.

Thanks in advance.


Just start at the beginning of the curriculum with Introduction to Basic HTML & HTML5 and Responsive Web Design Certification and at the end, you will be given projects to complete which you will use what you have learned plus other learnings which will come from doing research research outside of FCC.


if you don’t like waiting till the end to try projects, (and I totally understand that feeling), you can always jump ahead to the projects and give them a try with what you know so far…


After you have been through these example and excercises in the comment above (from randeldawson) think of a simple website (you can first sketch it on a piece of paper) and try to make it, googling every step where you don’t know what to do. After a couple of such websites you will have learned much.


Yea I was thinking of doing that


I’ve completed the tribute page and moved onto the survey exercise.

I notice the way the form is formatted with labels and inputs divided down a centre line and labels aligned to right, inputs to the left.

I’m thinking there are many ways to do this. My first thought was to style all labels to float left and all inputs to float right but then i noticed they weren’t lined up correct. Rather than messing with paddings, margins etc to align them, can anyone give me a better way of doing this?


CSS grid for 2 dimensional layout (eg the overall page), combined with CSS flex for 1 dimensional layout (eg nav menus within the page). Float layouts/inline-block layouts/table layouts are all kinda hacks from when grid/flex didn’t exist.

FCC has a large section on those two, and there are hella amounts of resources available for reference and practice. Would :100:% recommend learning them because they’ll make your life very much easier


Cheers. Wish I read this earlier. I went for the inline-block method. I did go through the grid and flex tutorials, but it was after a long day, i don’t think much of it sunk in.! I will try again, this time using grid techniques!


:slightly_smiling_face: it does take quite a while for it all to click, especially the grid syntax, but definitely worth it - once it does click, a lot of things relating to layout become really easy


I have use to practice when I learned HTML/CSS, most of those projects are small so maybe easy for beginner to pick up.