Build a landing page from scratch and put into Github (portfolio)

1

Hi coders,

I’d like to create different landing pages to put on Github.
I ask what are the main requirements for making a landing page from scratch?
I know you need to know HTML and CSS,but I don’t know what are the steps to do it.
Thanks to help me,
CamCode
P.S.
If you do not understand my request I will try to answer more precisely.

2

That is a very open-ended question. The only main requirement I can think of is that it should “work”.

You will have to be more specific about what it is you are looking to get answered here.

3

Hi, @lasjorg,
I would like to create a landing page such as the one from Airbnb, but I don’t know exactly how to structure it, that is what the components to put are. I would also like to do it with Angular or Bootstrap to learn (I never used them but I would like to use them).
I have some confused ideas about what to do :pensive: .
I hope I was clearer now :grinning:.
Thanks,
CamCode

4

I really don’t think I can give any good advice without having something more to go on. Show me something you have now and I can give you some feedback.

It sounds more like “Writer’s block”. You just have to start coding. You won’t ever have it all in your head in some perfect state before you start. You will re-factor code along the way, re-structure the HTML, renaming classes, doing some CSS one way and then changing it later. It is an iterative process and the most important step in that process is just starting (showing up is half the battle).

Angular and Bootstrap are two completely different things. Bootstrap is a CSS framework that lets you write less CSS and maintain some visual consistency. Angular is a full-fledged application framework and is much more complex and harder to learn. It should be used to solve a specific problem. Not used, just to use it.

5

I found an example:


I want to create a page similar to start.

6

That’s not a question. I can’t possibly tell you everything you need to do to make that page.

  1. Look at the page what do you see? There is a nav, a hero section, a tab switcher, a card layout, a company promo section, a call-to-action section, a footer.

  2. Inspect the source to help you figure out the page structure and how certain things were done.

  3. Start coding, start from the top and work your way down. If you have a question or something you can’t figure out how is done then ask.