Practicing and Applying HTML and CSS Skills for Beginners
You just learned HTML and CSS and created very basic websites. Creating those first websites was fun and cool. Typing #FF530D on a style sheet outputs an orange background and that is cool.
You look at the HTML code and it feels like you’re some sort of hacker. The truth is that you will not become a hacker by knowing HTML and at this point you may have encountered a few problems.
A common problem beginners have is remembering the syntax for HTML and CSS. How do you remember it? How do you practice HTML? Other have a problem with getting more and better ideas, or you want to develop a habit of making websites and applying what you learn. A great way and often overlooked way is to redesign websites.
What is redesigning websites? Redesigning a website is about finding a website and you redesign it with your style, designs, textures, etc. The website can be a random website or it can be your favorite website, it doesn’t matter just choose one.
By choosing an existing website you are given the idea, theme, and content. All you do is make the design or CSS. The content is already provided except the HTML tags making this a great way to practice using HTML and CSS.
To demonstrate this idea of redesigning websites, I searched for a bad or out dated website and luckily a lodging out dated website was found.
Many ways exist for finding a website, try using a search engine to find a specific topic or type of website. Many sites have lists of examples of bad looking sites or try to look up a site created in the 90’s those are always fun.
You got a site picked out, great. Now the site needs to be evaluated or critiqued. The lodging site is a bad site and I looked for the most obvious problems that needed to be fixed.
The site you choose may not have problems and just needs a new look and feel. A problem that needed to be fixed immediately was that the site is not responsive in other words the site should resize and change to fit the screen.
Once all the problems are identified, write them down or make a note of them. Start planning on the changes that can be made. Brainstorm ideas you have about the redesign.
The design plans can be various formats like sketches, wireframes, sticky notes, etc. I chose to use wireframes with Adobe Illustrator. Wireframes help me get my ideas down and think about the layout of each page. I did not redesign the whole website, I only redesign four pages with a Mobile, Tablet, and Desktop version of each.
Now the fun begins, open your favorite text editor and start coding. You have an idea, theme, content, and a plan for the changes and a new design. At this point you’re just typing and getting in the zone.
Mistakes will be made but that’s okay because you will learn from them. If you forget the syntax of a HTML tag, it’s okay to search for the answer.
Maybe you designed something that you don’t know how to code yet, well just try to code it and maybe you will figure it out, that’s how you learn to do new designs and use new lines of code.
For the desktop version of the wireframe, I added an animation to the social links and I didn’t know how to code it, at the end of the project I figured it out. Finding the answer is possible.
Redesigning is an easy process, anyone can do it from beginners to professionals. When starting a new project the first problem is thinking of an idea, but with a redesign the website already exists you’re just changing it and re-making it your way.
This is a great way to practice using HTML and CSS and because your practicing it, it will be easier to remember. For those who want to get better ideas, while making plans try new things each time with each design or do research and get inspiration from other projects.
Redesigning websites can be done over and over, this will help you to develop a habit of creating websites and getting used to the syntax.
Links: