How do I go about my first real Projects?

#1

So, I just did almost all of Responsive Web Design. I just need to complete the projects. However, I have some questions that I will list:

  • What editor should I be using for these projects (as I am a beginner, VS code probably wouldn’t be a good choice)

  • Is there anything I could specifically read or watch that would help before starting the projects?

  • In most things I go through things step by step when learning them. However, I am wondering if I should “wing it”, or continue to go step by step?

  • I took many long pauses while learning and doing the challenges. I have been told before in advance for when I finished this much, that I should go back and redo challenges. This is good advice, but I really don’t know what I do and don’t remember. Also, from past experience, I find the best way for me to memorize things is to actually use the memorized information. Hopefully that might help answer some of these questions.

    Well, those are the main questions I have so far. I may add more in the replies if absolutely necessary, but for the most part, this should be good. If you need anything from me, just let me know!

#2

HI @Josh641 !

Whatever editor you feel comfortable with.
VS code is a popular choice. I use it myself.
Sublime, atom, codepen are other options as well.

I think you should look at the sample (just the finished product not the code) and get a sense of what you should be building. Remember that the sample is just one way to build that project not the only way. Also, you don’t need to copy the sample either. :grinning:

Read through the instructions and go through each user story one by one.

Everyone has their own way of building the projects. My suggestion is to start with tackling the user stories and then style the page.

I wouldn’t redo all of the challenges. I would just get started and then if you get stuck then can review the challenges related the issue you are having.

Research plays a big role in development.
There are also plenty of great resources outside of FCC that you can look into as well.

You are not expected to memorize anything because there is just way to much information to learn and technology is always changing.

The goal is to learn how to research well and read documentation.
With enough time and practice you will memorize some things but not everything.

The key is to just build, learn, repeat. :grinning:

#3

When you’re just starting out, I think that the editor provided by CodePen is just fine. No need to worry about it.

It’s time to jump in and get your hands dirty. As you are working on the projects, you’ll probably hit some snags where you don’t know how to accomplish a specific goal or something isn’t working right. That’s when you go into research mode. This is also how we write code professionally: we see how far we can get with what we know and then go figure out how to fill in knowledge gaps as we find them.

I think it’s a bit of both. I suggest trying to break the project down into smaller pieces, or you’ll get overwhelmed and make a bit of a mess (which is fine and often part of the process, but not super fun). But beyond that you just have to be a bit bold and reckless and just try things and see what you get.

I wouldn’t try to go back and redo challenges right now. That’s a good way to procrastinate on starting a scary project, but repeating lessons doesn’t necessarily gain you much. When you run into something that you don’t remember, then go find the lesson(s) on that specific subject and review it.

Don’t bother trying to memorize things. That’s not really how programming works. Sure, there are things you’ll use so much that you can write them in your sleep, but you’ll also be looking things up for your entire life as a programmer. Make peace with that and don’t stress out about forgetting things. As long as you feel like you understood something when you learned it, you’ll be able to pull up the information again quickly.

#4

Hi,
For responsive web design and later for Node.js I recomend you Bracket.
Bracket support live update. The page in your browser will updated as you write the code. And later when you learn Node.js you can start node server from Bracket. It is really helpful. But VS Code also a good choosing.
But forget to use Codepen. Always write your code in your own development environment. (On your computer). Codepen good for deploy your code but not for developing.

#5

While doing the project, i would simply type the main words in the stories and search online

#6

Thanks everyone for the answers! I have now started the tribute project, and have finished the title, as well as put my image in. However, I am now having trouble with centering my image. No matter what I do, it always stays on the left side. This is my code:

HTML

<!DOCTYPE html>
<html>
<!--
 Title of Page
--> 
<link rel="stylesheet" href="tribute.css">
<head>
    <h1 class="positionh4h1">A Tribute To Dr. Jonas Edward Salk</h1>
<h4 class="positionh4h1">The Person Who Made The First Polio Vaccine</h4>
</head>

<body>
<!-- Image of Page -->
<img src="https://ids.si.edu/ids/deliveryService?max_w=800&id=https://npg.si.edu/media/B2000434C.jpg" alt="A image of Salk" id="imgOfSalk">

</body>
</html>

Css:

.positionh4h1{
    display: flex;
    justify-content: center;
};

#imgOfSalk{
   
}

I have not put anything in #imgOfSalk, as that is where I am struggling. Thanks in advance!

#7

@Josh641, a couple of things;

  1. I don’t know where you’re coding but you have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  2. It will be easier if you first meet as many of the user stories as you can but coding the HTML portion. Then, do your styling. You’ll find it difficult to try and make things “fit” if you go back and forth.

If you’re using codepen, it provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
Also if using codepen it’s easier if you provide a link to your pen rather than pasting code into here.

#8

@Roma, thanks for showing me that. It has showed me what I missed about these general tags. I will try to keep these in mind. I do appreciate the advice on doing HTML, then CSS , but however, in this case everything automatically goes on the left edge. It makes it hard for me to see if I did the job right. That is why I need to put it in the center. Also, I have never heard about boilerplates, and will try to research it! I am a beginner, so I know it is messy and unnecessary, but this is my first personal project. That is going to happen. But, again the article helped quite a bit! Thanks for the help!

#9

If you google How to center an image in css you will get the answer you are looking for. The last two user stories are the two that most people struggle with. So I would suggest reading the full error message because it will tell you exactly how to fix the problem. :grinning:

#10

That fixed it! I had to look a bit, as the two main methods didn’t work but the third, which was just putting it from what I understand into a div element, to turn it into a block element, then style it.