4 ms·

Finished basics of HTML,CSS want to create a static website

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?

navjack27 4y ago
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.
- shivajikobardan 4y ago
  what should I talk to my teacher? He has taught the basics and most likely some students will be making this site by now...
alwillis 4y ago
Take a look at Jekyll [1], a widely used static site generator. [1]: https://jekyllrb.com https://jekyllrb.com
- shivajikobardan 4y ago
  I want to learn it by coding it.
BMc2020 4y ago
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.
solardev 4y ago
Can you be more specific? What have you been taught so far? What are you unclear about?
- shivajikobardan 4y ago
  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.
  - solardev 4y ago
    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.

navjack27 4y ago

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.

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

alwillis 4y ago

Take a look at Jekyll [1], a widely used static site generator. [1]: https://jekyllrb.com https://jekyllrb.com

shivajikobardan 4y ago
I want to learn it by coding it.

BMc2020 4y ago

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.

solardev 4y ago

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

shivajikobardan 4y ago
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.
- solardev 4y ago
  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.