Day 15: Get Read to Code a Website
Today’s lesson introduces the first coding project Skillcrush students will begin building. This is the Rogue Pickings website. I already built this project before so you can find more in-depth posts on this topic around here on DEV. Students aren’t necessarily coding much in today's lesson. They will rather set up their workspaces so they are ready to start coding. Think of this phase as the mise-en-place portion of coding. When chefs cook, they do all their mise en place first. This means getting all their ingredients ready to go. Once the prep work is done, they are ready to start cooking. Coding is exactly the same since developers like to have everything ready to go before they write one line of code. Video Recap Adda begins the lesson with two videos. One video is a friendly reminder that this lesson is the start of things getting tougher. That means it will take longer to complete a lesson so take your time. Then the second video explains what a text editor is. Text editors are one of the most important tools developers need so Skillcrush takes a minute to explain why this tool is important. I will be using CodeSandsBox throughout this review series, but Skillcrush recommends students download a text editor like VS Code to use as well. There are a lot of text editors developers can choose from. I've used used a bunch throughout my coding journey. However, Skillcrush and I both recommend VS Code (Visual Studio Code). VS Code is very popular among developers and is used by many companies. One of the highlights of this text editor is its extension library. Skillcrush notes that this text editor has lots of good accessibility features which I immediately played around with so I can better see the code I write. An important item that helps developers put websites together is a design comp (design comprehensive). This item is a mock-up of all the layouts and visual elements for your website. It is your unofficial guide for building a web project. When you are on a web development team, a web designer (or a fullstack developer) puts the design comp together. Once the team gets the green light on the design comp, developers take the design comp and translate it into a web page. Challenges The first activity was downloading VS Code and creating your first code file. I already have VS code installed on my computer so I used the time to play around with the settings in VS code. Then I created a new file in CodeSandsBox and set up a code file. I changed the font color and font size there too since the blue color was hard to see against the black background. The next step was setting up the workspace. I downloaded the code files to my computer and changed my CodeSandsBox file to match what Skillcrush asked for. I had to google how to add images to CodeSandsBox if possible so I can use them to build the website. However, I was able to get the file organized and the right folders added to my workspace. I will need to google CodeSandsBox documentation to get a better idea of how to use this text editor to add files and refresh the previewer. Tomorrow’s Plan Now it is time to start coding. The first thing to focus on is the HTML. Tomorrow I will be adding all the HTML code I need for the Rogue Pickings web page. By the end of this lesson, almost all the HTML code will be in the index.html file. I won’t be doing too much work on the styles, but I will be using a little bit of CSS to get a headstart on the styles. This post was written on December 28, 2024 during the 2024 holiday break.
Today’s lesson introduces the first coding project Skillcrush students will begin building. This is the Rogue Pickings website. I already built this project before so you can find more in-depth posts on this topic around here on DEV.
Students aren’t necessarily coding much in today's lesson. They will rather set up their workspaces so they are ready to start coding. Think of this phase as the mise-en-place portion of coding.
When chefs cook, they do all their mise en place first. This means getting all their ingredients ready to go. Once the prep work is done, they are ready to start cooking. Coding is exactly the same since developers like to have everything ready to go before they write one line of code.
Video Recap
Adda begins the lesson with two videos. One video is a friendly reminder that this lesson is the start of things getting tougher. That means it will take longer to complete a lesson so take your time.
Then the second video explains what a text editor is. Text editors are one of the most important tools developers need so Skillcrush takes a minute to explain why this tool is important. I will be using CodeSandsBox throughout this review series, but Skillcrush recommends students download a text editor like VS Code to use as well.
There are a lot of text editors developers can choose from. I've used used a bunch throughout my coding journey. However, Skillcrush and I both recommend VS Code (Visual Studio Code).
VS Code is very popular among developers and is used by many companies. One of the highlights of this text editor is its extension library. Skillcrush notes that this text editor has lots of good accessibility features which I immediately played around with so I can better see the code I write.
An important item that helps developers put websites together is a design comp (design comprehensive). This item is a mock-up of all the layouts and visual elements for your website. It is your unofficial guide for building a web project.
When you are on a web development team, a web designer (or a fullstack developer) puts the design comp together. Once the team gets the green light on the design comp, developers take the design comp and translate it into a web page.
Challenges
The first activity was downloading VS Code and creating your first code file. I already have VS code installed on my computer so I used the time to play around with the settings in VS code. Then I created a new file in CodeSandsBox and set up a code file.
I changed the font color and font size there too since the blue color was hard to see against the black background. The next step was setting up the workspace. I downloaded the code files to my computer and changed my CodeSandsBox file to match what Skillcrush asked for.
I had to google how to add images to CodeSandsBox if possible so I can use them to build the website. However, I was able to get the file organized and the right folders added to my workspace. I will need to google CodeSandsBox documentation to get a better idea of how to use this text editor to add files and refresh the previewer.
Tomorrow’s Plan
Now it is time to start coding. The first thing to focus on is the HTML. Tomorrow I will be adding all the HTML code I need for the Rogue Pickings web page.
By the end of this lesson, almost all the HTML code will be in the index.html file. I won’t be doing too much work on the styles, but I will be using a little bit of CSS to get a headstart on the styles.
This post was written on December 28, 2024 during the 2024 holiday break.
