How to start building sample web page ( post learning HMTL, CSS )

1

Dear All,

Kindly excuse for this basic query, last week I’ve completed HTML and CSS concepts while trying out basic examples.

Now I wish to build full fledged webpage using most of the concepts of HTML & CSS, but not understanding how to start.

e.g. I wish to replicate http://www.pascalvangemert.nl/#/profile, where should I start ?

  • Pen + Paper ?
  • Make list of elements ?

Any guideline will be super helpful.

Thanks in advance.

Regards,
Vikram

2

Think in terms of sections and create divs to contain those sections. Put in some content in each of those divs and start styling them to achieve the look you want. That’s a good place to start.

1 Like
3

Thanks for quick info, I’ll give it a try and share my learnings on this thread.

Do you’ve any links to read more on this topic from real world scenarios ?

Regards,
Vikram

4

The project you are trying to replicate is really awesome and one needs to have a very good knowledge you HTML, CSS concepts.Complete this project would be a really good opportunity for you.
Now you are thinking how to start and what should i do fist before starting this project, then I would say just dig right in create the html file and start making it right away and since it is a complex project you will be having some difficulties for that you can refer to freecodecamp and similary website.
Although you can check out my portfolio website for some inspiration: https://dev-ashishpal.github.io/

1 Like
5

Hi,

Just to give an update & looking for help as well.

  1. I’m quite comfortable with HTML now, able to use proper elements

  2. But still not getting which CSS property to use ?

Can you please share how to approach CSS ? I’m still running around one problem to another wrt CSS, not getting exactly how to use it ?

Thanks in advance.

6

Dear Community,

After spending 9 weeks of self bootcamp learning ( FCC, YouYube videos, Udemy course ) I would like to share few important lessons for new engineers.

  1. Refer to YouTube videos where they are explaining and coding, delete - repeat code few times till code sticks into your mind

  2. Without actual coding; I found it very hard to understand CSS. Initially it was like dreaded VC++ of early 2000

More your practice along with YouTube authors more confidence you’ll get.

Regards,
Vikram

7

Found one really nice projects video

Main difference I found in this video is author has not practiced code earlier but doing trial and error live. In most of the project tutorials authors have already did the project and do hardly any mistakes but Florin has done real world project

8

You have a blueprint already, just start and the community is ready to help when you run into any issues :slightly_smiling_face:

9

As new learner of HTML and CSS, I had found later very hard to understand please refer to issue

So after trial and error, I found looking live/recorded coding, modifying code is best way to learn CSS

1 Like
10

That’s right. Tutorial videos can get you ready in no time

11

@vikramvi I checked out your initial link and that website is quite beautiful. If you are still interested in learning from it, it is built in a framework called Bootstrap (I am learning Bootstrap right now). Here are the docs, which will give you an idea:

There are videos to teach bootstrap, too. I made this site over the last day or two using Bootstrap:

12

Thanks; but I’ve also read as new learner s/he should understand basics of CSS well enough and not to use any frameworks like Bootstrap etc or pre-processors.

Also if basics are pretty solid then picking up any new shiny framework/library/pre-processor shouldn’t be difficult IMHO, but thanks anyways.

Regards,
Vikram

13

After 3 quarters of practice, study; I think a better way to style ( implement CSS ) with lesser headaches

Refer to my answer How to use CSS step by step to build webpage based on design - #5 by vikramvi