This plan guides you through the fundamentals of coding for web design, starting with the basics of HTML and CSS and culminating in creating a responsive website. Over four units, you’ll learn how to structure and style web pages, set up a local coding environment, and make your website adaptable for different screen sizes. By the end of the course, you’ll have built your own fully functional, visually appealing website and developed skills to take your web design journey further.
This course is designed for beginners with no prior coding experience. It includes a mix of videos, articles, and practical exercises to ensure a hands-on learning experience. Optional challenges are provided for those who want to deepen their understanding and skills.
Milestone: By the end of Unit 1, you should understand the structure of an HTML document and how to create simple content like headings and lists.
Optional Unit Challenge: Add a link (anchor tag) to an external website in your HTML code.
Learn the role of HTML in creating websites and how tags like <html>, <head>, and <body> work together.
Identify three key elements from the video (e.g., headings, paragraphs, links) that you’d like to try creating.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Use CodePen to write a simple HTML page with a heading, a paragraph, and a list of your favorite hobbies.
Experiment by adding another paragraph or list and preview the changes in the editor.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Milestone: At the end of this unit, you should have a clear understanding of how to apply basic CSS styling to an HTML page. You will have experimented with adding inline styles to change font sizes, colors, and text alignment, creating a visually appealing and personalised webpage.
Optional Unit Challenge: Use Google Fonts to import a custom font into your webpage. Apply the new font to your headings and paragraphs, and experiment with combining different font styles to create a cohesive design.
Follow along with the video to learn how to add a style section to your HTML code.
Change the text color and background color of your HTML page.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Follow the examples on the webpage to add styles to your HTML page. Practice adding inline styles to change font sizes, text alignment, and background colors.
Try creating a consistent color scheme by assigning one color to headings (h1) and another to paragraphs (<p>) and experiment with changing the font family. Use the examples provided on W3Schools to guide your work.
Save your changes and view your page in your browser to see how the styles affect the look and feel of your website.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Milestone: At the end of this unit, you should have set up a local coding environment and built a simple, styled webpage with linked HTML and CSS files.
Optional Unit Challenge: Add an additional page to your website (e.g., about.html) and link it to your homepage using an anchor tag. Style the new page to match your homepage.
Download and install Visual Studio Code (or another code editor of your choice).
Create a project folder on your computer to store your HTML and CSS files. Name your HTML file index.html and your CSS file styles.css.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Follow the BrowserStack guide to create a basic homepage (index.html) using HTML. Include:
A title in the title tag.
A heading (h1), a paragraph (p), and a list (ul or ol).
Link your styles.css file to the HTML document and add at least three CSS rules to style the page. For example:
Change text color and font size.
Adjust the background color of the page.
Align text to the center or left.
Save your changes and open the index.html file in your browser to see the results.
Optional: Add an image to your website using the img tag. Use CSS to resize the image and add a border.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Milestone: At the end of this unit, you should understand the key principles of responsive web design and have successfully implemented media queries to make your website adapt to different screen sizes.
Optional Unit Challenge: Add a navigation bar to your website and style it for both desktop and mobile layouts. Use Flexbox or media queries to create a clean, user-friendly design that works on all devices.
Read the article to understand the key principles of responsive design, such as flexible layouts, media queries, and fluid grids.
Write down three guidelines you can apply to your own website (e.g., using percentages for widths instead of fixed pixel values or designing for mobile-first).
Identify one part of your current website (e.g., text, images, or layout) that could benefit from responsiveness, and brainstorm how you might improve it using the principles in the article.
Optional: Research additional examples of responsive websites and reflect on how they handle different screen sizes effectively.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Follow the steps in the guide to add a media query to your CSS file. For example:
Adjust the font size and padding for smaller screens (e.g., under 768px).
Reorganise elements (e.g., switch from a multi-column layout to a single-column layout on mobile).
Test your website on different screen sizes using your browser’s developer tools or an online tool like Responsinator.
Write down one improvement you made to your website and explain how it enhances the user experience on mobile or tablet devices
Optional: Experiment with Flexbox or Grid in CSS to create more dynamic layouts for larger screens.
See top reddit mentions (in top 25 posts from relevant subreddits)
# of mentions: N/A
Post upvotes: N/A
Comment upvotes: N/A
Reflection Questions: What were the three most valuable lessons you learned about coding and web design during this course? How has your understanding of HTML, CSS, and responsive design evolved since you started this plan? Which part of building your website are you most proud of, and why? What challenges did you encounter while completing this plan, and how did you overcome them? How has your confidence in coding and creating websites improved as a result of this learning plan? What’s the next step in your web design journey? (e.g., adding interactivity with JavaScript, improving your responsive design skills, or building a more complex website). Instructions: Spend 20–30 minutes answering these questions in your progress journal or coding notebook. If you feel comfortable, share your reflections with a coding community or a peer for feedback and encouragement. Set one specific goal for the next month to continue developing your web design skills. Examples include exploring advanced CSS features like Flexbox, learning JavaScript, or creating a portfolio site to showcase your work.
No Reviews Yet