Starting My First HTML/CSS Project, Feeling Lost

You Can Do This!
1

I’m going to start my first HTML Project on Tribute Pages soon but I feel like I have no clue how to get started. Like I did the stuff on the curriculum and can figure my way around a website’s HTML code. But actually starting is what feels tricky, how do you guys usually get started?

3 Likes
2

Hey @Smellbringer!

Welcome to the forum!

It is completely normal to feel overwhelmed when it comes to starting your first project.

Here is how I approached the responsive design projects.

  1. Start by passing the user stories first.
    Ex. user story 1
<main id="main">
</main>

Then go through the rest of the user stories. If you get stuck then you can review those lessons that apply to that particular issue you are having. You can also ask the forum for help when you get stuck too. Once you complete the steps it won’t look that great but it’s a start.

  1. Draw out the layout for this page. It could be a simple drawing just placing where the elements will go on the page (Ex title, image, links, paragraphs, etc.)

  2. Pick a color scheme. Pick one or two colors that you want to use.

  3. Pick a font family. Maybe you want to experiment with google fonts.

  4. Slowly start to build the page from top to bottom. Start with the title, than image, than some sort of text about the person, and a link . Again, if you get stuck review the lessons that relate to the problem or ask the forum.

And it is important to remember that these projects do not need to be perfect. You are just starting out. This is more of an opportunity to learn and grow than create the perfect page. Also, remember that your project only needs to pass the user stories. Please come up with your own style do not copy sample code.

Hope that helps!

10 Likes
3
  1. google tutorial for the project
  2. follow step by step
  3. recreate what you have followed on your own, add some personal flavor to it
2 Likes
4

For FCC I usually look at the provided example first to get a gist of what they are expecting.

Then I look at the requirements and/or run the FCC test suite on an empty fork that FCC provided to see the tests I should be passing.

I attempt to pass all the tests and make it look pretty later if I have time.

Using this method you might not get the most ‘inspired’ or ‘imaginative’ project, but these small FCC projects are just to get you used to how things work. Remember you can use those creative juices for something else, like creating a really engaging portfolio webpage or a bigger project you think up in the shower.

This doesn’t mean you should not spend maybe an absurd amount of time on the FCC projects ( I have). If you feel like you wanna add another functionality or crazy animations, etc., then go for it!

5

Hey @Smellbringer

You can do this!

1 Like
6

i really need this … thanks :upside_down_face: :kissing_closed_eyes:

7

Hey there @Smellbringer!

I felt the same way when I did my first project, one way to get unstuck (because you will get stuck it’s inevitable) is to reverse engineer the html/CSS from the CodePen example provided by FCC.

Html can be simple, but CSS can a lot more complicated and watching how others do it and seeing how it works can help you to implement your own design with certain principles you learn from others.

I’m not saying to completely copy the FCC page I just suggest turning to the page as a reference as to how you should do things.

Remember, always make your code your own, but it’s ok to get help sometimes.

Hope this helped!
Best, Cy499_Studios

8

I would not recommend that. You should instead use what you’ve learnt and if you’re having issues, look them up or ask folks on the forum for seeing how you can solve the issue. But don’t go step-by-step as per a tutorial, the whole point of these challenges is to build your curiosity and to help discover your mistakes

2 Likes
9

I used to feel the exact same way. I could explain the concepts but once I sat down in front of a text editor, my mind went blank and I had no idea what to do. So I just started writing everything, notes, recipes, letters, everything in VS code. I had no problem writing the functions on paper so I figured I would just .append() (I couldn’t help myself…LOL) my comfortability into writing code like I have with pen and paper. It worked!! I don’t freeze up anymore and I just keep practicing, practicing, practicing. Sometimes I still get stuck but then I just use the scientific method to solve the problem. Works 99% of the time :slight_smile:

2 Likes
10

Agreed! 20 character