Hacker News new | past | comments | ask | show | jobs | submit login
Finished basics of HTML,CSS want to create a static website
2 points by shivajikobardan 76 days ago | hide | past | favorite | 8 comments
https://demo.w3layouts.com/demos_new/template_demo/28-07-2021/biodata-liberty-demo_Free/2002651968/web/index.html

Teacher says that we(students) should be able to build this kind of websites now.(static only). But I'm not able to do so(i've not tried tbf, but IDK how to try because IDK how this site is being made) . can you give me some tips to cross this phase?




Hmmm. Let's start with some basics. Let's say you have windows and chrome. On your windows desktop, right click then New > Text Document. Open it in notepad. Type this <html> <body> hello world </body> </html>

Then save it. Right click on it, change the end of the name from .txt to .html

There you go, a static web site. Double click on it, and it will open in Chrome. When you want add more html and css, right click on it, and open with > notepad.


Open up developer tools and look at the page source and... Make it?

Talk to your teacher. These all sound like things you should be bringing up with your teacher because your teacher is supposed to be teaching you.


what should I talk to my teacher? He has taught the basics and most likely some students will be making this site by now...


Take a look at Jekyll [1], a widely used static site generator.

[1]: https://jekyllrb.com


I want to learn it by coding it.


Can you be more specific? What have you been taught so far? What are you unclear about?


grids, flexbox, basic css properties text properties, color properties, background properties, media query, how to make dropdown, how to make navigation etc. I can make those stuffs but not a complete website. It confuses me what to do. Tutorials are teaching things weirdly. IDK when to use what probably.


Do you understand the basic idea of a page being composed out of divs? Grids inside flex inside blocks and so forth? If so, you can look at the example template and think about how to create each section, one part at a time.

How do I make this header? This avatar image? This description? Okay, how do I put three of them together side by side?

Experiment with different div types until you get the rough layout of that section working, using placeholder text and images. Then tweak the whitespace and such until it actually looks right.

If you need a hint, use the chrome inspector to look at the source code of your example.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: