How should I learn CSS within... 10 days?

Question

I have an Inter-school competition where I need to make 6 webpages including the home page (within 2 hours using HTML and CSS) using our creativity and our designing skills.

If you see my profile, you'll see Java programs only. It's because I find CSS overwhelming and without that, I don't feel the same kick making a webpage (because I really like design). The box model is pretty easy, but keeping the properties in mind are not.

I tried to start from MyAnimeList. I already had had an account and I have my anime watchlist pretty much beautifully sorted there. The thing is, we can insert our own CSS code there to make it look dope. Eventually, I started tweaking using the Inspect element on MS Edge. I'm still doing that.
There are two problems: Firstly, I insert the selectors in the wrong manner. Secondly, I heard that making layouts from scratch is like using binary to code stuff, I need to depend on the pre-made layouts made by kind strangers (I hate this option).

Any tips?

Answer 1

It's impossible to memorize the complete CSS specification, nobody does that. With a lot of practice you can learn the most common idioms and design patterns, and learn where you can lookup the more rarely used ones if you need to.

If you are allowed to use frameworks on that competition, maybe you can take a look at Tailwind and see if it makes your design process any easier.

https://tailwindcss.com/

If this is not an option, then learn about grid and flexbox, they are commonly used and help in optimizing the layouts of complex web pages with minimal code.

Answer 2

GiantJupiter good luck tomorrow, I'm sure you guys will be awesome 😊
Great effort with getting up to speed on CSS! Obviously there is a limit to human comprehension, but if you keep working on your skills, eventually you'll become a true master.

Answer 3

Tibor Santa Thank you very much😄
This is not the end of me, now that I have a comparatively solid base on HTML and CSS, I'll start making webpages on Sololearn

Answer 4

Congratulations 🎉
It's the beginning of a great journey.

I am currently also participating in a tech competition by the way, it's a yearly national event with some quiz questions to solve over the course of several weeks. This is the last week now :) and for some questions you have to write programs and design efficient algorithms in a very short time.
So I know the pressure and the stress of such an event very well. If you made it this far, you've done a great job.

Answer 5

It depends on you how fast you can learn but I suggest you this website and this is best website for my way, I hope it's helpful for you.

https://www.w3schools.com/css/

Answer 6

You could try finding a css crashcourse video on YouTube

I'd personally recommend you follow Traversy Media or Thenetninja.
Both really offer amazing tutorials.

Answer 7

Sakshi Ok, I'll surely check it out. I've used this website many times before for various purposes, I guess it will help me out.😃

Answer 8

Tibor Santa Well, I think only Vanilla CSS is allowed there. I don't wanna take any risks, however, I'll surely learn it one day.

I've heard about grid and flexbox a bit before, now I'll surely learn it😀

Answer 9

I might also suggest freecodecamp

Answer 10

I strongly suggest sololearn their lessons are bit by bit and easy to understand

Answer 11

Tibor Santa Sakshi Anthony Kwesi Saah Graeme Adamson Oliver Pasaribu The root access denied Udochukwu Stanley Orabueze
Tomorrow's the big day. I've made a website. I guess I can't make responsive layouts except making the "flex-wrap:wrap;". I have tried to learn CSS using a crash course from freecodecamp (https://youtu.be/1Rs2ND1ryYc).
There were small errors in explaining the concepts, but I did it in front of my computer screen (particularly in selectors), so everything was clear.

After that, I learnt flexbox very beautifully, but Grid did not fit into my brain.grid().

I only watched it till floats and wrote everything using pen and paper everytime I saw a new feature in CSS.

It took me 6-7 days, I couldn't learn Transitions and animations.

But I stylized the webpage which we are going to make tomorrow. I am teamed with another classmate who has learnt HTML. Her simplistic layout of the webpage impressed me and I designed the series of 4 webpages using a single style.css

Answer 12

There are some things which I have learnt from outside, for example, Newton's color wheel and hsl(), rem and em, etc.

Answer 13

https://code.sololearn.com/WCIPwAtFOXHn/?ref=app Tibor Santa Sakshi Graeme Adamson The root access denied Udochukwu Stanley Orabueze Anthony Kwesi Saah

Answer 14

Tibor Santa Thanks bro😀

Answer 15

Tibor Santa and others, let me start the message with a quote.
“If you waste time fiddling around with a ‘new humanity’ and ‘evolution,’ you’ll never make it. Human strength lies in the ability to change yourself.”
-Saitama

This quote was always in the unconscious mind, guiding me, not because of winning or losing, but because I believe that this is how humans work actually. We can do anything.

This's my final message on this thread (or atleast the one where I ping anyone in this thread.)

We became the Second Runner-Up (#3) on the competition. A big thanks to everyone who has tried to help us, including the Soloearners who have replied or upvoted this thread.

Answer 16

GiantJupiter good luck with the competition, maybe you could share your creations with us afterwards, I am thrilled to see. ;)

Answer 17

For CSS styling refer to msword Heading, while image filtering, it is not far from digital image processing.

Answer 18

Within 10 days you'll have memorized but you won't have learnt. Learning involves getting involved and to some extent enjoying.
But you can give it a try. Actually CSS is just an adverbial description to YOUR html. Like do you want to change font , then go on and "font-weight/font-family".